fix(theme): Include CSS variables in the final css build

CSS Variables should be built into the distributable css file for theme support

.gitignore

@@ -41,3 +41,5 @@ cypress/videos
 
 # dist
 dist
+
+.env

package.json

@@ -7,7 +7,7 @@
   "jsdelivr": "dist/frappe-datatable.min.js",
   "scripts": {
     "start": "yarn run dev",
-    "build": "rollup -c && rollup -c --production",
+    "build": "rollup -c && NODE_ENV=production rollup -c",
     "dev": "rollup -c -w",
     "cy:server": "http-server -p 8989",
     "cy:open": "cypress open",
@@ -33,7 +33,7 @@
     "eslint-plugin-import": "^2.11.0",
     "http-server": "^0.11.1",
     "mocha": "3.3.0",
-    "postcss-cssnext": "^3.1.0",
+    "postcss-custom-properties": "^7.0.0",
     "postcss-nested": "^3.0.0",
     "rollup": "^0.59.4",
     "rollup-plugin-commonjs": "^8.3.0",

rollup.config.js

@@ -4,11 +4,11 @@ import nodeResolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import postcss from 'rollup-plugin-postcss';
 import nested from 'postcss-nested';
-import cssnext from 'postcss-cssnext';
+import customProperties from 'postcss-custom-properties';
 import eslint from 'rollup-plugin-eslint';
 import merge from 'deepmerge';
 
-const production = process.argv[3] === '--production';
+const production = process.env.NODE_ENV === '--production';
 
 const baseJS = {
     input: 'src/index.js',
@@ -40,8 +40,8 @@ const baseCSS = {
             extract: true,
             minimize: production,
             plugins: [
-                nested(),
+                customProperties(),
-                cssnext()
+                nested()
             ]
         })
     ]
@@ -85,24 +85,8 @@ const prodCSS = merge(devCSS, {
     }
 });
 
-// docs
-const docJS = merge(devIIFE, {
-    output: {
-        file: 'docs/assets/js/frappe-datatable.js'
-    }
-});
-
-const docCSS = merge(devCSS, {
-    output: {
-        file: 'docs/assets/css/frappe-datatable.css'
-    }
-});
-
 const developmentAssets = [devIIFE, devCjs, devCSS];
-const documentationAssets = [docJS, docCSS];
 const productionAssets = [prodIIFE, prodCSS];
-
+const assets = production ? productionAssets : developmentAssets;
-const docs = process.argv[3] === '--docs';
-const assets = docs ? documentationAssets : production ? productionAssets : developmentAssets;
 
 export default assets;

src/style.css

@@ -1,4 +1,4 @@
-.datatable {
+:root {
     --border-color: #d1d8dd;
     --primary-color: rgb(82, 146, 247);
     --light-bg: #f5f7fa;