# css-node-extract

> Extract certain nodes from CSS code

Latest version **3.0.4** (published 2023-08-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-node-extract
pnpm add css-node-extract
yarn add css-node-extract
bun add css-node-extract
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.4 |
| Published | 2023-08-21 |
| First published | 2017-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 35.9 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Markus Oberlehner |
| Maintainers | maoberlehner |
| Keywords | CSS |

## Links

- npm: https://www.npmjs.com/package/css-node-extract
- Repository: https://github.com/maoberlehner/css-node-extract
- Issues: https://github.com/maoberlehner/css-node-extract/issues
- npm.io page: https://npm.io/package/css-node-extract

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ^7.0.36
- [change-case](https://npm.io/package/change-case.md) ^4.1.2

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 3.0.4 (latest) — 2023-08-21
- 3.0.2 — 2018-04-23
- 3.0.1 — 2018-04-17
- 3.0.0 — 2018-04-17
- 2.1.3 — 2017-12-13
- 2.1.2 — 2017-11-21
- 2.1.1 — 2017-11-04
- 2.1.0 — 2017-09-17
- 2.0.1 — 2017-09-13
- 2.0.0 — 2017-09-13
- 1.1.0 — 2017-09-06
- 1.0.1 — 2017-08-09
- 1.0.0 — 2017-06-02
- 0.2.3 — 2017-06-01
- 0.2.2 — 2017-05-01
- … 3 more at https://npm.io/package/css-node-extract/versions

## README

# css-node-extract

[![Patreon](https://img.shields.io/badge/patreon-donate-blue.svg)](https://www.patreon.com/maoberlehner)
[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/maoberlehner)
[![Build Status](https://travis-ci.org/maoberlehner/css-node-extract.svg?branch=master)](https://travis-ci.org/maoberlehner/css-node-extract)
[![Coverage Status](https://coveralls.io/repos/github/maoberlehner/css-node-extract/badge.svg?branch=master)](https://coveralls.io/github/maoberlehner/css-node-extract?branch=master)
[![GitHub stars](https://img.shields.io/github/stars/maoberlehner/css-node-extract.svg?style=social&label=Star)](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

---
_Source: https://npm.io/package/css-node-extract · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._