Adding support for hex colors

README.md

@@ -1,7 +1,7 @@
 ## What is this
 Add Sass variables to gulp stream, so that you can use for example environment variables in your Sass build process.
 
-Supports strings, numbers and booleans.
+Supports strings, numbers, booleans, and hex colors.
 
 ## Installation
 
@@ -39,3 +39,18 @@ $path: '/dev/path/' !default;
   $path: '/prod/path';
 }
 ```
+
+## Options
+### allowHexColors 
+(bool) - when true, will print hex colors as colors instead of strings
+```javascript
+gulp.src('./src/scss/master.scss')
+  .pipe(sassVariables({
+    $color-primary: '#800080'
+  }, { allowHexColors: true }))
+```
+```scss
+body {
+  color: $color-primary;
+}
+```

index.js

@@ -5,17 +5,47 @@ const PLUGIN_NAME = 'gulp-sass-variables';
 const PluginError = require('plugin-error');
 const through = require('through2');
 
+let globalOptions = {
+  allowHexColors: false
+};
+
 const getVariablesBuffer = function(sassVariables, file) {
   let str = '';
 
   for(let variable in sassVariables) {
-    str += variable + ': ' + JSON.stringify(sassVariables[variable]) + ';\n';
+    str += variable + ': ' + printVariable(sassVariables[variable]) + ';\n';
   }
 
   return new Buffer(str, file);
 }
 
-module.exports = function(sassVariables) {
+const printVariable = function(variable) {
+  if (globalOptions.allowHexColors && isHexColor(variable)) {
+    return variable;
+  } else {
+    return JSON.stringify(variable);
+  }
+}
+
+const isHexColor = function(variable) {
+  return (
+    typeof variable === 'string' &&
+    (variable.length === 7 || variable.length === 4) &&
+    variable[0] === '#'
+  );
+}
+
+const parseOptions = function(options) {
+  if (options.hasOwnProperty('allowHexColors')) {
+    globalOptions.allowHexColors = options.allowHexColors;
+  }
+}
+
+module.exports = function(sassVariables, options) {
+
+  if (typeof options !== 'undefined') {
+    parseOptions(options);
+  }
 
   return through.obj(function (file, encoding, cb) {
 

test/expected/color-test.scss

@@ -0,0 +1,2 @@
+$LONGCOLOR: #800080;
+$SHORTCOLOR: #f0f;

test/main.js

@@ -118,6 +118,29 @@ describe('gulp-sass-variables', function() {
     stream.write(sassFile);
   });
 
+  it('should work with hex colors when allowHexColors is true', function (done) {
+    let stream = sassVariables({
+      $LONGCOLOR: '#800080',
+      $SHORTCOLOR: '#f0f'
+    }, { allowHexColors: true });
+
+    let sassFile = createVinyl('color-test.scss');
+
+    stream.on('data', function(file) {
+      should.exist(file);
+      should.exist(file.path);
+      should.exist(file.relative);
+      should.exist(file.contents);
+      should.equal(path.basename(file.path), 'color-test.scss');
+      String(file.contents).should.equal(
+        fs.readFileSync(path.join(__dirname, 'expected/color-test.scss'), 'utf8')
+      );
+      done();
+    });
+
+    stream.write(sassFile);
+  });
+
   it('should work with gulp-sass', function (done) {
     let streamDoneCount = 0;