rbalicki2 / gulp-json-sass

Turns json files into files of scss/sass variable definitions.

Gulp-json-sass

Gulp plugin for turning JSON files into files of scss/sass variable definitions.

Issues should be reported on the issue tracker.

This JSON file can also be read by your Javascript. This will make it easier to keep your JS code used for layout and your CSS code in sync.

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; variable names containing illegal characters will have those characters escaped.)

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

Installation

npm install --save gulp-json-sass

Example

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

var jsonSass = require('gulp-json-sass'),
    gulp = require('gulp'),
    concat = require('gulp-concat'),
    sass = require('gulp-ruby-sass');

gulp.task('sass', function() {
  return gulp
    .src(['example.json', 'example.sass'])
    .pipe(jsonSass({
      sass: true
    }))
    .pipe(concat('output.sass'))
    .pipe(sass())
    .pipe(gulp.dest('out/'));
});

API

jsonSass(options)

Returns: stream

options

Type: object

delim

Type: string
Default: -

String used to delimit nested objects. For example, if delim is '-', then

{
  "someObject" : {
    "someKey" : 123
  }
}

will be converted into (in scss mode):

$someObject-someKey: 123;

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

Sass

Type: boolean
Default: false

If truthy, output valid sass variables. If false, output scss variables.

ignoreJsonErrors

Type: boolean
Default: false

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

escapeIllegalCharacters

Type: boolean
Default: true

If true, escapes illegal characters in variable names with a backslash (\). See http://stackoverflow.com/questions/17191265/legal-characters-for-sass-and-scss-variable-names

The following characters are escaped: !"#$%&'()*+,./:;<=>?@[]^{|}~ and white space.

prefixFirstNumericCharacter

Type: boolean
Default: true

If true, top-level keys that begin with a number will be prefixed with options.firstCharacter, but not keys of nested objects. For example,

{
  "1maca" : {
    "2maca" : "asdf"
  },
  "3maca" : "rena"
}

Will result in, in scss mode, with options.firstCharacter and options.delim left as the defaults:

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

firstCharacter

Type: string
Default: _

What string to use to prefix numeric top-level keys.

License

MIT.

gulp-json-sass's Issues

What we pass into gulp.src()

According to the gulp.src() documentation it can accept either a string or an array. The example though in gulp-json-sass isn't really doing either. Would one agree?

.src('example.json', 'example.sass')

This gives me this error: TypeError: Arguments to path.resolve must be strings

Should it not be .src(['example.json', 'example.sass']) ?

When I do this src doesn't error and the gulp task competes. Although my gulp.dest() file is empty (so it didn't work).

Any ideas or discussion?

Thanks!

Type Error: Arguments to path.join must be strings

Getting a Type Error when trying to run the jsonSass task. I'm using Gulp version 3.8.11. Here's my gulpfile.js code and package.json. I'm wondering if the changes to gulp-ruby-sass mentioned in the below Stackoverflow article have something to do with this error. Thanks for your help with this!

http://stackoverflow.com/questions/28140012/gulp-typeerror-arguments-to-path-join-must-be-strings

// package.json

{
"devDependencies": {
"gulp": "~3.8.11",
"gulp-rename": "~1.2.0",
"gulp-ruby-sass": "~0.0.2",
"gulp-concat": "~2.5.2",
"gulp-cache": "~0.2.8",
"gulp-notify": "~2.2.0",
"gulp-minify-css": "~0.5.1",
"gulp-uglify": "~1.1.0",
"gulp-jshint": "~1.9.2",
"gulp-autoprefixer": "~2.1.0"
},
"dependencies": {
"gulp-json-sass": "0.0.2"
}
}

// gulpfile.js

gulp.task('json-sass', function () {
return gulp.src(['themes/tydb/sass/vars/json/colors.json', 'themes/tydb/sass/vars/json-colors.scss'])
.pipe(jsonSass({
sass: false
}))
.pipe(concat('themes/tydb/sass/vars/colors.scss'))
.pipe(sass())
.pipe(gulp.dest('themes/tydb/sass/vars'));
});

// colors.json (This is the json I'm trying to convert to scss.)

{
"primaryColor1": "#eef4f4",
"primaryColor2": "#e2f3f4",
"primaryColor3": "#dfeced",
"primaryColor4": "#a3d3d7",
"primaryColor5": "#cae1e3",
"primaryColor6": "#66bac0",
"primaryColor7": "#2c8db9",
"primaryColor8": "#18919a",
"primaryColor9": "#075b61",
"primaryColor10": "#3b8a8f",
"secondaryColor1": "#eff6f7",
"secondaryColor2": "#d9e8ed",
"secondaryColor3": "#dfeced",
"secondaryColor4": "#deeced",
"secondaryColor5": "#b2d9de",
"secondaryColor6": "#95c0d1",
"secondaryColor7": "#46aacd",
"secondaryColor8": "#2c8db9",
"secondaryColor9": "#31639a",
"tertiaryColor1": "#f7f7f7",
"tertiaryColor2": "#eeeeee",
"tertiaryColor3": "#e0e0e0",
"tertiaryColor4": "#cccccc",
"tertiaryColor5": "#dddddd",
"tertiaryColor6": "#999999",
"tertiaryColor7": "#666666",
"tertiaryColor8": "#333333",
"tertiaryColor9": "#f2f2f2",
"tertiaryColor10": "#aaaaaa",
"tertiaryColor11": "#474747",
"tertiaryColor12": "#efefef",
"tertiaryColor13": "#555555",
"tertiaryColor14": "#e6e6e6",
"tertiaryColor15": "#626262",
"tertiaryColor16": "#a3d3d7",
"tertiaryColor17": "#dfeced",
"negative2": "#d18e8e",
"negative3": "#d15050",
"negative4": "#d04141",
"positive3": "#b4d781",
"positive4": "#9bbe68",
"additionalColor1": "#d6cddd",
"additionalColor2": "#cae1e3",
"additionalColor3": "#b2bfc0",
"additionalColor4": "#f7941d",
"additionalColor5": "#e18719",
"additionalColor6": "#f1d90b",
"colorWhite1": "#ffffff",
"colorBlack": "#000000",
"boxBorder": "#c1e3e5",
"transparentColor": "rgba(0,0,0,0)",
"tableColor": "#e9ecef"
}

Output JSON is missing semicolons after each definition.

This input:

{
    "colors": {
        "main-white": "#FFFFFF",
        "main-blue": "#007eb2",
        "light-blue": "#E3F2FD",
        "light-blue-transparent": "#E3F2FDAD",
        "charcoal-grey": "#607075",
        "main-black": "#102025",
        "light-grey": "#E3F2FD",
        "input-box-grey": "#d7d7d7",
        "input-box-grey-hover": "#747c7f",
        "page-grey": "#e9f1f4"
    }
}

generates this output, which is missing a semicolon at the end of each line:

$colors-main-white: #FFFFFF
$colors-main-blue: #007eb2
$colors-light-blue: #E3F2FD
$colors-light-blue-transparent: #E3F2FDAD
$colors-charcoal-grey: #607075
$colors-main-black: #102025
$colors-light-grey: #E3F2FD
$colors-input-box-grey: #d7d7d7
$colors-input-box-grey-hover: #747c7f
$colors-page-grey: #e9f1f4

way to include quoted text in the output?

Say my JSON is used for other things and I happen to have some formatted text included, that I don't need to use as a style; like:

{
  "someObject":{
    "color": "#FFFFFF",
    "copy": "This is some text. It isn't used as a style."
  }
}

and I do

var jsonSass = require('json-sass');
jsonSass({
   prefix: '$wrapper: ',
});

the converted sass output is

$wrapper: {
  someObject: {
    color: #FFFFFF,
    copy: This is some text. It isn't used as a style.
  }
}

so far so good, except if I include that file in another sass file to consume it as variables it throws errors on compilation on the line for copy:

error reading values after text

so I guess I was wondering is there a way to maintain the quotes?
I tried the escapeIllegalCharacters flag... Any other ideas?

SASS Maps?

I've noticed there is no option to build SASS variable maps?
http://www.sitepoint.com/using-sass-maps/