build: use postcss & cssnano to generate css files

build/buildcss.js

@@ -0,0 +1,31 @@
+const sass = require('node-sass')
+const fs = require('fs')
+const path = require('path')
+const postcss = require('postcss')
+const postcssConfig = require('../postcss.config')
+
+const styleFiles = fs
+  .readdirSync(path.resolve(__dirname, '../styles'))
+  .filter(fileName => fileName.endsWith('.scss'))
+
+styleFiles.forEach(fileName => {
+  sass.render({
+    file: path.resolve(__dirname, '../styles', fileName),
+    outputStyle: 'expanded'
+  }, function (err, sassResult) {
+    if (err) console.error(err)
+    postcss(postcssConfig.plugins)
+      .process(sassResult.css, {
+        from: undefined
+      })
+      .then(result => {
+        fs.writeFile(
+          path.resolve(__dirname, '../lib/styles', fileName.replace(/\.scss/, '.css')),
+          result.css,
+          err => {
+            if (err) console.error(err)
+          }
+        )
+      })
+  })
+})

build/config.js

@@ -52,7 +52,7 @@ exports.docLoaders = [
   },
   {
     test: /\.(scss|css)$/,
-    use: ['style-loader', 'css-loader', 'sass-loader']
+    use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
   },
   {
     test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,

postcss.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer'),
+    require('cssnano')({
+      preset: [
+        'default',
+        {
+          normalizeWhitespace: false
+        }
+      ]
+    })
+  ]
+}

styles/Scrollbar.scss

@@ -15,7 +15,7 @@
           overflow: scroll;
           height: 100%;
           max-height: inherit;
-          scrollbar-width: 0;
+          scrollbar-width: none;
           &::-webkit-scrollbar {
             width: 0;
             height: 0;