postcss-extend integration (#42)

* first pass at postcss-extend support

* resolve build warning

.stylelintrc

@@ -1,6 +1,14 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "extend"
+        ]
+      }
+    ],
     "property-no-unknown": [
       true,
       {

README.md

@@ -15,6 +15,7 @@ starbase is a webpack 4, ES6 & PostCSS boilerplate that utilizes some of the jui
   * [cssnext](https://github.com/MoOx/postcss-cssnext)
   * [PostCSS Nested](https://github.com/postcss/postcss-nested)
   * [PostCSS Responsive Type](https://github.com/seaneking/postcss-responsive-type)
+  * [postcss-extend](https://github.com/travco/postcss-extend)
   * [stylelint](https://github.com/stylelint/stylelint)
   * [MQPacker](https://github.com/hail2u/node-css-mqpacker)
 * ...and more!

package.json

@@ -53,6 +53,7 @@
     "offline-plugin": "^5.0.3",
     "postcss": "^6.0.22",
     "postcss-cssnext": "^3.1.0",
+    "postcss-extend": "^1.0.5",
     "postcss-import": "^11.1.0",
     "postcss-loader": "^2.1.5",
     "postcss-nested": "^3.0.0",

src/app/utilities.css

@@ -0,0 +1,7 @@
+.clearfix {
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}

src/components/tabs/tabs.css

@@ -1,3 +1,5 @@
+@import "../../app/utilities.css";
+
 :root {
   --tabs-list-height-small: 2rem;
   --tabs-list-height-full: 2.5rem;
@@ -15,6 +17,8 @@
 
   /* tabs list */
   &__list {
+    @extend .clearfix;
+
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -28,12 +32,6 @@
       border-bottom: 2px solid var(--tabs-border-color);
     }
 
-    &::after {
-      content: "";
-      display: table;
-      clear: both;
-    }
-
     & > li {
       float: left;
       margin: 0.5rem 0.5rem 0 0;

webpack/lib/css-prefix-variables.js

@@ -2,10 +2,14 @@ const loaderUtils = require('loader-utils');
 
 module.exports = function cssPrefixVariables(content) {
   const options = loaderUtils.getOptions(this);
+
   if (options.path) {
     this.cacheable();
-    return `@import url("${options.path}");\n\n${content}`;
-  } else {
-    return content;
+
+    // check if first line of content is another import
+    const lineBreak = content.substr(0, 7) === '@import' ? '\n' : '\n\n';
+    return `@import url("${options.path}");${lineBreak}${content}`;
   }
+
+  return content;
 };

webpack/webpack.config.dev.js

@@ -11,6 +11,7 @@ const postcssCssnext = require('postcss-cssnext');
 const postcssNested = require('postcss-nested');
 const postcssRemoveRoot = require('postcss-remove-root');
 const postcssResponsiveType = require('postcss-responsive-type');
+const postcssExtend = require('postcss-extend');
 const cssMqpacker = require('css-mqpacker');
 
 module.exports = webpackMerge(webpackConfigBase, {
@@ -29,19 +30,20 @@ module.exports = webpackMerge(webpackConfigBase, {
             options: {
               sourceMap: 'inline',
               plugins: () => [
-                postcssImport,
                 stylelint(),
                 postcssReporter(),
+                postcssImport(),
+                postcssNested(),
                 postcssCssnext({
                   features: {
                     autoprefixer: {
                       grid: false
                     }
                   }
                 }),
-                postcssResponsiveType,
-                postcssNested,
-                postcssRemoveRoot,
+                postcssResponsiveType(),
+                postcssExtend(),
+                postcssRemoveRoot(),
                 cssMqpacker({
                   sort: true
                 })

webpack/webpack.config.prod.js

@@ -12,6 +12,7 @@ const postcssCssnext = require('postcss-cssnext');
 const postcssNested = require('postcss-nested');
 const postcssRemoveRoot = require('postcss-remove-root');
 const postcssResponsiveType = require('postcss-responsive-type');
+const postcssExtend = require('postcss-extend');
 const cssMqpacker = require('css-mqpacker');
 const cssnano = require('cssnano');
 
@@ -30,19 +31,20 @@ module.exports = webpackMerge(webpackConfigBase, {
             loader: 'postcss-loader',
             options: {
               plugins: () => [
-                postcssImport,
                 stylelint(),
                 postcssReporter(),
+                postcssImport(),
+                postcssNested(),
                 postcssCssnext({
                   features: {
                     autoprefixer: {
                       grid: false
                     }
                   }
                 }),
-                postcssResponsiveType,
-                postcssNested,
-                postcssRemoveRoot,
+                postcssResponsiveType(),
+                postcssExtend(),
+                postcssRemoveRoot(),
                 cssMqpacker({
                   sort: true
                 }),

yarn.lock

@@ -6435,6 +6435,12 @@ postcss-discard-unused@^2.2.1:
     postcss "^5.0.14"
     uniqs "^2.0.0"
 
+postcss-extend@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-extend/-/postcss-extend-1.0.5.tgz#5ea98bf787ba3cacf4df4609743f80a833b1d0e7"
+  dependencies:
+    postcss "^5.0.4"
+
 postcss-filter-plugins@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"