Added: new rgb() & hsl() functional notation (via postcss-color-rgb & postcss-color-hsl) (#330)

* Added: postcss-color-rgb & postcss-color-hsl for transpiling functional notation

* Fix: CI error: Cannot find module postcss-value-parse

Closes #300

Author: dmarchena

docs/content/features.md

@@ -442,6 +442,47 @@ Allows you to use case insensitive attributes.
 |
 [Plugin documentation](https://github.com/Semigradsky/postcss-attribute-case-insensitive)
 
+## `rgb()` function (functional-notation)
+
+Allows you to use its new syntax consisting of space-separated arguments and
+an optional slash-separated opacity. 
+
+You can also use number for color channels.
+
+The alpha value accepts percentage as well as number and has been added to
+`rgb()` as optional argument. As a result, `rgb()` and `rgba()` are now
+aliases of each other.
+
+```css
+div {
+  background-color: rgb(100 222.2 100.9 / 30%);
+}
+```
+
+[Specification](https://drafts.csswg.org/css-color/#rgb-functions)
+|
+[Plugin documentation](https://github.com/dmarchena/postcss-color-rgb)
+
+## `hsl()` function (functional-notation)
+
+Allows you to use its new syntax consisting of space-separated arguments and
+an optional slash-separated opacity. 
+
+`hsl()` now accepts angles (`deg`, `grad`, `rad`, `turn`) as well as numbers for
+hues and an optional percentage or number for alpha value. So, `hsl()` and
+`hsla()` are now aliases of each other too.
+
+```css
+div {
+  color: hsl(90deg 90% 70%);
+  background-color: hsl(300grad 25% 15% / 70%);
+}
+```
+
+[Specification](https://drafts.csswg.org/css-color/#the-hsl-notation)
+|
+[Plugin documentation](https://github.com/dmarchena/postcss-color-hsl)
+
 ## @todo
 
 Any omissions of the CSS specifications (even in draft) that are subject to be

docs/content/index.md

@@ -139,6 +139,18 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
       <li class="r-Grid-cell r-minS--1of2">
         <a href="/features/#attribute-case-insensitive">attribute case insensitive</a>
       </li>
+      <li class="r-Grid-cell r-minS--1of2">
+        <a href="/features/#rgb-function-functional-notation"><code>rgb()</code> function</a>
+        <small class="cssnext-FeaturesList-small">
+          (functional-notation)
+        </small>
+      </li>
+      <li class="r-Grid-cell r-minS--1of2">
+        <a href="/features/#hsl-function-functional-notation"><code>hsl()</code> function</a>
+        <small class="cssnext-FeaturesList-small">
+          (functional-notation)
+        </small>
+      </li>
     </ul>
     <small
       class="cssnext-FeaturesList-small"

docs/content/playground.html

@@ -57,6 +57,7 @@
 }
 a:hover { color: gray(255, 50%) }
 a:active { color: rebeccapurple }
+a:focus { background-color: rgb(255 153 0 / 33%); outline: 3px solid hsl(1turn 60% 50%); }
 a:any-link { color: color(var(--highlightColor) blackness(+20%)) }
 
 /* font stuff */

package.json

@@ -33,8 +33,10 @@
     "postcss-color-function": "^2.0.0",
     "postcss-color-gray": "^3.0.0",
     "postcss-color-hex-alpha": "^2.0.0",
+    "postcss-color-hsl": "^1.0.5",
     "postcss-color-hwb": "^2.0.0",
     "postcss-color-rebeccapurple": "^2.0.0",
+    "postcss-color-rgb": "^1.1.4",
     "postcss-color-rgba-fallback": "^2.0.0",
     "postcss-custom-media": "^5.0.0",
     "postcss-custom-properties": "^5.0.0",

src/__tests__/fixtures/features/color-hsl.css

@@ -0,0 +1,5 @@
+.foo {
+	color: hsl(.25turn 90% 70%);
+	background-color: hsl(300grad 25% 15% / 70%);
+	border: 1px solid hsl(0 5% 10% / .6);
+}

src/__tests__/fixtures/features/color-hsl.expected.css

@@ -0,0 +1,5 @@
+.foo {
+	color: hsl(90, 90%, 70%);
+	background-color: hsla(270, 25%, 15%, .7);
+	border: 1px solid hsla(0, 5%, 10%, .6);
+}

src/__tests__/fixtures/features/color-rgb.css

@@ -0,0 +1,5 @@
+.foo {
+	color: rgb(255 200 205);
+	background-color: rgb(100 222.2 100.9 / 30%);
+	border: 1px solid rgb(0% 5% 10% / .7);
+}

src/__tests__/fixtures/features/color-rgb.expected.css

@@ -0,0 +1,5 @@
+.foo {
+	color: rgb(255, 200, 205);
+	background-color: rgba(100, 222, 101, .3);
+	border: 1px solid rgba(0%, 5%, 10%, .7);
+}

src/features-activation-map.js

@@ -12,7 +12,9 @@ export default {
   // mediaQueriesRange: [ null ],
   // customSelectors: [ null ],
   // colorRebeccapurple: [ null ], // @todo can be done easily
+  // colorHsl: [ null ],
   // colorHwb: [ null ],
+  // colorRgb: [ null ],
   // colorGray: [ null ],
   // colorHexAlpha: [ null ],
   // colorFunction:[ null],

src/features.js

@@ -36,6 +36,12 @@ export default {
   // https://npmjs.com/package/postcss-color-hwb
   colorHwb: (options) => require("postcss-color-hwb")(options),
 
+  // https://npmjs.com/package/postcss-color-hsl
+  colorHsl: (options) => require("postcss-color-hsl")(options),
+
+  // https://npmjs.com/package/postcss-color-rgb
+  colorRgb: (options) => require("postcss-color-rgb")(options),
+
   // https://npmjs.com/package/postcss-color-gray
   colorGray: (options) => require("postcss-color-gray")(options),