publish: 2.7.0

generated from commit dd8c1e4

Author: MoOx

credits/index.html

@@ -161,7 +161,7 @@
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span><span class="cssnext-Header-version">2.6.0</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/MoOx/postcss-cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/MoOx/postcss-cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><header class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Jumbotron--credits-html"><div class="r-Grid"><div class="r-Grid-cell"><h1 class="cssnext-Jumbotron-title cssnext-Light">Credits</h1></div></div></header><section class="r-Grid cssnext-Section"><div class="r-Grid-cell js-markdownIt-TOCOriginalContainer"><ul>
+</svg></span><span class="cssnext-Header-version">2.7.0</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/MoOx/postcss-cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/MoOx/postcss-cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><header class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Jumbotron--credits-html"><div class="r-Grid"><div class="r-Grid-cell"><h1 class="cssnext-Jumbotron-title cssnext-Light">Credits</h1></div></div></header><section class="r-Grid cssnext-Section"><div class="r-Grid-cell js-markdownIt-TOCOriginalContainer"><ul>
 <li><a href="https://www.flickr.com/photos/jasoncipriani/11866004734">delorean back</a></li>
 <li><a href="https://www.flickr.com/photos/wizzer/9295055565">delorean with blue trails</a></li>
 <li><a href="https://www.flickr.com/photos/brianneudorff/10047726604">bttf legos</a></li>
@@ -330,5 +330,5 @@
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/MoOx/postcss-cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/MoOx/postcss-cssnext/edit/master/docs/content/credits.md">Edit this page</a></span></small></footer><script src="/index.js?6139be442f66fae29934"></script><script>
+</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/MoOx/postcss-cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/MoOx/postcss-cssnext/edit/master/docs/content/credits.md">Edit this page</a></span></small></footer><script src="/index.js?4d0b817adac9cac909e8"></script><script>
 !function(c,s,S,n,e,x,t){c.GoogleAnalyticsObject=S;c[S]||(c[S]=function(){(c[S].q=c[S].q||[]).push(arguments)});c[S].l=+new Date;x=s.createElement(n);t=s.getElementsByTagName(n)[0];x.src=e;t.parentNode.insertBefore(x,t)}(window,document,'ga','script','//www.google-analytics.com/analytics.js');ga('create','UA-55403963-1','auto');ga('send','pageview');</script></body></html>

features/index.html

@@ -161,13 +161,16 @@
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span><span class="cssnext-Header-version">2.6.0</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/MoOx/postcss-cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/MoOx/postcss-cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><header class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Jumbotron--features-html cssnext-Jumbotron--darkRoad"><div class="r-Grid"><div class="r-Grid-cell"><h1 class="cssnext-Jumbotron-title cssnext-Light">postcss-cssnext features</h1><strong class="cssnext-Jumbotron-subtitle cssnext-Light">Discover the future of CSS</strong></div></div></header><section class="r-Grid cssnext-Section"><div class="r-Grid-cell js-markdownIt-TOCOriginalContainer"><p>
+</svg></span><span class="cssnext-Header-version">2.7.0</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/MoOx/postcss-cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/MoOx/postcss-cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><header class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Jumbotron--features-html cssnext-Jumbotron--darkRoad"><div class="r-Grid"><div class="r-Grid-cell"><h1 class="cssnext-Jumbotron-title cssnext-Light">postcss-cssnext features</h1><strong class="cssnext-Jumbotron-subtitle cssnext-Light">Discover the future of CSS</strong></div></div></header><section class="r-Grid cssnext-Section"><div class="r-Grid-cell js-markdownIt-TOCOriginalContainer"><p>
 <ul class="markdownIt-TOC">
   <li>
     <a href="#automatic-vendor-prefixes">automatic vendor prefixes</a>
   </li>
   <li>
-    <a href="#custom-properties-var">custom properties & `var()`</a>
+    <a href="#custom-properties-var">custom properties &amp; `var()`</a>
+  </li>
+  <li>
+    <a href="#custom-properties-set-apply">custom properties set &amp; `@apply`</a>
   </li>
   <li>
     <a href="#reduced-calc">reduced `calc()`</a>
@@ -243,7 +246,7 @@ <h2 id="automatic-vendor-prefixes"><a class="markdownIt-Anchor" href="#automatic
 <strong><a href="https://github.com/postcss/autoprefixer">autoprefixer</a></strong>).</p>
 <h2 id="custom-properties-var"><a class="markdownIt-Anchor" href="#custom-properties-var">#</a> custom properties &amp; <code>var()</code></h2>
 <p>The current transformation for custom properties aims to provide a
-future-proof way of using a <strong>limited subset (to top-level <code>:root</code> selector)</strong>
+future-proof way of using a <strong>limited to <code>:root</code> selector</strong>
 of the features provided by native CSS custom properties.</p>
 <pre><code class="language-css"><span class="hljs-pseudo">:root</span> <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">--mainColor</span>:<span class="hljs-value"> red</span></span>;
@@ -252,12 +255,27 @@ <h2 id="custom-properties-var"><a class="markdownIt-Anchor" href="#custom-proper
 <span class="hljs-tag">a</span> <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--mainColor)</span></span>;
 }</span></code></pre>
-<p>(The transformation is not complete and can’t be properly. By injecting selectors
-with new computed rules, we will break original cascade &amp; unexpected results
-might happen).</p>
+<p>⚠️ <a href="https://github.com/postcss/postcss-custom-properties#readme"><em>The definitions are <strong>limited to <code>:root</code> selector.</strong></em></a></p>
 <p><a href="http://www.w3.org/TR/css-variables/">Specification</a>
 |
 <a href="https://github.com/postcss/postcss-custom-properties">Plugin documentation</a></p>
+<h2 id="custom-properties-set-apply"><a class="markdownIt-Anchor" href="#custom-properties-set-apply">#</a> custom properties set &amp; <code>@apply</code></h2>
+<p>Allows you to store a set of properties in a named custom property,
+then reference them in other style rules.</p>
+<pre><code class="language-css">:root {
+  --danger-theme: {
+    color: white;
+    background-color: red;
+  };
+}
+
+.danger {
+  @apply --danger-theme;
+}</code></pre>
+<p>⚠️ <a href="https://github.com/postcss/postcss-custom-properties#readme"><em>The definitions are <strong>limited to <code>:root</code> selector.</strong></em></a></p>
+<p><a href="https://tabatkins.github.io/specs/css-apply-rule">Specification</a>
+|
+<a href="https://github.com/pascalduez/postcss-apply">Plugin documentation</a></p>
 <h2 id="reduced-calc"><a class="markdownIt-Anchor" href="#reduced-calc">#</a> reduced <code>calc()</code></h2>
 <p>Allows you to use safely calc with custom properties by optimizing previously
 parsed <code>var()</code> references.</p>
@@ -664,5 +682,5 @@ <h2 id="todo"><a class="markdownIt-Anchor" href="#todo">#</a> @todo</h2>
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/MoOx/postcss-cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/MoOx/postcss-cssnext/edit/master/docs/content/features.md">Edit this page</a></span></small></footer><script src="/index.js?6139be442f66fae29934"></script><script>
+</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/MoOx/postcss-cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/MoOx/postcss-cssnext/edit/master/docs/content/features.md">Edit this page</a></span></small></footer><script src="/index.js?4d0b817adac9cac909e8"></script><script>
 !function(c,s,S,n,e,x,t){c.GoogleAnalyticsObject=S;c[S]||(c[S]=function(){(c[S].q=c[S].q||[]).push(arguments)});c[S].l=+new Date;x=s.createElement(n);t=s.getElementsByTagName(n)[0];x.src=e;t.parentNode.insertBefore(x,t)}(window,document,'ga','script','//www.google-analytics.com/analytics.js');ga('create','UA-55403963-1','auto');ga('send','pageview');</script></body></html>

index.html

@@ -161,7 +161,7 @@
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span><span class="cssnext-Header-version">2.6.0</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/MoOx/postcss-cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/MoOx/postcss-cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><div class=""><div class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Center cssnext-Light">
+</svg></span><span class="cssnext-Header-version">2.7.0</span></a><a href="/features/" class="cssnext-Header-nav-item">Features</a><a href="/setup/" class="cssnext-Header-nav-item">Setup</a><a href="/usage/" class="cssnext-Header-nav-item">Usage</a><a href="/playground/" class="cssnext-Header-nav-item">Playground</a></span></div><div class="r-Grid-cell r-minM--2of6"><div class="cssnext-Header-nav"><a href="https://gitter.im/MoOx/postcss-cssnext" class="cssnext-Header-nav-item">Support</a><a href="https://github.com/MoOx/postcss-cssnext" title="GitHub" class="cssnext-Header-nav-item">GitHub</a><a href="https://twitter.com/cssnext" title="Twitter" class="cssnext-Header-nav-item">Twitter</a></div></div></div></header><div class=""><div class="cssnext-Jumbotron cssnext-Jumbotron--default cssnext-Center cssnext-Light">
   <section class="r-Grid">
     <div class="r-Grid-cell">
       <strong class="cssnext-Jumbotron-title">Use tomorrow’s CSS syntax, today.</strong>
@@ -209,7 +209,10 @@ <h2 class="cssnext-Section-title"><a href="/features/">Features</a></h2>
         <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>
@@ -540,5 +543,5 @@ <h3 class="cssnext-Section-title">It's fast. Lightning fast.</h3>
 	</linearGradient>
 	<path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"/>
 </g>
-</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/MoOx/postcss-cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/MoOx/postcss-cssnext/edit/master/docs/content/index.md">Edit this page</a></span></small></footer><script src="/index.js?6139be442f66fae29934"></script><script>
+</svg></span> is brought to you by <a href="https://twitter.com/MoOx">@MoOx</a> &amp; <a href="https://github.com/MoOx/postcss-cssnext/graphs/contributors">some other contributors</a>.</p><small><a href="/it-s-cssnext-not-CSSNext">Note: it&#x27;s cssnext, not CSSNext</a><span style="opacity:.4;margin-left:1rem;"><a href="/credits">Credits</a> | <a href="https://github.com/MoOx/postcss-cssnext/edit/master/docs/content/index.md">Edit this page</a></span></small></footer><script src="/index.js?4d0b817adac9cac909e8"></script><script>
 !function(c,s,S,n,e,x,t){c.GoogleAnalyticsObject=S;c[S]||(c[S]=function(){(c[S].q=c[S].q||[]).push(arguments)});c[S].l=+new Date;x=s.createElement(n);t=s.getElementsByTagName(n)[0];x.src=e;t.parentNode.insertBefore(x,t)}(window,document,'ga','script','//www.google-analytics.com/analytics.js');ga('create','UA-55403963-1','auto');ga('send','pageview');</script></body></html>