acdlite / json-sass

Transforms a JSON stream into scss syntax Sass.

json-sass

Streamy module that transforms a JSON stream into scss syntax Sass.

json-sass converts JSON objects into Sass maps, which are supported in Ruby Sass 3.3 and libsass 2.0.

npm install json-sass

Why?

So you can share values between your scripts and stylesheets without having to use something like SassyJSON, which doesn't work with libsass.

Examples

Example source file theme.json:

{
  "string": "I am a string",
  "boolean": true,
  "number": 1.23,
  "array": [1, 2, 3],
  "object": {
    "foo": "bar"
  }
  "null": null
}

From the command-line:

$ json-sass -i theme.json -o theme.scss -p "\$theme: "

Output theme.scss:

$theme: (
  string: I am a string,
  boolean: true,
  number: 1.23,
  array: (1, 2, 3),
  object: (
    foo: bar
  ),
  null: null
);

Or you can use the Node API:

var fs = require('fs');
var jsonSass = require('json-sass');

fs.createReadStream('theme.json')
  .pipe(jsonSass({
    prefix: '$theme: ',
  }))
  .pipe(fs.createWriteStream('theme.scss'));

Or with gulp using vinyl-source-stream:

var gulp = require('gulp');
var jsonSass = require('json-sass');
var source = require('vinyl-source-stream');
var rename = require('gulp-rename');

gulp.task('theme', function() {
  return fs.createReadStream('theme.json')
    .pipe(jsonSass({
      prefix: '$theme: ',
    }))
    .pipe(source('theme.json'))
    .pipe(rename('theme.scss'))
    .pipe(gulp.dest('./'));
});

You can also transform normal JavaScript values using the exposed utility function:

jsonSass.convertJs([1, 2, 3]); // (1, 2, 3)

API

jsonSass([opts])

Returns a through stream. Available options:

• prefix: Add some text to the beginning
• suffix: Add some text to the end. Defaults to ';'.

jsonSass.convertJs(jsValue)

Convert a normal JavaScript value to its string representation in Sass. Ignores undefined and functions. Calls .toString() on non-plain object instances.

License

MIT

Andrew Clark

json-sass's Issues

Old version of lodash is being used here that has a vulnerability. Can we please fix

Prototype Pollution
Module: lodash
Published: February 13th 2019
Reported by: asgerf
CWE-471
CVE-2018-16487
Vulnerable: <4.17.11
Patched: >=4.17.11
Exploitability: 3
Overview
Versions of lodash before 4.17.5 are vulnerable to prototype pollution.

The vulnerable functions are 'defaultsDeep', 'merge', and 'mergeWith' which allow a malicious user to modify the prototype of Object via {constructor: {prototype: {...}}} causing the addition or modification of an existing property that will exist on all objects.

Findings
json-sass>lodash
Remediation
Update to version 4.17.11 or later.

References

npm WARN package.json [email protected] No repository field.

When installing this package via npm, I get the following warning:

npm WARN package.json [email protected] No repository field.

Documentation: https://docs.npmjs.com/files/package.json#repository

compass integration ?

is possible use with compass ?

Object.assign is undefined in jsonSass.js

I'm using iojs v1.7.1. When running make watch on flummox docs, something fails in es6 compilation

=> make watch
mkdir -p sass/dependencies/ && node_modules/.bin/json-sass -i lib/shared/theme.js \
    | sed '1s/^/$theme: /' \
    > sass/dependencies/_theme.scss
/Users/tom/Code/Sandbox/flummox/docs/node_modules/json-sass/lib/jsonSass.js:14
  var options = Object.assign({}, DEFAULTS, options);
                       ^
TypeError: undefined is not a function

I can be worked around by removing Object.assing from jsonSass.js:14, for example using this code

  // var options = Object.assign({}, DEFAULTS, options);
  var options = JSON.parse(JSON.stringify(options));
  options.prefix = options.prefix || "";
  options.suffix = options.suffix || ";";

Not sure in which part of flummox I should report this, I'm just starting. So I put it here. Sorry for my laziness, it might be my environment problem as well.

jsonSass.convertJs() is undefined v1.3.5

I'm pretty new to nodeJS so please excuse any misunderstanding on how this should be used.

I'm including via var jsonSass = require( 'json-sass' ); in my JS file.

When i'm using the jsonSass.convertJs( [1,2,3] ) function I get the following console error:
'Fatal error: undefined is not a function'

I've worked around this locally by changing jsonSass.js file:

from:
exports.convertJs = jsToSassString;

to:
module.exports.convertJs = jsToSassString;

This resolves the issue, but clearly my local fix will be overwritten when building the project from scratch so this is far from ideal.

I'm not sure if this is a bug with v 1.3.5 or if my understanding of the usage is incorrect.

Any help would be greatly received.

EDIT: I've just downgraded to 1.2.1 and this has resolved the issue for me.

Quote the keys of the sass map variables

Due to the way sass works if you don't quote the maps you can have issues with map keys being other object types such as a color. e.g values like "red" getting converted into #f00 etc. This can be avoided by quoting the key.

Current Output:

$theme: (
  Primary: (
    Ocean Blue: (
      model: RGB,
      type: 2,
      rgb: (57, 84, 216),
      code: 3954d8
    ),
    Tree Green: (
      model: RGB,
      type: 2,
      rgb: (154, 188, 47),
      code: 9abc2f
    )
  )
);

Suggested Output

$theme: (
  "Primary": (
    "Ocean Blue": (
      "model": RGB,
      "type": 2,
      "rgb": (57, 84, 216),
      "code": 3954d8
    ),
    "Tree Green": (
      "model": RGB,
      "type": 2,
      "rgb": (154, 188, 47),
      "code": 9abc2f
    )
  )
);

Quote all string values in the sass output

If you have strings are have parens or other interesting characters, it'll break the sass compilation.

Empty JSON value

I am not sure if this project is still being maintained?

Would you consider seeking a maintainer?

Anyway back to the problem at hand sending through an empty value the SCSS map is returning a none quoted SCSS map value. Which then breaks SCSS the compiler.

For example I am sending through:

{ "some-key" : { "value" : "" } }

The SCSS Map is being output as:

( some-key : ( value: ) )

Ideally this would be output as:

( some-key : ( value: "" ) )