postcss-sparrow-units-filter
Version:
A PostCSS Sparrow plugin that helps you filter declarations by its unit.
74 lines (51 loc) • 2.87 kB
Markdown
# PostCSS Sparrow Units Filter
[](https://snyk.io/test/github/winston0410/postcss-sparrow-units-filter?targetFile=package.json) [](https://codeclimate.com/github/winston0410/postcss-sparrow-units-filter/maintainability) [](https://codeclimate.com/github/winston0410/postcss-sparrow-units-filter/test_coverage) [](https://www.codacy.com/manual/winston0410/postcss-sparrow-units-filter?utm_source=github.com&utm_medium=referral&utm_content=winston0410/postcss-sparrow-units-filter&utm_campaign=Badge_Grade)
A PostCSS Sparrow plugin that helps you **search CSS declarations** by **units**.
This plugin is designed to be used with [PostCSS Sparrow](https://www.npmjs.com/package/postcss-sparrow), which helps you filter CSS declarations by **selectors**. By using these two plugins together, you can **easily get the declarations you need**.
## Made in Hong Kong :free: :free:
This plugin is made with love by a Hong Konger.
## Installation
This plugin require you to use [PostCSS Sparrow](https://www.npmjs.com/package/postcss-sparrow) for matching with selectors you want.
Download both `postcss-sparrow` and this plugin through NPM.
```shell
npm i postcss-sparrow postcss-sparrow-units-filter
```
Then import this plugin as the callback for [PostCSS Sparrow](https://www.npmjs.com/package/postcss-sparrow).
```javascript
//postcss.config.js
module.exports = {
plugins: [
//Other plugins...
require('postcss-sparrow')({
transformations: [
{
selectors: ['*'],
inclusion: true,
callbacks: [
require('postcss-sparrow-units-filter')(
{
units: ['px', 'rem', 'em'],
inclusion: true,
callbacks: [
//Do transformation here with your own callback functions
(decl) => {
decl.remove()
}
]
}
)
]
}
]
})
]
}
```
## API Reference
### `options.units` : Array
An array of units that you want to match with. Use `*` as wildcard and select all units.
For example, `px` will match `padding: 20px`.
### `options.inclusion` : Boolean
True for including and False for excluding selectors listed in `options.units`.
### `options.callbacks` : Array
An array of callbacks that you use to transform the selected declarations. The selected declaration will be passed in as an argument.