Improve sass strings

package.json

@@ -20,6 +20,7 @@
     "prepublish": "npm run compile"
   },
   "dependencies": {
+    "is-color": "^0.2.0",
     "is-there": "^4.0.0",
     "lodash": "^3.10.1",
     "node-sass": "^3.0.0"

src/index.js

@@ -2,6 +2,7 @@ import _          from 'lodash';
 import {resolve}  from 'path';
 import isThere    from 'is-there';
 import sass       from 'node-sass';
+import isColor    from 'is-color';
 
 export default function(url, prev) {
   if (!/\.(json|js)$/.test(url)) {
@@ -40,6 +41,10 @@ export default function(url, prev) {
   };
 }
 
+function isCSSUnit(value) {
+  return /^\d*\.*\d+(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)$/.test(value);
+}
+
 function parseJSON(json) {
   return Object.keys(json)
     .map(key => `$${key}: ${parseValue(json[key])};`)
@@ -52,7 +57,7 @@ function parseValue(value) {
   } else if (_.isPlainObject(value)) {
     return parseMap(value);
   } else {
-    return value;
+    return parseEndValue(value);
   }
 }
 
@@ -67,3 +72,11 @@ function parseMap(map) {
     .map(key => `${key}: ${parseValue(map[key])}`)
     .join(',')})`;
 }
+
+function parseEndValue(value) {
+  if (typeof value === 'string' && !isColor(value) && !isCSSUnit(value)) {
+    return JSON.stringify(value);
+  }
+
+  return value;
+}

test/fixtures/convert-strings/style-js.scss

@@ -0,0 +1,7 @@
+@import 'variables.js';
+
+body {
+  content: $string;
+  color: $hex-color, $hsl-color, $rgba-color, $rgb-color, $css-color;
+  font-size: $em-unit;
+}

test/fixtures/convert-strings/style.scss

@@ -0,0 +1,7 @@
+@import 'variables.json';
+
+body {
+  content: $string;
+  color: $hex-color, $hsl-color, $rgba-color, $rgb-color, $css-color;
+  font-size: $em-unit;
+}

test/fixtures/convert-strings/variables.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "hex-color": "#c33",
+  "hsl-color": "hsl(100, 100%, 100%)",
+  "rgba-color": "rgba(0, 0, 0, 1)",
+  "rgb-color": "rgb(10, 0, 0)",
+  "css-color": "blue",
+  "px-unit": "10px",
+  "em-unit": "2.3em",
+  "string": "Lorem ipsum, (\"foo\", bar)"
+}

test/fixtures/convert-strings/variables.json

@@ -0,0 +1,10 @@
+{
+  "hex-color": "#c33",
+  "hsl-color": "hsl(100, 100%, 100%)",
+  "rgba-color": "rgba(0, 0, 0, 1)",
+  "rgb-color": "rgb(10, 0, 0)",
+  "css-color": "blue",
+  "px-unit": "10px",
+  "em-unit": "2.3em",
+  "string": "Lorem ipsum, (\"foo\", bar)"
+}

test/index.js

@@ -57,6 +57,14 @@ describe('Import type test', function() {
     })).forEach(testExpectedCSS);
   });
 
+  it('converts JS/JSON strings to Sass strings', function() {
+    ['./test/fixtures/convert-strings/style-js.scss',
+      './test/fixtures/convert-strings/style.scss'
+    ].map(sassRenderFile()).forEach(function(result) {
+      expect(result.css.toString()).to.eql(`body {\n  content: 'Lorem ipsum, ("foo", bar)';\n  color: #c33, white, black, #0a0000, blue;\n  font-size: 2.3em; }\n`);
+    });
+  });
+
   it(`JS imports do not export non valid JSON values`, function() {
     function render() {
       sass.renderSync({