Support other value types + unquote colors and CSS lengths

[VitorLuizC]

• Inject booleans, numbers, null values as literals.
  Parsing

  {
    lineHeight: 1.5,
    theme: null,
    responsive: false
  }

  Inject into SASS

  $lineHeight: 1.5;
  $theme: null;
  $responsive: false

• Inject Array as SASS-List.
  Parsing

  {
    colors: ['red', 'green', 'blue']
  }

  Inject into SASS

  $colors: (red, green, blue);

• Inject Object as SASS-Map
  Parsing

  {
    font: { family: 'sans-serif', size: '1.6em', color: 'rgb(50, 50, 50)' }
  }

  Inject into SASS

  $font: ('family': 'sans-serif', size: 1.6em, color: rgb(50, 50, 50));

• Inject color and length values without quotes
  Parsing

  {
    theme: 'rgb(128, 0, 128)',
    maxSize: '1250px'
  }

  Inject into SASS

  $theme: rgb(128, 0, 128);
  $maxSize: 1250px;

[thaerlabs]

+1 to merge this

[VitorLuizC]

I've maded a module to parse to sass values and there's a way to use it with gulp.

const gulp = require('gulp');
const parse = require('parse-sass-value');
const header = require('gulp-header');
const vars = object => header(
  Object
    .keys(object)
    .map(key => `$${key}: ${parse(object[key])};`)
    .join('\n')
);

gulp.task('build', () => {
  gulp.src('./index.scss')
    .pipe(vars({ theme: 'flat-green' }))
    .pipe(gulp.dest('./'));
});

[pmrotule]

In the usage example, it shows that the plugin can pass integers but it doesn't. It throws this error value.match is not a function since match() won't work with numbers:

Object.keys(vars).map((key) => {
  let value = vars[key];
  if ( !value.match(regexp) ) value = `"${value}"`; //<-- ERROR
  sassVars.push(`$${key}: ${value};`);
});

+1 to merge this

[giowe]

Tnx! sorry for the delay but I'm currently working on other projects and I missed it!