The CSS minifier we currently use (clean-css) is not maintained and lacks support for new CSS features. CSSNano is a replacement that supports features we need (primarily container queries). This CL only adds the relevant dependencies, and does not use it. I will do that (and remove clean-css) in a follow-up. Bug: 1399763 Change-Id: I899ecc4482164404dd5ac2fd13f92fb797978e29 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4092305 Commit-Queue: Jack Franklin <jacktfranklin@chromium.org> Reviewed-by: Alex Rudenko <alexrudenko@chromium.org> Commit-Queue: Alex Rudenko <alexrudenko@chromium.org> Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
stylehacks
Detect/remove browser hacks from CSS files.
Install
With npm do:
npm install stylehacks --save
Example
In its default mode, stylehacks will remove hacks from your CSS file, based on the browsers that you wish to support.
Input
h1 {
_color: white;
color: rgba(255, 255, 255, 0.5);
}
Output
h1 {
color: rgba(255, 255, 255, 0.5);
}
API
stylehacks.detect(node)
Type: function
Returns: boolean
This method will take any PostCSS node, run applicable plugins depending on
its type, then will return a boolean depending on whether it found any of
the supported hacks. For example, if the decl node found below is passed to
the detect function, it will return true. But if the rule node is passed,
it will return false instead.
h1 { _color: red }
postcss([ stylehacks(opts) ])
stylehacks can also be consumed as a PostCSS plugin. See the documentation for examples for your environment.
options
lint
Type: boolean
Default: false
If lint mode is enabled, stylehacks will not remove hacks from the CSS; instead,
it will add warnings to Result#messages.
Related
stylehacks works well with your existing PostCSS setup:
- stylelint - Comprehensive & modern CSS linter, to ensure that your code style rules are respected.
Contributing
Pull requests are welcome. If you add functionality, then please add unit tests to cover it.
License
MIT © Ben Briggs