jackburns / postcss-require-hover Goto Github PK

Depends on postcss 6.0.1 but there are vulnerabilities in that version, any chance of having that updated to a newer version

CSS code:

.close {
    position: absolute;

    &:hover,
    &:focus {
        color: red;
    }
}

PostCSS config:

module.exports = {
    plugins: [
        require('postcss-nesting'),
        require('postcss-require-hover'),
    ]
}

Output:

@media (hover: hover), (-moz-touch-enabled: 0), (-ms-high-contrast: none), (-ms-high-contrast: active) {.close:hover {
        color: red;
    }}.close:focus {
        color: red;
    }

Here, the position: absolute part is completely lost. It works OK if I either remove postcss-require-hover or downgrade postcss-nesting to v9

Reproduction: https://github.com/Hypnosphi/postcss-nesting-hover

I have been investigating this topic on my own a few days ago and I have established that the following query works correctly:

@media (hover: hover), (-moz-touch-enabled: 0) {
  ...
}

The hover media query is not supported in Firefox yet, thus -moz-touch-enabled. I don't understand the double negation either, hover: hover is the same as not all and (hover: none), isn't it?