filter-css

filter-css

Filter CSS rules

Install

$ npm install --save filter-css

Usage

var filterCss = require('filter-css');
var 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, Function or an Array containing 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 by css.

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 {
    ...
}

var filterCss = require('filter-css');

filterCss('test/fixtures/test.css',[/url\(/,'@font-face',/print/]);

.bigBackground {
	width: 100%;
	height: 100%;
}

Remove all media queries

var filterCss = require('filter-css');

filterCss('test/fixtures/test.css',/.*/,{
	matchSelectors: false,
	matchTypes: false,
	matchDeclarationProperties: false,
	matchDeclarationValues: false,
	matchMedia: true
});

Using a function matcher

var filterCss = require('filter-css');

filterCss('test/fixtures/test.css',function(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-face

You can also pass in the file as an option.

$ filtercss test/fixture/test.css --ignore @font-face

CLI options

See filtercss --help for a full list of options.

License

MIT © Ben Zörb