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

…ow improvements)

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 © ' +

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%));

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(

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,54 +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 = Styles;

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%));

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",