Postcss-import-json NPM

postcss-import-json

PostCSS plugin to import variables from JSON file.

To import variables you should specify names to get from JSON. This allows you to better control the origin of variables.

In import rule variable can be renamed with as NEW_NAME syntax. You can also specify individual variable prefix, instead of global, using prefix PREFIX. Both directives are optional.

Syntax

@import-json <string> (<variable-declaration>#);

where
<variable-declaration> = <json-name> [ as <css-name> ] [ prefix <css-prefix> ]

where
<json-name>, <css-name>, <css-prefix> is identifiers and should not be a string.

Example

div
{
	@import-json "./imports/colors.json" (fg as text prefix --, bg);
}

Output:

div
{
	--text: black;
	$bg: white;
}

You can find more examples in tests.

Install

npm install --save-dev postcss-import-json

Usage

It’s asynchronous plugin, so use should youse promises or async/await.

Source file path is required to resolve relative paths. If this path is not specified, root option is used (process.cwd() by default).

In this example used custom resolver to process paths, started from ~/, as relative to __dirname.

const postcss = require( 'postcss' );
const importJson = require( 'postcss-import-json' ).default;

const css = '@import-json "~/fixtures/imports/colors.json" (fg, bg);';
const options = {
	resolve: ( path ) => (
		/^~\//.test( path )
		? resolve( __dirname, path.substr( 2 ) )
		: path
	),
};

postcss( [globalVars( options )] )
	.process(
		css,
		{from: '/tmp/test.css'},
	)
	.then(
		( result ) =>
		{
			console.log( result.css ); // => '$fg: black;\n$bg: white;'
		},
	);