@csstools/postcss-extract v3.0.1

PostCSS Extract

npm install @csstools/postcss-extract --save-dev

PostCSS Extract lets you easily export parts of your CSS source files to JavaScript objects.

your query :

rule[selector*=":root" i] > decl[variable]

your config :

postcssExtract({
	queries: {
		'your-export': 'rule[selector*=":root" i] > decl[variable]'
	},
	results: function(results) {
		console.log(results)
	}
})

your css :

:root {
	--your-property: cyan;
}

.other {
	--other-property: yellow;
}

the exported data :

[
	{ type: 'decl', prop: '--your-property', value: 'cyan', variable: true },
]

Usage

Add PostCSS Extract to your project:

npm install postcss @csstools/postcss-extract --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssExtract = require('@csstools/postcss-extract');

postcss([
	postcssExtract(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Extract runs in all Node environments, with special instructions for:

• Node
• PostCSS CLI
• PostCSS Load Config
• Webpack
• Next.js
• Gulp
• Grunt

Options

queries

The queries option let's you define which parts of your CSS are exported. Each query is written in CSS.

Supported combinators:

• > direct child
• any descendant (space)
• + adjacent sibling
• ~ general sibling

Supported selectors:

• * any node
• atrule
• rule
• decl
• comment
• [type=decl]
• [value=cyan]
• [value=cyan i] case insensitive
• [value^=cy] starts with
• [value*=ya] contains
• [value$=an] ends with
• :not(<complex selector>)

Browse the PostCSS API to gain more insights into the AST naming and structure.

postcssExtract({
	queries: {
		'your-export': 'rule[selector*=":root" i] > decl[variable]'
	},
})

results

The results option let's you define a callback to receive results. You can then apply further transforms on the data so that it fits your use case.

postcssExtract({
	results: (yourResults) => {
		console.log(yourResults);
	},
})

extractLate

The extractLate option let's you define if the queries are run early or late in the PostCSS process.

extractLate: false uses Once in PostCSS. This means that it will try to run early.

extractLate: true uses OnceExit in PostCSS. This means that it will try to run late.

The order of plugins is still respected if multiple plugins use Once|OnceExit.