Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maoberlehner/css-node-extract
Run certain filters on (S)CSS / LESS code.
https://github.com/maoberlehner/css-node-extract
Last synced: 4 months ago
JSON representation
Run certain filters on (S)CSS / LESS code.
- Host: GitHub
- URL: https://github.com/maoberlehner/css-node-extract
- Owner: maoberlehner
- License: mit
- Created: 2017-01-03T18:41:36.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T14:57:19.000Z (over 1 year ago)
- Last Synced: 2024-10-11T15:45:47.946Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.68 MB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# css-node-extract
[](https://www.patreon.com/maoberlehner)
[](https://paypal.me/maoberlehner)
[](https://travis-ci.org/maoberlehner/css-node-extract)
[](https://coveralls.io/github/maoberlehner/css-node-extract?branch=master)
[](https://github.com/maoberlehner/css-node-extract)
Extract certain nodes from CSS code.
## Filters
- **at-rules**: `@media`, `@supports`, `@mixin`,...
- **declarations**: `$variable`, `@variable`,...
- **functions**: `@function`
- **mixins**: `@mixin` and `.less-mixin-selector()`
- **rules**: `.class-selector`, `#id-selector`,...
- **silent**: Extract only nodes that do not compile to CSS code (mixins, placeholder selectors, variables,...)
- **variables**: `$sass-variable` and `@less-variable`
- **make-your-own**: Define custom filters
## Demos
```js
const cssNodeExtract = require('css-node-extract');
const postcssScssSyntax = require('postcss-scss');
const options = {
// CSS source code as string.
css: '$variable: "value"; .selector { } .other-selector { }',
// Extract only variables.
filters: ['variables'],
// postcss syntax plugin to add support for SCSS code.
postcssSyntax: postcssScssSyntax
};
// Asynchronous:
cssNodeExtract.process(options).then((extractedCss) => {
console.log(extractedCss); // Outputs: '$variable: "value";'.
});
// Synchronous:
const extractedCss = cssNodeExtract.processSync(options);
console.log(extractedCss); // Outputs: '$variable: "value";'.
```
### Custom filter
```js
const cssNodeExtract = require('css-node-extract');
const options = {
// CSS source code as string.
css: '@keyframes { } .selector { } .other-selector { }',
filters: ['my-keyframe-filter'],
customFilters: {
myKeyframeFilter: [
[
{ property: 'type', value: 'atrule' },
{ property: 'name', value: 'keyframes' }
]
]
}
};
cssNodeExtract.process(options).then((extractedCss) => {
console.log(extractedCss); // Outputs: '@keyframes { }'.
});
```
### Preserve lines
Usually `css-node-extract` removes all nodes which do not match the given filters. However under some circumstances it might be useful to preserve the original line numbers (e.g. to keep source map references intact).
```js
const cssNodeExtract = require('css-node-extract');
const options = {
css: '$variable: "value"; .selector { } .other-selector { }',
filters: ['variables'],
postcssSyntax: postcssScssSyntax,
preserveLines: true
};
cssNodeExtract.process(options).then((extractedCss) => {
// Outputs the extracted nodes with empty lines where
// other nodes got removed to preserve line numbers.
console.log(extractedCss);
});
```
### ES2015 named exports
```js
import { process, processSync } from 'css-node-extract';
import postcssScssSyntax from 'postcss-scss';
const options = {
// CSS source code as string.
css: '$variable: "value"; .selector { } .other-selector { }',
// Extract only variables.
filters: ['variables'],
// postcss syntax plugin to add support for SCSS code.
postcssSyntax: postcssScssSyntax
};
// Asynchronous:
process(options).then((extractedCss) => {
console.log(extractedCss); // Outputs: '$variable: "value";'.
});
// Synchronous:
processSync(options);
console.log(extractedCss); // Outputs: '$variable: "value";'.
```
## Upgrade from 1.x.x to 2.x.x
With version 2.0.0 the handling of custom filters was changed. The `customFilter` option was renamed to `customFilters` and this option now takes an object instead of an array. Instead of defining one custom filter named `custom`, you can now define unlimited custom filters with custom names.
## Upgrade from 0.x.x to 1.x.x
With version 1.0.0 the `filterNames` option was renamed to `filters`.
```js
// New
const options = {
css: '$variable: "value"; .selector { } .other-selector { }',
filters: ['variables'],
postcssSyntax: postcssScssSyntax
};
// Old
const options = {
css: '$variable: "value"; .selector { } .other-selector { }',
filterNames: ['variables'],
postcssSyntax: postcssScssSyntax
};
```
## Development
See [CONTRIBUTING.md](https://github.com/maoberlehner/css-node-extract/blob/master/CONTRIBUTING.md)
### Testing
```bash
npm test
```
## About
### Author
Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner
Patreon: https://www.patreon.com/maoberlehner
### License
MIT