userland postcss from css transform

ProjectEvergreen · Dec 23, 2020 · d453d39 · d453d39
1 parent da60d22
commit d453d39
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 82 deletions.
diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
@@ -124,19 +124,7 @@ function greenwoodHtmlPlugin(compilation) {
       return Promise.all(Object.keys(mappedStyles).map(async (assetKey) => {
         const asset = mappedStyles[assetKey];
         const filePath = path.join(userWorkspace, asset.name);
-        const userPostcssConfig = fs.existsSync(path.join(process.cwd(), 'postcss.config.js'))
-          ? require(path.join(process.cwd(), 'postcss.config'))
-          : {};
-        const userPostcssPlugins = userPostcssConfig.plugins
-          ? userPostcssConfig.plugins
-          : [];
-
-        const allPostcssPlugins = [
-          ...userPostcssPlugins,
-          ...postcssConfig.plugins
-        ];
-
-        const result = await postcss(allPostcssPlugins)
+        const result = await postcss(postcssConfig.plugins)
           .use(postcssImport())
           .process(asset.source, { from: filePath });
 

diff --git a/packages/cli/src/lifecycles/context.js b/packages/cli/src/lifecycles/context.js
@@ -68,6 +68,7 @@ module.exports = initContexts = async({ config }) => {
       //     ? path.join(process.cwd(), './', postcssConfig)
       //     : path.join(defaultConfigDir, postcssConfig)
       // };
+      const projectDirectory = process.cwd();
       const userWorkspace = path.join(config.workspace);
       const pagesDir = path.join(userWorkspace, 'pages/');
       const userTemplatesDir = path.join(userWorkspace, 'templates/');
@@ -78,7 +79,8 @@ module.exports = initContexts = async({ config }) => {
         userWorkspace,
         pagesDir,
         userTemplatesDir,
-        scratchDir
+        scratchDir,
+        projectDirectory
       };
 
       if (!fs.existsSync(scratchDir)) {

diff --git a/packages/cli/src/transforms/transform.css.js b/packages/cli/src/transforms/transform.css.js
@@ -1,5 +1,6 @@
+const fs = require('fs');
 const path = require('path');
-const { promises: fsp } = require('fs');
+const postcss = require('postcss');
 const TransformInterface = require('./transform.interface');
 
 class CSSTransform extends TransformInterface {
@@ -18,9 +19,22 @@ class CSSTransform extends TransformInterface {
           ? path.join(process.cwd(), url)
           : path.join(this.workspace, url);
 
-        const css = await fsp.readFile(cssPath, 'utf-8');
+        let css = await fs.promises.readFile(cssPath, 'utf-8');
         let body = '', contentType = '';
 
+        // TODO try and use context.projectDirectory
+        if (fs.existsSync(path.join(process.cwd(), 'postcss.config.js'))) {
+          const userPostcssConfig = require(`${process.cwd()}/postcss.config`);
+          const userPostcssPlugins = userPostcssConfig.plugins || [];
+
+          if (userPostcssPlugins.length > 0) {
+            const result = await postcss(userPostcssPlugins)
+              .process(css, { from: cssPath });
+
+            css = result.css;
+          }
+        }
+
         // <style> tag used
         if (destHeader === 'style') {
           contentType = 'text/css';

diff --git a/www/styles/home.css b/www/styles/home.css
@@ -1,4 +1,3 @@
-/* TODO restore to nested styles */
 h3 {
   color: green;
 }
@@ -11,28 +10,28 @@ h3 {
   background-color: #efefef;
   padding: 0 15%;
   font-size:1.2rem;
-}
 
-.gwd-content h3 {
-  font-size:2rem;
-  margin: 5px 0;
-}
+  & h3 {
+    font-size:2rem;
+    margin: 5px 0;
+  }
 
-.gwd-content a {
-  color: #1d337a;
+  & a {
+    color: #1d337a;
+  }
 }
 
-.gwd-content .cards {
+.cards {
   margin: 0 -15%
 }
 
-.gwd-content .message {
+.message {
   padding: 4rem;
   text-align:center;
-}
 
-.gwd-content .message hr {
-  margin-top: 4rem;
+  & hr {
+    margin-top: 4rem;
+  }
 
   @media(max-width:768px) {
     padding:0;

diff --git a/www/styles/page.css b/www/styles/page.css
@@ -1,5 +1,3 @@
-/* TODO restore to nested styles */
-/* TODO handle prismjs */
 /* https://prismjs.com/examples.html */
 @import url('../../node_modules/prismjs/themes/prism-tomorrow.css');
 
@@ -19,21 +17,22 @@ h4, h5, h6 {
 }
 
 h1, h2, h3, h4, h5 {
-  line-height: 1rem;
-}
-
-h5 a > span.icon {
-  width:28px;
-  height:24px;
-  float:left;
-  padding:2px;
-  background-image: url('../assets/link.png');
-  background-size: 20px 20px;
-  background-repeat: no-repeat;
-}
-
-h1, h2, h3, h4, h5 a:hover {
-  filter: invert(.4);
+  line-height: 1.8rem;
+
+  & a > span.icon {
+    width:28px;
+    height:24px;
+    float:left;
+    padding:2px;
+    background-image: url(/assets/link.png);
+    background-size: 20px 20px;
+    background-repeat: no-repeat;
+    background-position-y: center;
+
+    &:hover {
+      filter: invert(.4);
+    }
+  }
 }
 
 .gwd-content-wrapper {
@@ -70,45 +69,44 @@ h1, h2, h3, h4, h5 a:hover {
   @media(max-width:768px) {
     padding:0;
   }
-}
 
-.gwd-content  h3 {
-  font-size:2rem;
-  margin: 5px 0;
-}
+  & h3 {
+    font-size:2rem;
+    margin: 5px 0;
+  }
 
-.gwd-content  a {
-  color: #1d337a;
-}
+  & a {
+    color: #1d337a;
+  }
 
-.gwd-content  img {
-  width: 100%;
-}
+  & img {
+    width: 100%;
+  }
 
-.gwd-content  blockquote {
-  margin:0.5em;
-  padding:15px;
-  background-color:#dcf9ca !important;
-  border-left: 6px solid #192a27;
-
+  & blockquote {
+    margin:0.5em;
+    padding:15px;
+    background-color:#dcf9ca !important;
+    border-left: 6px solid #192a27;
+  }
   @media (max-width: 768px) {
     width: 100%;
     height: 100%;
   }
 }
 
-.gwd-content table {
+table {
   border: 1px solid #020202;
   width: 100%;
   text-align: left;
   margin-bottom: 20px;
 }
 
-.gwd-content table th:first-child {
+table th:first-child {
   min-width: 150px;
 }
 
-.gwd-content table th {
+table th {
   background-color: #f9e7ca;
   text-decoration: underline;
 }
diff --git a/www/styles/theme.css b/www/styles/theme.css
@@ -1,4 +1,3 @@
-/* TODO restore to nested styles */
 @import url('../assets/fonts/source-sans-pro.css');
 
 * {
@@ -20,13 +19,14 @@ table {
   background-color: #334a5a;
   border-radius: 5px;
   padding: 10px!important;
-}
-table tr {
-  padding: 10px;
-}
 
-table td, table a, table th {
-  color: #efefef!important;
+  & tr {
+    padding: 10px;
+  }
+
+  & td, & a, & th {
+    color: #efefef!important;
+  }
 }
 
 img {
@@ -51,12 +51,14 @@ ul > li {
   margin: 10px 0;
 }
 
-a .title {
-  text-decoration: underline;
-}
+a {
+  & .title {
+    text-decoration: underline;
+  }
 
-a .title .step {
-  margin: 2px;
+  & .step {
+    margin: 2px;
+  }
 }
 
 .gwd-content-wrapper {
@@ -65,9 +67,9 @@ a .title .step {
 
 .gwd-wrapper {
   background-color: white;
-}
 
-.gwd-wrapper.single-column {
-  margin: inherit;
-  color: #000;
+  & .single-column {
+    margin: inherit;
+    color: #000;
+  }
 }