.travis.yml

@@ -2,10 +2,9 @@ sudo: false
 
 language: node_js
 node_js:
-  - '6'
-  - '5'
-  - '4'
-  - '0.12'
+  - 8
+  - 6
+  - 4
 
 script:
   - npm run test

CHANGELOG.md

@@ -1,3 +1,60 @@
+# 3.0.0 - 2017-07-05
+
+## Removed: support for node 0.12
+
+Node 4+ is supported.
+
+## Changed: upgrade to PostCSS 6
+
+All postcss plugins dependencies have been updated to latest version to ensure
+full PostCSS 6 compatibility.
+
+Some breaking (minor) changes:
+
+- image-set polyfill change 2x from 144dpi to 192dpi
+- whitespace changes for image-set polyfill output
+- rebeccapurpule is now an hexa number
+- custom-selector does not output useless (empty) blocks with a selector with no rules associated
+
+You can expect some other since all postcss plugins used have been updated to
+latest versions.
+If you have unexpected regression, please check corresponding plugins changelog before opening an issue.
+
+## Added: warning is emitted is you use custom property sets and `@apply`
+
+This feature won't be included in next the major release of postcss-cssnext.
+
+This most likely won't get any more support from browser vendors as the
+spec is yet considered deprecated and alternative solutions are being
+discussed.
+Read more about the reason here https://github.com/pascalduez/postcss-apply
+
+# 2.11.0 - 2017-05-15
+
+- Added: `image-set()` support
+  (via [postcss-image-set-polyfill](https://github.com/SuperOl3g/postcss-image-set-polyfill))
+  ([#373](https://github.com/MoOx/postcss-cssnext/pull/373) - @SuperOl3g)
+- Added: new auto-deactivation rule in features map
+  ([#369](https://github.com/MoOx/postcss-cssnext/pull/369) - @Semigradsky)
+
+# 2.10.0 - 2017-03-16
+
+- Added: ``system-ui`` keyword to define current System font-size
+  (via [postcss-font-family-system-ui](https://github.com/JLHwung/postcss-font-family-system-ui))
+  ([#342](https://github.com/MoOx/postcss-cssnext/pull/342) - @JLHwung)
+- Added: new auto-deactivation rules in features map
+  ([#345](https://github.com/MoOx/postcss-cssnext/pull/345) - @Semigradsky)
+
+# 2.9.0 - 2016-11-28
+
+- Added: new rgb() & hsl() functional notation
+(via
+  [postcss-color-rgb](https://github.com/dmarchena/postcss-color-rgb) &
+  [postcss-color-hsl](https://github.com/dmarchena/postcss-color-hsl)
+)
+([#330](https://github.com/MoOx/postcss-cssnext/pull/330) - @dmarchena)
+
+
 # 2.8.0 - 2016-09-05
 
 -  Added: attribute case insensitive support

CONTRIBUTING.md

@@ -29,7 +29,6 @@ module directly in console._
 ### Add a feature
 
 1. Add test files (input + expected output) in [`src/__tests__/fixtures/features`](src/__tests__/features)
-- If the feature can affect some others, update [`src/__tests__/fixtures/cases/example.css`](src/__tests__/cases/example.css) to test integration with other features
 
 - Choose a pretty simple and clear name (that match the specs), if you are not sure, ask using an issue.
 - Add the feature in :

appveyor.yml

@@ -2,10 +2,9 @@
 
 environment:
   matrix:
+    - nodejs_version: 8
     - nodejs_version: 6
-    - nodejs_version: 5
     - nodejs_version: 4
-    - nodejs_version: 0.12
 
 version: "{build}"
 build: off

docs/content/features.md

@@ -96,7 +96,7 @@ A nice way to have semantic media queries
 }
 ```
 
-[Specification](http://dev.w3.org/csswg/mediaqueries/#custom-mq)
+[Specification](https://drafts.csswg.org/mediaqueries-5/#custom-mq)
 |
 [Plugin documentation](https://github.com/postcss/postcss-custom-media)
 
@@ -173,6 +173,23 @@ a {
 |
 [Plugin documentation](https://github.com/jonathantneal/postcss-nesting)
 
+## `image-set()` function
+
+Allows you to set different images for each kind of resolution of user device. 
+
+```css
+.foo {
+    background-image: image-set(url(img/test.png) 1x,
+                                url(img/test-2x.png) 2x,
+                                url(my-img-print.png) 600dpi);
+}
+```
+
+[Specification](https://drafts.csswg.org/css-images-3/#image-set-notation)
+|
+[Plugin documentation](https://github.com/SuperOl3g/postcss-image-set-polyfill)
+
+
 ## `color()` function
 
 A color function to modify colors (transpiled to: `rgba()`)
@@ -442,6 +459,61 @@ 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)
+
+## `system-ui` font-family
+
+Allows you to use `system-ui` generic font-family. The current transformation provides a practical font-family list as fallback.
+
+```css
+body {
+  font-family: system-ui;
+}
+```
+
+[Specification](https://drafts.csswg.org/css-fonts-4/#valdef-font-family-system-ui)
+|
+[Plugin documentation](https://github.com/JLHwung/postcss-font-family-system-ui)
+
 ## @todo
 
 Any omissions of the CSS specifications (even in draft) that are subject to be

docs/content/index.md

@@ -24,6 +24,7 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
         style="vertical-align: middle"
         src="https://ghbtns.com/github-btn.html?user=MoOx&repo=postcss-cssnext&type=star&count=true&size=large"
       ></iframe>
+      <script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=cssnextio" id="_carbonads_js"></script>
     </div>
   </section>
 </div>
@@ -72,7 +73,10 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
         <a href="/features/#nesting">nesting</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        <a href="/features/#color-function"><code>color()</code> function</a>
+        <a href="/features/#image-set-function"><code>image-set()</code> function</a>
+      </li>
+      <li class="r-Grid-cell r-minS--1of2">
+          <a href="/features/#color-function"><code>color()</code> function</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
         <a href="/features/#hwb-function"><code>hwb()</code> function</a>
@@ -130,14 +134,32 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
         </small>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        <a href="/features/#replace-overflow-wrap"><code>overflow-wrap</code> property</a>
+        <a href="/features/#overflow-wrap-property-word-wrap-fallback"><code>overflow-wrap</code> property</a>
         <small class="cssnext-FeaturesList-small">
           (<code>word-wrap</code> fallback)
         </small>
       </li>
       <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>
+      <li class="r-Grid-cell r-minS--1of2">
+        <a href="/features/#system-ui-font-family"><code>system-ui</code> font-family</a>
+        <small class="cssnext-FeaturesList-small">
+          (font-family fallback)
+        </small>
+      </li>
     </ul>
     <small
       class="cssnext-FeaturesList-small"

docs/content/playground.html

@@ -50,13 +50,23 @@
 @custom-selector :--heading h1, h2, h3, h4, h5, h6;
 :--heading { margin-top: 0 }
 
+/* image-set function */
+.foo {
+    background-image:
+      image-set(
+        url(img/test.png) 1x,
+        url(img/test-2x.png) 2x
+      );
+}
+
 /* colors stuff */
 a {
 color: var(--highlightColor);
 transition: color 1s; /* autoprefixed ! */
 }
 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 */
@@ -84,6 +94,11 @@
 /* attribute case insensitive */
 [frame=hsides i] {
 border-style: solid none;
+}
+
+/* system-ui font-family */
+body {
+font-family: system-ui;
 }
 
     </textarea>

docs/content/postcss.md

@@ -114,7 +114,8 @@ grunt.initConfig({
         // add your "plugins" here
         // ...
         // and if you want to compress
-        // require("cssnano")(),
+        // Disable autoprefixer, because it's already included in cssnext
+        // require("cssnano")({ autoprefixer: false }),
         require("postcss-browser-reporter")(),
         require("postcss-reporter")(),
       ]
@@ -147,7 +148,8 @@ gulp.task('css', function () {
       // add your "plugins" here
       // ...
       // and if you want to compress
-      // require("cssnano")(),
+      // Disable autoprefixer, because it's already included in cssnext
+      // require("cssnano")({ autoprefixer: false }),
       require("postcss-browser-reporter")(),
       require("postcss-reporter")(),
     ]))

docs/content/usage.md

@@ -37,28 +37,40 @@ _Features are enabled by default: no key means feature is enabled_. Keys can be
 
 ```js
 //eg: disable custom properties support
-var output = cssnext(input, {
-  features: {
-    customProperties: false
-  }
-})
+
+var postcss = require("postcss")
+var cssnext = require("postcss-cssnext")
+
+postcss([
+  cssnext({
+    features: {
+      customProperties: false
+    }
+  })
+])
 ```
 
 Each feature is based on PostCSS plugins & can get its own options.
 To pass options to a feature, you can just pass an object to the feature:
 
 ```js
 //eg: pass variables
-var output = cssnext(input, {
-  features: {
-    customProperties: {
-      variables: {
-        mainColor: "red",
-        altColor: "blue",
+
+var postcss = require("postcss")
+var cssnext = require("postcss-cssnext")
+
+postcss([
+  cssnext({
+    features: {
+      customProperties: {
+        variables: {
+          mainColor: "red",
+          altColor: "blue",
+        }
       }
     }
-  }
-})
+  })
+])
 ```
 
 ## `warnForDuplicates`
@@ -72,6 +84,13 @@ and show provide duplicates in their examples.
 (eg: autoprefixer + cssnext - but cssnext already includes autoprefixer).**  
 _In order to fix this, here is a warning. You are welcome._
 
+## `warnForDeprecations`
+
+_(default: true)_
+
+This option should be left with its default value, unless you are aware of the
+risk and plan to handle the situation.  
+
 ---
 
 **To know all available options, please check corresponding postcss plugin by