gulp-less-json-import

This is a gulp preprocessor for the less compilation. It provides a directive @json-import to import variables defined in a json file.

It inject the Less formated data in place of the directive in the file buffer without writing it on disk.

Usage

In less

@json-import "../relative/path.json";
@json-import "../relative/path/extOmit";

In gulp

var gulp = require('gulp');
var less = require('gulp-less');
var lessJsonImport = require('gulp-less-json-import');

gulp.src(['./less/**/*.less', '!./less/**/_*.less'])
    .pipe(lessJsonImport({
         nameFormatter: function(varPath, jsonPath) { // Optional
             var filename = path.parse(jsonPath).name;
             if (filename === 'colors') varPath[0] = 'color' + varPath[0];
             if (filename === 'icons') varPath[0] = 'icon' + varPath[0];
             return varPath;
         }
     }))
    .pipe(less())
    .pipe(gulp.dest('./css'));

Options

You can passe an option object to the lessJsonImport function.

• {Function} nameFormatter Override the variable name formatter. Take the path of the variable as String[] and the path of the json file as String. It may return the variable name as String. By default the formatter do varPath.join('-').

Example

data.json

{
  "color1": "#ff0000",
  "color2": "#00ff00",
  "font": "Helvetica",
  "border": {
    "type": "solid",
    "size": "1px",
    "color": "grey"
  }
}

style.less

@json-import "data.json";

body{
  color: @color1;
  background: @color2;
  font-family: @font;
}

table{
  td{
    border: @border-type @border-size @border-color
  }
}

generated style.css

body {
  color: #ff0000;
  background: #00ff00;
  font-family: Helvetica;
}
table td {
  border: solid 1px grey;
}