Add postcss-apply plugin

docs/content/features.md

@@ -18,7 +18,7 @@ depending on your browser scope) using
 **[autoprefixer](https://github.com/postcss/autoprefixer)**).
 
 
-## custom properties & `var()`
+## custom properties & `var()`
 
 The current transformation for custom properties aims to provide a
 future-proof way of using a **limited subset (to top-level `:root` selector)**
@@ -42,6 +42,30 @@ might happen).
 |
 [Plugin documentation](https://github.com/postcss/postcss-custom-properties)
 
+## custom properties set & `@apply`
+
+Allows you to store a set of properties in a named variable, then reference them
+in other style rules.
+
+```css
+:root {
+  --danger-theme: {
+    color: white;
+    background-color: red;
+  };
+}
+
+.danger {
+  @apply --danger-theme;
+}
+```
+
+(The same DOM restrictions as the custom properties plugin apply).
+
+[Specification](https://tabatkins.github.io/specs/css-apply-rule)
+|
+[Plugin documentation](https://github.com/pascalduez/postcss-apply)
+
 ## reduced `calc()`
 
 Allows you to use safely calc with custom properties by optimizing previously

docs/content/index.md

@@ -51,7 +51,10 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
         <a href="/features/#automatic-vendor-prefixes">automatic vendor prefixes</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        <a href="/features/#custom-properties-var">custom properties & <code>var()</code></a>
+        <a href="/features/#custom-properties-var">custom properties &amp; <code>var()</code></a>
+      </li>
+      <li class="r-Grid-cell r-minS--1of2">
+        <a href="/features/#custom-properties-set-apply">custom properties set &amp; <code>@apply</code></a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
         <a href="/features/#reduced-calc">reduced <code>calc()</code></a>

docs/content/playground.html

@@ -16,6 +16,19 @@
 --highlightColor: hwb(190, 35%, 20%);
 }
 
+/* custom properties set & @apply rule */
+:root {
+  --centered: {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  };
+}
+
+.centered {
+  @apply --centered;
+}
+
 /* custom media queries */
 @custom-media --viewport-medium (width <= 50rem);
 
@@ -65,7 +78,7 @@
 
 /* overflow-wrap fallback */
 body {
-overflow-wrap: break-word;  
+overflow-wrap: break-word;
 }
 
     </textarea>

package.json

@@ -27,6 +27,7 @@
     "pixrem": "^3.0.0",
     "pleeease-filters": "^3.0.0",
     "postcss": "^5.0.4",
+    "postcss-apply": "^0.3.0",
     "postcss-calc": "^5.0.0",
     "postcss-color-function": "^2.0.0",
     "postcss-color-gray": "^3.0.0",

src/__tests__/fixtures/features/apply-rule.css

@@ -0,0 +1,10 @@
+:root {
+  --foo-set: {
+    color: tomato;
+    content: 'foo';
+  };
+}
+
+.foo {
+  @apply --foo-set;
+}

src/__tests__/fixtures/features/apply-rule.expected.css

@@ -0,0 +1,4 @@
+.foo {
+  color: tomato;
+  content: 'foo';
+}

src/features.js

@@ -9,6 +9,9 @@ export default {
    // https://npmjs.com/package/postcss-custom-properties
   customProperties: (options) => require("postcss-custom-properties")(options),
 
+  // https://npmjs.com/package/postcss-apply
+  applyRule: (options) => require("postcss-apply")(options),
+
   // https://npmjs.com/package/postcss-calc
   calc: (options) => require("postcss-calc")(options),