Fix component generation (tachyons-css#66)

The component build now uses the latest PostCSS API.
The postcss-select library was also improved so selectors
with pseudo elements/classes are also returned. Note that
this update introduced some performance hits I will have
to address later.

Author: johno

build.js

@@ -1,4 +1,8 @@
 require('./src/components-build')()
+console.log('components build complete')
 require('./src/table-of-styles-build')()
+console.log('table of styles build complete')
 require('./src/table-of-properties-build')()
+console.log('table of properties build complete')
 require('./src/home-build')()
+console.log('home build complete')

components/articles/large-title-text.html

@@ -11,6 +11,14 @@
 <style>
   .blue { color: #0074D9; }
   .bg-blue { background-color: #0074D9; }
+
+  .carbon-poweredby { width: 100%; font-size: 12px; float: left; }
+  .carbon-wrap { float: left; width: 100%; box-sizing: border-box; }
+  .carbon-img  { float: left; width: 50%;  box-sizing: border-box; }
+  .carbon-text  { float: left; width: 50%; padding-left: 16px; box-sizing: border-box; font-size: 12px; }
+
+  #carbonads a:link { text-decoration: none!important; color: #222!important; }
+
 </style>
 
 </head>
@@ -146,7 +154,7 @@ <h2 class="f5">CSS</h2>
     max-width: 30em;
 }
 
-@media screen and (min-width: 48em) {
+@media screen and (min-width: 30em) {
     .pa5-ns {
         padding: 4rem;
     }
@@ -168,7 +176,7 @@ <h2 class="f5">CSS</h2>
     <h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
     <dl class="dib mr4 mt0">
       <dt class="db f6">Gzipped Size</dt>
-      <dd class="ml0 b f3 f2-ns">268<small class="f6">B</small>
+      <dd class="ml0 b f3 f2-ns">265<small class="f6">B</small>
       </dd>
     </dl>
     <dl class="dib mr4 mt0">
@@ -454,28 +462,29 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
     <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
   </article>
   <div class="mt4">
-    <a class="black-70 link dim b dib mr3 pv2" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+    <a class="ba b--black-20 bg-white black-70 link br2 dim b dib mr3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="ba b--black-20 bg-white br2 black-70 link dim b dib pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
-    <a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
-      GitHub
-    </a>
   </div>
   <p class="measure copy lh-copy">
     Have a question? Need help? Feel free to open an issue on GitHub or ask a
     question in our slack channel. We're here to try and help make designing in
     the browser fun.
   </p>
+  <div class="pt4 cf mw5">
+    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=tachyonsio" id="_carbonads_js"></script>
+  </div>
   <small class="f6 measure db lh-copy mt5">
     A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
     that always moves faster than light.
     The word comes from the Greek:
     <br> <br>
     ταχύς or tachys, meaning "swift, quick, fast, rapid"
   </small>
+
 </footer>
 
       <script>

components/articles/large-title-text/index.html

@@ -11,6 +11,14 @@
 <style>
   .blue { color: #0074D9; }
   .bg-blue { background-color: #0074D9; }
+
+  .carbon-poweredby { width: 100%; font-size: 12px; float: left; }
+  .carbon-wrap { float: left; width: 100%; box-sizing: border-box; }
+  .carbon-img  { float: left; width: 50%;  box-sizing: border-box; }
+  .carbon-text  { float: left; width: 50%; padding-left: 16px; box-sizing: border-box; font-size: 12px; }
+
+  #carbonads a:link { text-decoration: none!important; color: #222!important; }
+
 </style>
 
 </head>
@@ -111,6 +119,15 @@ <h2 class="f5">CSS</h2>
     border-width: .25rem;
 }
 
+.cf:before, .cf:after {
+    content: " ";
+    display: table;
+}
+
+.cf:after {
+    clear: both;
+}
+
 .cf {
     *zoom: 1;
 }
@@ -189,7 +206,7 @@ <h2 class="f5">CSS</h2>
     max-width: 30em;
 }
 
-@media screen and (min-width: 48em) {
+@media screen and (min-width: 30em) {
     .fl-ns {
         float: left;
         display: inline;
@@ -221,16 +238,16 @@ <h2 class="f5">CSS</h2>
     <h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
     <dl class="dib mr4 mt0">
       <dt class="db f6">Gzipped Size</dt>
-      <dd class="ml0 b f3 f2-ns">426<small class="f6">B</small>
+      <dd class="ml0 b f3 f2-ns">465<small class="f6">B</small>
       </dd>
     </dl>
     <dl class="dib mr4 mt0">
       <dt class="db f6">Selectors</dt>
-      <dd class="ml0 b f3 f2-ns">26</dd>
+      <dd class="ml0 b f3 f2-ns">29</dd>
     </dl>
     <dl class="dib mt0">
       <dt class="db f6">Declarations</dt>
-      <dd class="ml0 b f3 f2-ns">31</dd>
+      <dd class="ml0 b f3 f2-ns">34</dd>
     </dl>
   </div>
   <div class="fl w-100">
@@ -519,28 +536,29 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
     <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
   </article>
   <div class="mt4">
-    <a class="black-70 link dim b dib mr3 pv2" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+    <a class="ba b--black-20 bg-white black-70 link br2 dim b dib mr3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="ba b--black-20 bg-white br2 black-70 link dim b dib pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
-    <a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
-      GitHub
-    </a>
   </div>
   <p class="measure copy lh-copy">
     Have a question? Need help? Feel free to open an issue on GitHub or ask a
     question in our slack channel. We're here to try and help make designing in
     the browser fun.
   </p>
+  <div class="pt4 cf mw5">
+    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=tachyonsio" id="_carbonads_js"></script>
+  </div>
   <small class="f6 measure db lh-copy mt5">
     A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
     that always moves faster than light.
     The word comes from the Greek:
     <br> <br>
     ταχύς or tachys, meaning "swift, quick, fast, rapid"
   </small>
+
 </footer>
 
       <script>

components/articles/left-title-top-border/index.html

@@ -11,6 +11,14 @@
 <style>
   .blue { color: #0074D9; }
   .bg-blue { background-color: #0074D9; }
+
+  .carbon-poweredby { width: 100%; font-size: 12px; float: left; }
+  .carbon-wrap { float: left; width: 100%; box-sizing: border-box; }
+  .carbon-img  { float: left; width: 50%;  box-sizing: border-box; }
+  .carbon-text  { float: left; width: 50%; padding-left: 16px; box-sizing: border-box; font-size: 12px; }
+
+  #carbonads a:link { text-decoration: none!important; color: #222!important; }
+
 </style>
 
 </head>
@@ -84,7 +92,16 @@ <h2 class="f5">HTML</h2>
 </div>
 <div class="fl w-100 w-25-ns pl0 pl2-ns">
 <h2 class="f5">CSS</h2>
-<pre class="pa3 ba br2 b--black-05 h5" id="css">.cf {
+<pre class="pa3 ba br2 b--black-05 h5" id="css">.cf:before, .cf:after {
+    content: " ";
+    display: table;
+}
+
+.cf:after {
+    clear: both;
+}
+
+.cf {
     *zoom: 1;
 }
 
@@ -142,7 +159,7 @@ <h2 class="f5">CSS</h2>
     max-width: 30em;
 }
 
-@media screen and (min-width: 48em) {
+@media screen and (min-width: 30em) {
     .fl-ns {
         float: left;
         display: inline;
@@ -174,16 +191,16 @@ <h2 class="f5">CSS</h2>
     <h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
     <dl class="dib mr4 mt0">
       <dt class="db f6">Gzipped Size</dt>
-      <dd class="ml0 b f3 f2-ns">357<small class="f6">B</small>
+      <dd class="ml0 b f3 f2-ns">393<small class="f6">B</small>
       </dd>
     </dl>
     <dl class="dib mr4 mt0">
       <dt class="db f6">Selectors</dt>
-      <dd class="ml0 b f3 f2-ns">19</dd>
+      <dd class="ml0 b f3 f2-ns">22</dd>
     </dl>
     <dl class="dib mt0">
       <dt class="db f6">Declarations</dt>
-      <dd class="ml0 b f3 f2-ns">23</dd>
+      <dd class="ml0 b f3 f2-ns">26</dd>
     </dl>
   </div>
   <div class="fl w-100">
@@ -466,28 +483,29 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
     <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
   </article>
   <div class="mt4">
-    <a class="black-70 link dim b dib mr3 pv2" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+    <a class="ba b--black-20 bg-white black-70 link br2 dim b dib mr3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="ba b--black-20 bg-white br2 black-70 link dim b dib pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
-    <a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
-      GitHub
-    </a>
   </div>
   <p class="measure copy lh-copy">
     Have a question? Need help? Feel free to open an issue on GitHub or ask a
     question in our slack channel. We're here to try and help make designing in
     the browser fun.
   </p>
+  <div class="pt4 cf mw5">
+    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=tachyonsio" id="_carbonads_js"></script>
+  </div>
   <small class="f6 measure db lh-copy mt5">
     A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
     that always moves faster than light.
     The word comes from the Greek:
     <br> <br>
     ταχύς or tachys, meaning "swift, quick, fast, rapid"
   </small>
+
 </footer>
 
       <script>

components/articles/left-title/index.html

@@ -11,6 +11,14 @@
 <style>
   .blue { color: #0074D9; }
   .bg-blue { background-color: #0074D9; }
+
+  .carbon-poweredby { width: 100%; font-size: 12px; float: left; }
+  .carbon-wrap { float: left; width: 100%; box-sizing: border-box; }
+  .carbon-img  { float: left; width: 50%;  box-sizing: border-box; }
+  .carbon-text  { float: left; width: 50%; padding-left: 16px; box-sizing: border-box; font-size: 12px; }
+
+  #carbonads a:link { text-decoration: none!important; color: #222!important; }
+
 </style>
 
 </head>
@@ -86,7 +94,7 @@ <h2 class="f5">CSS</h2>
     max-width: 30em;
 }
 
-@media screen and (min-width: 48em) {
+@media screen and (min-width: 30em) {
     .pa5-ns {
         padding: 4rem;
     }
@@ -100,7 +108,7 @@ <h2 class="f5">CSS</h2>
     <h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
     <dl class="dib mr4 mt0">
       <dt class="db f6">Gzipped Size</dt>
-      <dd class="ml0 b f3 f2-ns">177<small class="f6">B</small>
+      <dd class="ml0 b f3 f2-ns">173<small class="f6">B</small>
       </dd>
     </dl>
     <dl class="dib mr4 mt0">
@@ -382,28 +390,29 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
     <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
   </article>
   <div class="mt4">
-    <a class="black-70 link dim b dib mr3 pv2" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+    <a class="ba b--black-20 bg-white black-70 link br2 dim b dib mr3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="ba b--black-20 bg-white br2 black-70 link dim b dib pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
-    <a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
-      GitHub
-    </a>
   </div>
   <p class="measure copy lh-copy">
     Have a question? Need help? Feel free to open an issue on GitHub or ask a
     question in our slack channel. We're here to try and help make designing in
     the browser fun.
   </p>
+  <div class="pt4 cf mw5">
+    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=tachyonsio" id="_carbonads_js"></script>
+  </div>
   <small class="f6 measure db lh-copy mt5">
     A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
     that always moves faster than light.
     The word comes from the Greek:
     <br> <br>
     ταχύς or tachys, meaning "swift, quick, fast, rapid"
   </small>
+
 </footer>
 
       <script>