[] lets you easily export parts of your CSS source files to JavaScript objects.

your query :

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

your config :

<exportName>({
	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 },
]

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.

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

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.

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

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.