Format properties and values to lowercase

- Format CSS properties to lowercase
- Format @charset to lowercase
- Instead of just formatting hex colors, format all CSS colors to
lowercase
- Format CSS transforms to lowercase

lib/formatAtRuleParams.js

@@ -30,6 +30,10 @@ function formatAtRuleParams (atrule) {
     params = params.replace(/\s+/g, ' ')
   }
 
+  if (atName === 'charset') {
+    params = params.toLowerCase()
+  }
+
   if (atName === 'return' || atName === 'if' || atName === 'else') {
     // format math operators before `$` or `(`.
     params = params.replace(/(?!^)[+\-*/%](?=\$|\()/g, ' $& ')

lib/formatColors.js

@@ -0,0 +1,22 @@
+var cssColors = require('css-color-list')
+var namedColorsRegex = new RegExp(cssColors().join('|'), 'ig')
+var hslRegex = /hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(,\s*[\d\.]+)?\s*\)/ig
+var hexRegex = /#[a-f0-9]{3}([a-f0-9]{3})?/ig
+var rgbRegex = /rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(,\s*[\d\.]+)?\s*\)/ig
+
+function toLowerCase(value) {
+  return value.toLowerCase()
+}
+
+function colorsToLowerCase(value) {
+  return value.replace(namedColorsRegex, toLowerCase)
+              .replace(hslRegex, toLowerCase)
+              .replace(hexRegex, toLowerCase)
+              .replace(rgbRegex, toLowerCase)
+}
+
+function formatColors(value) {
+  return colorsToLowerCase(value)
+}
+
+module.exports = formatColors

lib/formatDecls.js

@@ -7,6 +7,9 @@ function formatDecls (rule) {
 
   if (hasDecls(rule)) {
     rule.walkDecls(function (decl) {
+      if (decl.prop) {
+        decl.prop = decl.prop.toLowerCase()
+      }
       var more = config.indentWidth
       decl.raws.before = '\n' + getIndent(rule) + more
       decl.raws.between = ': '

lib/formatSassVariables.js

@@ -1,3 +1,6 @@
+var formatTransforms = require('./formatTransforms')
+var formatColors = require('./formatColors')
+
 function formatSassVariables (root) {
   root.walkDecls(function (decl) {
     if (isSassVariable(decl)) {
@@ -15,6 +18,16 @@ function formatSassVariables (root) {
         decl.value = decl.value.trim().replace(/-(?=\d+)/g, ' $& ')
       }
 
+      var isDataUrl = (/data:.+\/(.+);base64,(.*)/).test(decl.value)
+
+      if (!isDataUrl) {
+        // Remove spaces before commas and keep only one space after.
+        decl.value = decl.value.trim().replace(/(\s+)?,(\s)*/g, ', ')
+      }
+
+      decl.value = formatColors(decl.value)
+      decl.value = formatTransforms(decl.value)
+
       decl.raws.before = '\n'
       decl.raws.between = ': '
     }

lib/formatTransforms.js

@@ -0,0 +1,27 @@
+var transformTypes = [
+  'translate',
+  'matrix',
+  'rotate',
+  'scale',
+  'skew'
+]
+var transformRegex = new RegExp('(' + transformTypes.join('|') + ')[xyz]?(3d)?\\(', 'ig')
+var matrixRegex = /matrix\(/ig
+var xyzRegex = /[xyz]{1}(?=\()/g
+
+function transformsToLowerCase(value) {
+  return value.replace(transformRegex, function(value) {
+    if (matrixRegex.test(value)) {
+      return value.toLowerCase()
+    }
+    return value.toLowerCase().replace(xyzRegex, function(value) {
+      return value.toUpperCase()
+    })
+  })
+}
+
+function formatTransforms(value) {
+  return transformsToLowerCase(value)
+}
+
+module.exports = formatTransforms

lib/formatValues.js

@@ -1,4 +1,5 @@
-var isHex = require('./util').isHex
+var formatTransforms = require('./formatTransforms')
+var formatColors = require('./formatColors')
 
 function formatProperties (decl) {
   var isDataUrl = (/data:.+\/(.+);base64,(.*)/).test(decl.value)
@@ -14,9 +15,8 @@ function formatProperties (decl) {
   }
   decl.value = decl.value.trim().replace(/[+\-*/%](?=\$|\()/g, ' $& ')
 
-  if (isHex(decl.value)) {
-    decl.value = decl.value.toLowerCase()
-  }
+  decl.value = formatColors(decl.value)
+  decl.value = formatTransforms(decl.value)
 
   if (decl.important) {
     decl.raws.important = " !important"

lib/util.js

@@ -1,4 +1,3 @@
-var hexRegex = require('hex-color-regex')
 
 function inAtRule (rule) {
   var ret = false
@@ -27,12 +26,5 @@ function getNestedRulesNum (rule) {
   return num
 }
 
-
-function isHex (str) {
-  return hexRegex({exact: true}).test(str)
-}
-
-
 module.exports.inAtRule = inAtRule
 module.exports.getNestedRulesNum = getNestedRulesNum
-module.exports.isHex = isHex

package.json

@@ -24,9 +24,9 @@
   "author": "Masaaki Morishita",
   "license": "MIT",
   "dependencies": {
+    "css-color-list": "0.0.1",
     "editorconfig-indent": "^0.3.0",
     "find-config": "0.3.0",
-    "hex-color-regex": "^1.0.3",
     "minimist": "^1.1.2",
     "postcss": "^5.0.6",
     "postcss-scss": "^0.1.0",

test/fixtures/lowercase.css

@@ -0,0 +1,40 @@
+@charset "UTF-8";
+
+$myVar: TRANSLATEX(0);
+$myVar2: RGB(255,255,255);
+$myVar3: MAROON;
+$myVar4: HSLA(120,100%,50%,0.3);
+$myVar5: RGBA(0,0,0,0.5);
+$myVar6: HSL(120,100%,50%);
+$myVar7: linear-gradient(to right, RGBA(0,0,0,0.5), RGB(255,255,255));
+
+.class-1 {
+  BACKGROUND: HSL(120, 100%, 50%);
+  BACKGROUND: linear-gradient(to right, $myVar2, RGB(255,255,255));
+  COLOR: RGB(0, 0, 0);
+  TRANSFORM: TRANSLATE(0,0) TRANSLATEX(0) TRANSLATEY(0) TRANSLATEZ(0) TRANSLATE3D(0,0,0) MATRIX(1,1,1,1);
+  TRANSFORM: TRANSLATE(0,0);
+  TRANSFORM: TRANSLATEX(0);
+  TRANSFORM: TRANSLATEY(0);
+  TRANSFORM: TRANSLATE3D(0,0,0);
+  TRANSFORM: MATRIX(1,1,1,1);
+  transform: translateY(0) $myVar;
+}
+
+.class-2 {
+  BACKGROUND-COLOR: INDIGO;
+  BACKGROUND: HSLA(120, 100%, 50%, 0.3);
+  COLOR: RGBA(0, 0, 0, 0.5);
+  TRANSFORM: ROTATE(1deg) ROTATEX(1deg) ROTATEY(1deg) ROTATEZ(1deg) ROTATE3D(0,0,1,1deg) SKEW(1deg) SKEWX(1deg) SKEWY(1deg) SCALE(1, 1) SCALEX(1) SCALEY(1);
+  TRANSFORM: ROTATE(1deg);
+  TRANSFORM: ROTATEX(1deg);
+  TRANSFORM: ROTATEY(1deg);
+  TRANSFORM: ROTATEZ(1deg);
+  TRANSFORM: ROTATE3D(0,0,1,1deg);
+  TRANSFORM: SKEW(1deg);
+  TRANSFORM: SKEWX(1deg);
+  TRANSFORM: SKEWY(1deg);
+  TRANSFORM: SCALE(1, 1);
+  TRANSFORM: SCALEX(1);
+  TRANSFORM: SCALEY(1);
+}

test/fixtures/lowercase.out.css

@@ -0,0 +1,39 @@
+@charset "utf-8";
+$myVar: translateX(0);
+$myVar2: rgb(255, 255, 255);
+$myVar3: maroon;
+$myVar4: hsla(120, 100%, 50%, 0.3);
+$myVar5: rgba(0, 0, 0, 0.5);
+$myVar6: hsl(120, 100%, 50%);
+$myVar7: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgb(255, 255, 255));
+
+.class-1 {
+  background: hsl(120, 100%, 50%);
+  background: linear-gradient(to right, $myVar2, rgb(255, 255, 255));
+  color: rgb(0, 0, 0);
+  transform: translate(0, 0) translateX(0) translateY(0) translateZ(0) translate3d(0, 0, 0) matrix(1, 1, 1, 1);
+  transform: translate(0, 0);
+  transform: translateX(0);
+  transform: translateY(0);
+  transform: translate3d(0, 0, 0);
+  transform: matrix(1, 1, 1, 1);
+  transform: translateY(0) $myVar;
+}
+
+.class-2 {
+  background-color: indigo;
+  background: hsla(120, 100%, 50%, 0.3);
+  color: rgba(0, 0, 0, 0.5);
+  transform: rotate(1deg) rotateX(1deg) rotateY(1deg) rotateZ(1deg) rotate3d(0, 0, 1, 1deg) skew(1deg) skewX(1deg) skewY(1deg) scale(1, 1) scaleX(1) scaleY(1);
+  transform: rotate(1deg);
+  transform: rotateX(1deg);
+  transform: rotateY(1deg);
+  transform: rotateZ(1deg);
+  transform: rotate3d(0, 0, 1, 1deg);
+  transform: skew(1deg);
+  transform: skewX(1deg);
+  transform: skewY(1deg);
+  transform: scale(1, 1);
+  transform: scaleX(1);
+  transform: scaleY(1);
+}

test/index.js

@@ -59,3 +59,4 @@ test('sass-if-else-2')
 test('media-indent')
 test('media-indent-with-import')
 test('color-hex-lowercase')
+test('lowercase')