Permalink
Browse files

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
  • Loading branch information...
1 parent d2095d2 commit e2ae3b3c0f282a099fc2606b0655b2716cc0721e @dmarchena dmarchena committed with Nov 28, 2016
@@ -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
View
@@ -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"
@@ -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 */
View
@@ -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",
@@ -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);
+}
@@ -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);
+}
@@ -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);
+}
@@ -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);
+}
@@ -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],
View
@@ -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),

0 comments on commit e2ae3b3

Please sign in to comment.