Skip to content

Instantly share code, notes, and snippets.

@adipascu

adipascu/force-hover-none-plugin.js

Last active March 22, 2019 12:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adipascu/10f919b3daa18c2221de934f34f22bec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adipascu/10f919b3daa18c2221de934f34f22bec to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adipascu revised this gist Mar 22, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion force-hover-none-plugin.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    /*
    This fixes issues with:
    - devices that incorrectly state they support hover (Galaxy S9, Android 8.1, Chrome 73)
    - devices that incorrectly state they support hover (Samsung Galaxy Note 9, SM-N960F, Android 8.1, Chrome 73)
    - devices that do not support media queries for hover, but they are enabled by default in Material-UI
    */
    export default {
  2. adipascu revised this gist Mar 22, 2019. No changes.
  3. adipascu revised this gist Mar 22, 2019. 1 changed file with 0 additions and 6 deletions.
    6 changes: 0 additions & 6 deletions force-hover-none-plugin.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,9 +7,6 @@ export default {
    onProcessStyle(style, rule) {
    if (rule.type !== 'style') return style;

    /* eslint-disable guard-for-in */
    /* eslint-disable no-restricted-syntax */
    /* eslint-disable no-param-reassign */
    let newProps = [];

    for (const prop in style) {
    @@ -21,9 +18,6 @@ export default {
    throw new Error(`Could not process media query ${prop}`);
    }
    }
    /* eslint-enable guard-for-in */
    /* eslint-enable no-restricted-syntax */
    /* eslint-enable no-param-reassign */
    if (newProps.length > 0) {
    return { ...style, ...Object.fromEntries(newProps) };
    }
  4. adipascu created this gist Mar 22, 2019.
    32 changes: 32 additions & 0 deletions force-hover-none-plugin.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    /*
    This fixes issues with:
    - devices that incorrectly state they support hover (Galaxy S9, Android 8.1, Chrome 73)
    - devices that do not support media queries for hover, but they are enabled by default in Material-UI
    */
    export default {
    onProcessStyle(style, rule) {
    if (rule.type !== 'style') return style;

    /* eslint-disable guard-for-in */
    /* eslint-disable no-restricted-syntax */
    /* eslint-disable no-param-reassign */
    let newProps = [];

    for (const prop in style) {
    const isNestedConditional = prop === '@media (hover: none)';
    if (isNestedConditional) {
    newProps = newProps.concat(Object.entries(style[prop]));
    delete style[prop];
    } else if (prop[0] === '@' && prop.includes('hover')) {
    throw new Error(`Could not process media query ${prop}`);
    }
    }
    /* eslint-enable guard-for-in */
    /* eslint-enable no-restricted-syntax */
    /* eslint-enable no-param-reassign */
    if (newProps.length > 0) {
    return { ...style, ...Object.fromEntries(newProps) };
    }
    return style;
    },
    };