Gulp-json-css

Gulp plugin for turning JSON files into files of scss/sass/less variable definitions. This plugin is based on https://www.npmjs.com/package/gulp-json-sass

Now you can share configurations between your CSS files and Javascript!

Supports all JSON objects, including nested objects, arrays and keys which are not legal key names. Variable names that begin with a number will be prefixed and such containing illegal characters will have those characters removed.

Ignores (passes through) files with a extensions other than .json.

Installation

1npm install gulp-json-sass-vars --save-dev

Example

In this example gulpfile, a JSON file is turned into a file of scss variables, concatenated with a scss file, and compiled using gulp-sass.

1var jsonSass = require('gulp-json-sass-vars'),
2    gulp = require('gulp'),
3    concat = require('gulp-concat'),
4    sass = require('gulp-sass');
5
6gulp.task('scss', function() {
7  return gulp
8    .src(['example.json', 'example.scss'])
9    .pipe(jsonSass())
10    .pipe(concat('output.scss'))
11    .pipe(sass())
12    .pipe(gulp.dest('out/'));
13});

API

jsonCss(options)

Returns: stream

options

Type: object

targetPre

Type: string (scss|sass|less)
Default: scss

Defines the target preprocessor for which JSON files should be converted.

delim

Type: string
Default: -

Delimiter used to chain nested objects keys to a simple variables. For example, if delim is '-', then

1{
2  "someObject" : {
3    "someKey" : 123
4  }
5}

will be converted into (in SCSS):

1$someObject-someKey: 123;
2$someObject: (someKey 123);

Note that keys themselves can contain the delimiter. No attempt is made to ensure that variable names are unique.

Note that you can only build simple lists in LessCSS.

Since LessCSS does not allow for nested objects or objects in general for that matter, we can only convert arrays to lists, so for objects we go back to chaining keys to simple variables.

numberPrefix

Type: string
Default: _

What string is used to prefix numeric keys, it is necessary since variables aren't allowed to start with a number. This means that the following object:

1{
2  "1maca" : {
3    "2maca" : "asdf"
4  },
5  "3maca" : "rena"
6}

Will result in (SCSS):

1$_1maca-2maca: asdf;
2$_3maca: rena;

Note that chained sub keys won't be prefixed since it's not necessary anymore, if you use the keepObjects setting though, every key starting with a number will be prefixed.

1$_1maca: (_2maca asdf);
2$_3maca: rena;

ignoreJsonErrors

• Type: boolean
• Default: false

If true, malformed JSON does not result in the plugin emitting an error.

License

MIT.