💅 postcss+precss+autoprefixer and basic stylesConfig setup (will foll…

…ow improvements)
facebook · Jan 27, 2018 · a6b18f8 · a6b18f8
1 parent 6bb9280
commit a6b18f8
Show file tree

Hide file tree

Showing 7 changed files with 484 additions and 116 deletions.
diff --git a/examples/basics/siteConfig.js b/examples/basics/siteConfig.js
@@ -32,22 +32,6 @@ const siteConfig = {
   headerIcon: 'img/docusaurus.svg',
   footerIcon: 'img/docusaurus.svg',
   favicon: 'img/favicon.png',
-  /* colors for website */
-  colors: {
-    primaryColor: '#2E8555',
-    secondaryColor: '#205C3B',
-  },
-  /* custom fonts for website */
-  /*fonts: {
-    myFont: [
-      "Times New Roman",
-      "Serif"
-    ],
-    myOtherFont: [
-      "-apple-system",
-      "system-ui"
-    ]
-  },*/
   // This copyright info is used in /core/Footer.js and blog rss/atom feeds.
   copyright:
     'Copyright © ' +

diff --git a/examples/basics/stylesConfig.pcss b/examples/basics/stylesConfig.pcss
@@ -0,0 +1,6 @@
+// Check what you can do with precss!
+// https://github.com/jonathantneal/precss
+
+$primaryColor: #2E8555;
+$secondaryColor: #205C3B;
+$codeColor: color-mod($primaryColor alpha(70%));
diff --git a/lib/server/server.js b/lib/server/server.js
@@ -8,7 +8,7 @@
 
 function execute(port) {
   const extractTranslations = require('../write-translations.js');
-
+  const asyncHandler = require('express-async-handler');
   const env = require('./env.js');
   const translation = require('./translation.js');
   const express = require('express');
@@ -432,16 +432,21 @@ function execute(port) {
   });
 
   // generate the main.css file by concatenating user provided css to the end
-  app.get(/main\.css$/, (req, res) => {
-    const mainCssPath =
-      __dirname +
-      '/../static/' +
-      req.path.toString().replace(siteConfig.baseUrl, '/');
+  app.get(
+    /main\.css$/,
+    asyncHandler(async (req, res, next) => {
+      const mainCssPath =
+        __dirname +
+        '/../static/' +
+        req.path.toString().replace(siteConfig.baseUrl, '/');
 
-    const styles = new Styles(siteConfig, mainCssPath);
+      const styles = new Styles(siteConfig, mainCssPath);
 
-    styles.getCssContent().then(cssContent => res.send(cssContent));
-  });
+      const cssContent = await styles.getCssContent();
+
+      res.send(cssContent.css);
+    })
+  );
 
   // serve static assets from these locations
   app.use(

diff --git a/lib/server/styles.js b/lib/server/styles.js
@@ -1,7 +1,10 @@
 const fs = require('fs');
 const glob = require('glob');
 const color = require('color');
+const postcss = require('postcss');
+const precss = require('precss');
 const chalk = require('chalk');
+const autoprefixer = require('autoprefixer');
 
 const CWD = process.cwd();
 
@@ -23,105 +26,51 @@ class Styles {
     return false;
   }
 
+  getStylesConfigContent() {
+    return __dirname + '/../static/css/styleConfig.pcss';
+  }
+
+  getFileContent(file) {
+    return fs.readFileSync(file, {encoding: 'utf8'});
+  }
+
   getCssContent() {
-    let cssContent = fs.readFileSync(this.mainCssPath, {encoding: 'utf8'});
+    const config = CWD + '/stylesConfig.pcss';
+    const stylesConfigFile = fs.existsSync(config)
+      ? config
+      : this.getStylesConfigContent();
+
+    const stylesConfigContent = this.getFileContent(stylesConfigFile);
+
+    const mainCssContent = this.getFileContent(this.mainCssPath);
+
+    let cssContent = stylesConfigContent + mainCssContent;
 
     let files = glob.sync(CWD + '/static/**/*.css');
 
     files.forEach(file => {
       if (this.isSeparateCss(file)) {
         return;
       }
-      cssContent =
-        cssContent + '\n' + fs.readFileSync(file, {encoding: 'utf8'});
+      cssContent = cssContent + this.getFileContent(file);
     });
 
     if (
-      !this.siteConfig.colors ||
-      !this.siteConfig.colors.primaryColor ||
-      !this.siteConfig.colors.secondaryColor
+      this.siteConfig.colors ||
+      this.siteConfig.colors.primaryColor ||
+      this.siteConfig.colors.secondaryColor
     ) {
       console.error(
         `${chalk.yellow(
-          'Missing color configuration.'
-        )} Make sure siteConfig.colors includes primaryColor and secondaryColor fields.`
+          'Deprecated color configuration.'
+        )} Make sure to use stylesConfig.pcss in your website folder`
       );
     }
 
-    Object.keys(this.siteConfig.colors).forEach(key => {
-      const color = this.siteConfig.colors[key];
-      cssContent = cssContent.replace(new RegExp('\\$' + key, 'g'), color);
+    return postcss([precss, autoprefixer]).process(cssContent, {
+      from: undefined,
     });
-    const codeColor = color(this.siteConfig.colors.primaryColor)
-      .alpha(0.07)
-      .string();
-    cssContent = cssContent.replace(new RegExp('\\$codeColor', 'g'), codeColor);
-
-    if (this.siteConfig.fonts) {
-      Object.keys(this.siteConfig.fonts).forEach(key => {
-        const fontString = this.siteConfig.fonts[key]
-          .map(font => '"' + font + '"')
-          .join(', ');
-        cssContent = cssContent.replace(
-          new RegExp('\\$' + key, 'g'),
-          fontString
-        );
-      });
-    }
-
-    return Promise.resolve(cssContent);
   }
 }
 
 module.exports = Styles;
-
-
-// module.exports = (req, res, siteConfig) => {
-//   const mainCssPath =
-//     __dirname +
-//     '/../static/' +
-//     req.path.toString().replace(siteConfig.baseUrl, '/');
-
-//     const defaultStyleConfig =
-//     __dirname +
-//     '/../static/css/styleConfig.pcss';
-
-// const config = CWD + '/stylesConfig.pcss'
-// const stylesConfigFile = fs.existsSync(config) ? config :
-
-//   const stylesConfig = fs.readFileSync(CWD + '/stylesConfig.pcss', {
-//     encoding: 'utf8',
-//   });
-
-//   let cssContent = stylesConfig;
-
-//   cssContent =
-//     cssContent + '\n' + fs.readFileSync(mainCssPath, {encoding: 'utf8'});
-
-//   let files = glob.sync(CWD + '/static/**/*.css');
-
-//   files.forEach(file => {
-//     if (this.isSeparateCss(file, siteConfig.separateCss)) {
-//       return;
-//     }
-//     cssContent = cssContent + '\n' + fs.readFileSync(file, {encoding: 'utf8'});
-//   });
-
-//   if (
-//     !siteConfig.colors ||
-//     !siteConfig.colors.primaryColor ||
-//     !siteConfig.colors.secondaryColor
-//   ) {
-//     console.error(
-//       `${chalk.yellow(
-//         'Missing color configuration.'
-//       )} Make sure siteConfig.colors includes primaryColor and secondaryColor fields.`
-//     );
-//   }
-
-//   postcss([precss, autoprefixer])
-//     .process(cssContent)
-//     .then(result => {
-//       res.send(result.css);
-//     });
-// };
diff --git a/lib/static/css/stylesConfig.pcss b/lib/static/css/stylesConfig.pcss
@@ -0,0 +1,6 @@
+// Check what you can do with precss!
+// https://github.com/jonathantneal/precss
+
+$primaryColor: #2E8555;
+$secondaryColor: #205C3B;
+$codeColor: color-mod($primaryColor alpha(70%));
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "autoprefixer": "^7.2.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
@@ -38,10 +39,13 @@
     "crowdin-cli": "^0.3.0",
     "escape-string-regexp": "^1.0.5",
     "express": "^4.15.3",
+    "express-async-handler": "^1.0.3",
     "feed": "^1.1.0",
     "fs-extra": "^5.0.0",
     "glob": "^7.1.2",
     "highlight.js": "^9.12.0",
+    "postcss": "^6.0.16",
+    "precss": "^3.1.0",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-dom-factories": "^1.0.1",