node-sass-json-functions

JSON encode and decode functions for sass.

Install

npm install sass node-sass-json-functions --save

Usage

import * as sass from 'sass';
import jsonFns from 'node-sass-json-functions';

(async () => {
	const result = await sass.compileAsync('./index.scss', {
		functions: { ...jsonFns }
	});
	// ...
})();

Module exports object with prepared functions json-encode and json-decode.

Encode

Input:

$list: 1, 2, '3', (4, 5, 6), (
		foo: 'bar baz'
	);
$map: (
	foo: 1,
	bar: (
		2,
		3
	),
	baz: '3 3 3',
	bad: (
		foo: 11,
		bar: 22,
		baz: (
			5,
			4,
			6,
			null,
			1,
			1.23456789px
		),
		bag: 'foo bar'
	),
	qux: rgba(255, 255, 255, 0.5),
	corgle: red,
	george: calc(42px + 42%),
	lexi: calc(42px / 2),
	oliver: calc(42px + 10px + 10px)
);

body {
	content: json-encode($list);
	content: json-encode($map);
	content: json-encode($list, $quotes: false);
	content: json-encode($map, $quotes: false);
}

Output:

body {
	content: '[1,2,"3",[4,5,6],{"foo":"bar baz"}]';
	content: '{"foo":1,"bar":[2,3],"baz":"3 3 3","bad":{"foo":11,"bar":22,"baz":[5,4,6,null,1,"1.23457px"],"bag":"foo bar"},"qux":"rgba(255,255,255,0.5)","corgle":"#f00"}';
	content: [1,2,"3",[4,5,6],{"foo":"bar baz"}];
	content: {"foo":1,"bar":[2,3],"baz":"3 3 3","bad":{"foo":11,"bar":22,"baz":[5,4,6,null,1,"1.23457px"],"bag":"foo bar"},"qux":"rgba(255,255,255,0.5)","corgle":"#f00","george":"calc(42px + 42%)","lexi":"21px","oliver":"62px"};
}

Decode

Input:

$array: '[1,2,"3",[4,5,6],{"foo":"bar baz"}]';
$object: '{"foo":1,"bar":[2,3],"baz":"3 3 3","bad":{"foo":11,"bar":22,"baz":[5,4,6,null,1,"1.23456789px"],"bag":"foo bar"},"qux":"rgba(255,255,255,0.5)","corgle":"#f00","george":"calc(42px + 42%)","lexi":"21px","oliver":"calc(42px + 10px + 10px)"}';

@debug json-decode($array);
@debug json-decode($object);

Output:

DEBUG: 1, 2, 3, 4, 5, 6, (foo: bar baz)
DEBUG: (foo: 1, bar: 2, 3, baz: 3 3 3, bad: (foo: 11, bar: 22, baz: 5, 4, 6, null, 1, 1.23456789px, bag: foo bar), qux: rgba(255, 255, 255, 0.5), corgle: red, george: calc(42px + 42%), lexi: 21px, oliver: "calc(42px + 10px + 10px)")

API

json-encode(data[, quotes])

Returns: sass.SassString

Encodes (JSON.stringify) data and returns Sass string. By default, string is quoted with single quotes so that it can be easily used in standard CSS values.

• Sass lists are transformed to arrays
• Sass maps are transformed to objects
• Sass colors are transformed to rgba() syntax if they have alpha value, otherwise they are transformed to hex value (and it’s shorther version if possible)
• Sass calculations are transformed to values corresponding to calculation result (string or number)
• Sass strings are transformed to strings
• Sass numbers are transformed to numbers
• Sass booleans are transformed to booleans
• Sass null values and anything unresolved is transformed to null values

data

Type: sass.Value

Data to encode (stringify).

quotes

Type: sass.SassBoolean
Default: sass.sassTrue

Should output string be quoted with single quotes.

json-decode(string)

Returns: sass.Value

Decodes (JSON.parse) string and returns one of available Sass types.

• Arrays are transformed to Sass lists
• Objects are transformed to Sass maps
• Anything properly parsed with parse-color is transformed to Sass color
• Calculations (calc() values) are transformed to Sass calculations for simple operations and to Sass strings for everything else
• Strings are transformed to Sass numbers with units if they can be properly parsed with parse-css-dimension, otherwise they are transformed to Sass strings
• Numbers are transformed to Sass numbers
• Booleans are transformed to Sass booleans
• Null values and anything unresolved is transformed to Sass null values

string

Type: sass.SassString

String to decode (parse).

License

MIT © Ivan Nikolić