From d27d15b521a2772cb1c0e53b937771ef012df4fd Mon Sep 17 00:00:00 2001
From: Pascal Duez <pascalduez@users.noreply.github.com>
Date: Tue, 28 Jun 2016 09:15:13 +0200
Subject: [PATCH] =?UTF-8?q?Added:=20``=EF=BC=A0apply``=20support=20(#291)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #203
---
 docs/content/features.md                      | 26 ++++++++++++++++++-
 docs/content/index.md                         |  5 +++-
 docs/content/playground.html                  | 15 ++++++++++-
 package.json                                  |  1 +
 .../fixtures/features/apply-rule.css          | 10 +++++++
 .../fixtures/features/apply-rule.expected.css |  4 +++
 src/features.js                               |  3 +++
 7 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 src/__tests__/fixtures/features/apply-rule.css
 create mode 100644 src/__tests__/fixtures/features/apply-rule.expected.css

diff --git a/docs/content/features.md b/docs/content/features.md
index 6dc33a5..4d2fc8a 100644
--- a/docs/content/features.md
+++ b/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 &amp; `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 &amp; `@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
diff --git a/docs/content/index.md b/docs/content/index.md
index 513859d..88af42f 100644
--- a/docs/content/index.md
+++ b/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>
diff --git a/docs/content/playground.html b/docs/content/playground.html
index a288eb6..95a2ee6 100644
--- a/docs/content/playground.html
+++ b/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>
diff --git a/package.json b/package.json
index 963bf5d..78383a3 100644
--- a/package.json
+++ b/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",
diff --git a/src/__tests__/fixtures/features/apply-rule.css b/src/__tests__/fixtures/features/apply-rule.css
new file mode 100644
index 0000000..f2f8531
--- /dev/null
+++ b/src/__tests__/fixtures/features/apply-rule.css
@@ -0,0 +1,10 @@
+:root {
+  --foo-set: {
+    color: tomato;
+    content: 'foo';
+  };
+}
+
+.foo {
+  @apply --foo-set;
+}
diff --git a/src/__tests__/fixtures/features/apply-rule.expected.css b/src/__tests__/fixtures/features/apply-rule.expected.css
new file mode 100644
index 0000000..f6f4aa3
--- /dev/null
+++ b/src/__tests__/fixtures/features/apply-rule.expected.css
@@ -0,0 +1,4 @@
+.foo {
+  color: tomato;
+  content: 'foo';
+}
diff --git a/src/features.js b/src/features.js
index bf23960..5074a8b 100644
--- a/src/features.js
+++ b/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),