filter-css

Filter CSS rules

Usage no npm install needed!

<script type="module">
  import filterCss from 'https://cdn.skypack.dev/filter-css';
</script>

README

filter-css npm version Build Status dependencies Status devDependencies Status Status

Filter CSS rules

Install

npm install --save filter-css

Usage

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