1.0.0 • Published 6 years ago
filter-css v1.0.0
filter-css

Filter CSS rules
Install
npm install --save filter-cssUsage
const filterCss = require('filter-css');
const filtered = filterCss(<input>, <pattern>, <options>);Input
- Required
- Type:
String
Can be a path to the CSS file or a raw CSS string.
Pattern
- Required
- Type
String,RegExp,Functionor anArraycontaining it.
Patterns used to discard specific parts of the CSS.
The function is invoked with three arguments (context, value, node).
context: Current matching context. Could be one of['type', 'media', 'selector', 'declarationProperty', 'declarationValue'].value: Current value.node: The currently processed AST node generated bycss.
Return true if the element should be discarded.
Options
Per default filter-css will be applied to all parts of the CSS. This behavior can be customized by disabling specific matchers.
| Name | Type | Description |
|---|---|---|
| matchSelectors | boolean | Enable / disable matching of CSS selectors. |
| matchTypes | boolean | Enable / disable matching of AST Node types like font-face |
| matchDeclarationProperties | boolean | Enable / disable matching of CSS properties like background-image |
| matchDeclarationValues | boolean | Enable / disable matching of CSS values like url(...) |
| matchMedia | boolean | Enable / disable matching of media queries like min-device-pixel-ratio: 2 |
Examples
.bigBackground {
width: 100%;
height: 100%;
background-image: url('some/big/image.png');
}
@font-face {
font-family: 'My awesome font';
}
@media print {
...
}const filterCss = require('filter-css');
filterCss('test/fixtures/test.css', [/url\(/,'@font-face',/print/]);.bigBackground {
width: 100%;
height: 100%;
}Remove all media queries
const filterCss = require('filter-css');
filterCss('test/fixtures/test.css', /.*/, {
matchSelectors: false,
matchTypes: false,
matchDeclarationProperties: false,
matchDeclarationValues: false,
matchMedia: true
});Using a function matcher
const filterCss = require('filter-css');
filterCss('test/fixtures/test.css', (context, value, node) => {
return context === 'declarationValue' && value === "url('some/big/image.png')"
});Complete Example
filterCss('test/fixtures/test.css', {
types: ['@font-face'],
selectors: ['.my-selector > p'],
declarations: [/url/]
});CLI
filter-css works well with standard input.
cat test/fixture/test.css | filtercss --ignore @font-faceYou can also pass in the file as an option.
filtercss test/fixture/test.css --ignore @font-faceCLI options
See filtercss --help for a full list of options.
License
MIT © Ben Zörb