First release

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{json,yml}]
+indent_size = 2

.gitignore

@@ -0,0 +1,76 @@
+dist
+src/__tests__/fixtures/*.actual.css
+
+# Created by https://www.gitignore.io/api/macos,node
+
+### macOS ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history

.npmignore

@@ -0,0 +1,8 @@
+.gitignore
+.editorconfig
+
+node_modules/
+npm-debug.log
+
+test.js
+.travis.yml

.travis.yml

@@ -0,0 +1,12 @@
+sudo: false
+language: node_js
+node_js:
+  - '6'
+  - '4'
+cache:
+  directories:
+    - node_modules
+before_install:
+- npm prune
+- npm update
+after_success: npm run coveralls

CHANGELOG.md

@@ -0,0 +1,3 @@
+# 1.0.0 - 2016-11-13
+
+✨ First release

README.md

@@ -0,0 +1,53 @@
+# PostCSS Color Hsl [![Build Status][ci-img]][ci] [![Coverage Status][cov-img]][cov]
+
+[PostCSS] plugin to transform [W3C CSS Color Module Level 4 hsl()](https://drafts.csswg.org/css-color/#the-hsl-notation) new syntax to more compatible CSS (comma-separated hsl() or hsla()).
+
+[PostCSS]: https://github.com/postcss/postcss
+[ci-img]:  https://travis-ci.org/dmarchena/postcss-color-hsl.svg
+[ci]:      https://travis-ci.org/dmarchena/postcss-color-hsl
+[cov-img]: https://coveralls.io/repos/github/dmarchena/postcss-color-hsl/badge.svg
+[cov]:     https://coveralls.io/github/dmarchena/postcss-color-hsl
+
+## CSS Colors 4 syntax
+
+```
+hsl() = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? )
+<hue> = <number> | <angle>
+<alpha-value> = <number> | <percentage>
+```
+
+## CSS Colors 3 syntax (actual)
+
+```
+hsl()  = hsl( <hue>, <percentage>, <percentage> )
+hsla() = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
+
+<hue> = <number> | <angle>
+<alpha-value> = <number>
+```
+
+## Example
+
+```css
+.foo {
+  /* Input example */
+  color: hsl(0 100% 50%);
+  border-color: hsl(120deg 100% 75% / 70%);
+}
+```
+
+```css
+.foo {
+  /* Output example */
+  color: hsl(0, 100%, 50%);
+  border-color: hsla(120deg, 100%, 75%, .7);
+}
+```
+
+## Usage
+
+```js
+postcss([ require('postcss-color-hsl') ])
+```
+
+See [PostCSS] docs for examples for your environment.

package.json

@@ -0,0 +1,72 @@
+{
+  "name": "postcss-color-hsl",
+  "version": "1.0.0",
+  "description": "PostCSS plugin to transform W3C CSS Color Module Level 4 hsl() new syntax to more compatible CSS (comma-separated hsl() or hsla())",
+  "keywords": [
+    "postcss",
+    "css",
+    "postcss-plugin",
+    "color",
+    "hsl",
+    "hsla"
+  ],
+  "author": "David Marchena",
+  "license": "MIT",
+  "repository": "dmarchena/postcss-color-hsl",
+  "bugs": {
+    "url": "https://github.com/dmarchena/postcss-color-hsl/issues"
+  },
+  "homepage": "https://github.com/dmarchena/postcss-color-hsl",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "postcss": "^5.2.0"
+  },
+  "devDependencies": {
+    "ava": "^0.16.0",
+    "babel-cli": "^6.14.0",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-register": "^6.14.0",
+    "coveralls": "^2.11.13",
+    "eslint": "^3.4.0",
+    "eslint-config-postcss": "^2.0.2",
+    "npm-run-all": "^3.1.0",
+    "nyc": "^8.3.0",
+    "postcss-value-parser": "^3.3.0",
+    "rimraf": "^2.5.4"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "coveralls": "nyc report --reporter=text-lcov | coveralls",
+    "lint": "eslint src/**/*.js",
+    "pretest": "npm run lint",
+    "test:ava": "ava",
+    "test": "nyc npm run test:ava",
+    "prebuild": "npm-run-all clean lint",
+    "build": "babel src --out-dir dist"
+  },
+  "babel": {
+    "presets": [
+      "es2015"
+    ],
+    "plugins": [
+      "add-module-exports"
+    ]
+  },
+  "ava": {
+    "files": [
+      "src/__tests__/*.js",
+      "!**/postcss-test.js"
+    ],
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  },
+  "eslintConfig": {
+    "extends": "eslint-config-postcss/es5"
+  }
+}

src/__tests__/fixtures.js

@@ -0,0 +1,34 @@
+import fs       from 'fs';
+import postcss  from 'postcss';
+import plugin   from '../';
+import test     from 'ava';
+
+function fixturePath(name) {
+    return `fixtures/${name}.css`;
+}
+
+function readFixture(name) {
+    return fs.readFileSync(fixturePath(name), 'utf8');
+}
+
+function testFixture(t, name, pluginOpts = {}, postcssOpts = {}) {
+    postcssOpts.from = fixturePath(name);
+    const expected = readFixture(`${name}.expected`);
+    return postcss([plugin(pluginOpts)]).process(readFixture(name), postcssOpts)
+        .then(result => {
+            t.deepEqual(result.css, expected);
+            t.deepEqual(result.warnings().length, 0);
+        });
+}
+
+test('Transforms hsl()', t => {
+    return testFixture(t, 'hsl');
+});
+
+test('Transforms hsl() using new comma-separated syntax', t => {
+    return testFixture(t, 'alternative-syntax');
+});
+
+test('Actual hsl() is not affected', t => {
+    return testFixture(t, 'actual-syntax');
+});

src/__tests__/fixtures/actual-syntax.css

@@ -0,0 +1,4 @@
+.foo { 
+	color: hsl(120, 40%, 40%);
+	background-color: hsla(90deg,100%,90%,.1);
+}

src/__tests__/fixtures/actual-syntax.expected.css

@@ -0,0 +1,4 @@
+.foo { 
+	color: hsl(120, 40%, 40%);
+	background-color: hsla(90deg, 100%, 90%, .1);
+}

src/__tests__/fixtures/alternative-syntax.css

@@ -0,0 +1,5 @@
+.foo { 
+	color: hsl(140deg, 10%, 0);
+	background-color: hsl(.1rad, 50%, 50%, .1);
+	border: 1px solid hsl(1turn, 10%, 11%, 30%);
+}

src/__tests__/fixtures/alternative-syntax.expected.css

@@ -0,0 +1,5 @@
+.foo { 
+	color: hsl(140deg, 10%, 0);
+	background-color: hsla(.1rad, 50%, 50%, .1);
+	border: 1px solid hsla(1turn, 10%, 11%, .3);
+}

src/__tests__/fixtures/hsl.css

@@ -0,0 +1,5 @@
+.foo { 
+	color: hsl(0 100% 50%);
+	background-color: hsl(200grad 100% 50% / 0.2);
+	border-color: hsl(120deg 100% 75% / 70%);
+}

src/__tests__/fixtures/hsl.expected.css

@@ -0,0 +1,5 @@
+.foo { 
+	color: hsl(0, 100%, 50%);
+	background-color: hsla(200grad, 100%, 50%, .2);
+	border-color: hsla(120deg, 100%, 75%, .7);
+}

src/index.js

@@ -0,0 +1,28 @@
+import postcss from 'postcss';
+import parser from 'postcss-value-parser';
+import functionalNotation from './lib/hsl-functional-notation';
+
+function transformHsl(value) {
+    return parser(value).walk(node => {
+        /* istanbul ignore if */
+        if (node.type !== 'function' || (node.value !== 'hsl' && node.value !== 'hsla')) {
+            return;
+        }
+        node.value = functionalNotation.legacy(parser.stringify(node));
+        node.type = 'word';
+    }).toString();
+}
+
+module.exports = postcss.plugin('postcss-color-hsl', function (opts) {
+    opts = opts || {};
+
+    return function (root, result) {
+        root.walkDecls(decl => {
+            /* istanbul ignore if */
+            if (!decl.value || (decl.value.indexOf('hsl(') === -1 && decl.value.indexOf('hsla(') === -1)) {
+                return;
+            }
+            decl.value = transformHsl(decl.value);
+        });
+    };
+});

src/lib/hsl-functional-notation.js

@@ -0,0 +1,46 @@
+
+function legacyAlpha(alpha) {
+    if (alpha.indexOf('%') > -1) {
+        alpha = `${alpha.slice(0, -1) / 100}`;
+    }
+    return alpha.replace(/^0\./, '.');
+}
+
+function getColorData(colorFn) {
+    const hslSyntaxPlusAltRegex = /(hsl)a?\s*\((\d*\.?\d+(?:deg|grad|rad|turn)?)(?:\s+|(?:\s*,\s*))(\d*\.?\d+\%)(?:\s+|(?:\s*,\s*))(\d*\.?\d+\%)(?:\s*(?:\/|,)\s*(\d*\.?\d+\%?))?\)/g; // eslint-disable-line max-len
+    const match = hslSyntaxPlusAltRegex.exec(colorFn);
+    console.dir(match);
+    if (match === null) return false;
+    return {
+        fn: match[1],
+        h: match[2],
+        s: match[3],
+        l: match[4],
+        alpha: match[5] ? legacyAlpha(match[5]) : false
+    };
+}
+
+function legacy(colorFn) {
+    const colorData = getColorData(colorFn);
+
+    if (!colorData) return colorFn;
+
+    let result = null;
+    if (colorData.alpha === false) {
+        result =
+            colorData.fn + '(' +
+                colorData.h + ', ' +
+                colorData.s + ', ' +
+                colorData.l + ')';
+    } else {
+        result =
+            colorData.fn + 'a(' +
+                colorData.h + ', ' +
+                colorData.s + ', ' +
+                colorData.l + ', ' +
+                colorData.alpha + ')';
+    }
+    return result;
+}
+
+export default { legacy };