Security News
Meet Socket at BlackHat and DEF CON in Las Vegas
Come meet the Socket team at BlackHat and DEF CON! We're sponsoring some fun networking events and we would love to see you there.
By Amjed Aboukhadijeh - Jul 20, 2024
You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP →
stylehacks
Advanced tools
Package description
What is stylehacks?
The stylehacks npm package is designed to detect and remove hacks from CSS files. These hacks are often used to target specific browsers with CSS rules that wouldn't be valid or necessary in a standards-compliant browser. By identifying and removing these hacks, stylehacks helps in cleaning up CSS files, making them more maintainable and potentially reducing file size.
What are stylehacks's main functionalities?
Detecting CSS hacks
This feature allows the detection and automatic removal of CSS hacks. The code sample demonstrates how to use stylehacks with PostCSS to process a CSS string that contains a hack (`_color: red`), which is targeted at old versions of IE, and remove it.
"const stylehacks = require('stylehacks');
const postcss = require('postcss');
postcss([ stylehacks() ])
.process('h1 { _color: red }', { from: undefined })
.then(result => {
console.log(result.css);
// Output will be 'h1 { }' as the hack is removed
});"Whitelisting specific hacks
This feature allows users to lint for hacks without removing them, useful for cases where a hack is intentionally being used. The code sample shows how to use stylehacks in lint mode, which will not remove the hack but can be used to report or log its presence.
"const stylehacks = require('stylehacks');
const postcss = require('postcss');
postcss([ stylehacks({ lint: true }) ])
.process('h1 { _color: red }', { from: undefined })
.then(result => {
console.log(result.css);
// Output will be the same input 'h1 { _color: red }' as it only lints
});"Other packages similar to stylehacks
postcss
While not exclusively focused on removing CSS hacks, PostCSS is a tool for transforming CSS with JavaScript plugins, one of which is stylehacks. PostCSS provides a broader range of functionalities for working with CSS, including autoprefixing, minification, and custom properties, making it more versatile but also more complex.
clean-css
clean-css is a fast and efficient CSS optimizer that can minify CSS files, including restructuring, removing unused CSS, and applying various optimizations. While it doesn't specifically target CSS hacks like stylehacks does, it contributes to the overall goal of optimizing and cleaning CSS files.
cssnano
cssnano is a modular CSS minifier that integrates with PostCSS, similar to stylehacks. It focuses on optimizing CSS files by reducing their size for production environments. cssnano includes functionalities for removing outdated browser prefixes, minifying font values, and discarding comments, among others. While it shares the goal of optimizing CSS, cssnano doesn't specifically target CSS hacks for removal but rather focuses on a wide range of optimizations.
Readme
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 }
stylehacks.process(css, [options]).then(function(result) {})
options
browsers
Type: string|array
Default: browserslist defaults
Specify the browsers that you wish to support. The string will be passed directly to browserslist and parsed, however if an array is passed instead then stylehacks will use it instead of parsing the browsers itself.
lint
Type: boolean
Default: false
If lint mode is enabled, stylehacks will not remove hacks from the CSS; instead, it will warn that hacks were found. When using stylehacks as a PostCSS plugin, you are expected to handle these messages yourself.
silent
Type: boolean
Default: false
Used in combination with the lint option; disables all logging. When using the CLI, the process will exit with 0 or 1 as usual.
sourcemap
Type: boolean
Default: false
Generate a sourcemap with the transformed CSS.
postcss([ stylehacks(opts) ])
stylehacks can also be consumed as a PostCSS plugin. See the documentation for examples for your environment.
CLI
stylehacks also ships with a CLI app. To see the available options, just run:
$ stylehacks --help
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
FAQs
Detect/remove browser hacks from CSS files.
The npm package stylehacks receives a total of 9,824,515 weekly downloads. As such, stylehacks popularity was classified as popular.
We found that stylehacks demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Package last updated on 29 Feb 2016
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
The “Non-Existent Author” Alert: How to Safeguard Against the Dangers of Abandoned npm Packages
Learn how Socket's 'Non-Existent Author' alert helps safeguard your dependencies by identifying npm packages published by deleted accounts. This is one of the fastest ways to determine if a package may be abandoned.
By Sarah Gooding - Jul 18, 2024
Security News
Python Software Foundation Responds to GitHub Token Leak, Elects New Board Members, and Announces Key Infrastructure Hires
In July, the Python Software Foundation mounted a quick response to address a leaked GitHub token, elected new board members, and added more members to the team supporting PSF and PyPI infrastructure.
By Sarah Gooding - Jul 17, 2024