Allow PostCSS plugins from consuming site

astronomersiva · Jan 3, 2019 · 4b8cf91 · 4b8cf91
1 parent fb5c82f
commit 4b8cf91
Show file tree

Hide file tree

Showing 3 changed files with 2,055 additions and 4,109 deletions.
diff --git a/README.md b/README.md
@@ -131,6 +131,16 @@ Refer [markdown-it-container](https://github.com/markdown-it/markdown-it-contain
   }
 }
 ```
+* `postCSSPlugins`: An array of PostCSS plugins. These will be used in addition to `cssnano` and `postcss-preset-env`
+that are already included in lego.
+```javascript
+{
+  postCSSPlugins: [
+    'precss',
+    'postcss-nested'
+  ]
+}
+```
 
 ### Installation
 

diff --git a/lib/tasks/copyMajorStaticAssets.js b/lib/tasks/copyMajorStaticAssets.js
@@ -9,11 +9,23 @@ module.exports = async function(site, options = {}) {
   let terser;
   const isDevelopment = site.isDevelopment();
 
+  let postCSSPlugins = site.getConfig().postCSSPlugins || [];
+  let isPostCssNeeded = isDevelopment || postCSSPlugins;
+  let postCSSPluginsForProd = [];
+
   // just requiring these adds about 2-3 seconds to startup
-  if (!isDevelopment) {
+  if (isPostCssNeeded) {
     postcss = require('postcss');
-    postcssPresetEnv = require('postcss-preset-env');
-    cssnano = require('cssnano');
+
+    if (!isDevelopment) {
+      cssnano = require('cssnano');
+      postcssPresetEnv = require('postcss-preset-env');
+
+      postCSSPluginsForProd.push(cssnano(), postcssPresetEnv());
+    }
+  }
+
+  if (!isDevelopment) {
     terser = require('terser');
   }
 
@@ -47,21 +59,32 @@ module.exports = async function(site, options = {}) {
         let result = isDevelopment ? contents : terser.minify(contents).code;
         fs.writeFileSync(destination, result);
       } else if (extension === '.css') {
-        let result = isDevelopment
-          ? contents
-          : postcss([postcssPresetEnv(), cssnano()]).process(contents, { from: asset, to: destination });
+        let result = isPostCssNeeded
+          ? postcss(
+            [
+              ...postCSSPlugins.map(
+                plugin => require(
+                  // just requiring the plugin doesn't work when the package is linked
+                  path.join(process.cwd(), 'node_modules', plugin)
+                )()
+              ),
+
+              ...postCSSPluginsForProd
+            ]
+          ).process(contents, { from: asset, to: destination })
+          : contents;
 
         cssPromises.push(result);
         cssDestinations.push(destination);
       }
     }
 
-    let cssResults = isDevelopment ? cssPromises : await Promise.all(cssPromises);
+    let cssResults = isPostCssNeeded ? await Promise.all(cssPromises) : cssPromises;
     for (let index in cssResults) {
       let cssResult = cssResults[index];
       let destination = cssDestinations[index];
 
-      let result = isDevelopment ? cssResult : cssResult.css;
+      let result = isPostCssNeeded ? cssResult.css : cssResult;
       fs.writeFileSync(destination, result);
     }