system for css vars

package.json

@@ -94,6 +94,7 @@
     "rollup-plugin-includepaths": "^0.2.3",
     "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-sourcemaps": "^0.4.2",

packages/__tests__/src/globals.js

@@ -3,6 +3,7 @@
 
 
 // NOTE: a bunch of other top-level JS files in karma.config.js
+// TODO: could include base.css from here
 
 import './hacks'
 import './lib/simulate'

packages/core/src/styles/_popover.scss

@@ -31,11 +31,13 @@
 .fc-unthemed {
 
   .fc-popover {
-    border: 1px solid var(--unthemed-border-color);
+    border: 1px solid $fc-unthemed-border-color;
+    border: 1px solid var(--fc-unthemed-border-color, $fc-unthemed-border-color);
     background: #fff;
 
     .fc-header {
-      background: var(--unthemed-muted-bg-color);
+      background: $fc-unthemed-muted-bg-color;
+      background: var(--fc-unthemed-muted-bg-color, $fc-unthemed-muted-bg-color);
     }
   }
 

packages/core/src/styles/_resets.scss

@@ -52,7 +52,8 @@
 .fc-unthemed {
 
   td, th {
-    border: 1px solid var(--unthemed-border-color);
+    border: 1px solid $fc-unthemed-border-color;
+    border: 1px solid var(--fc-unthemed-border-color, $fc-unthemed-border-color);
   }
 
 }

packages/core/src/styles/_utils.scss

@@ -59,8 +59,10 @@ td.fc-today {
   }
 
   .fc-divider {
-    border: 1px solid var(--unthemed-border-color);
-    background: var(--unthemed-muted-bg-color);
+    border: 1px solid $fc-unthemed-border-color;
+    border: 1px solid var(--fc-unthemed-border-color, $fc-unthemed-border-color);
+    background: $fc-unthemed-muted-bg-color;
+    background: var(--fc-unthemed-muted-bg-color, $fc-unthemed-muted-bg-color);
   }
 
 }

packages/core/src/styles/_vars.scss

@@ -1,5 +1,3 @@
 
-.fc {
-  --unthemed-border-color: #ddd;
-  --unthemed-muted-bg-color: #eee;
-}
+$fc-unthemed-border-color: #ddd;
+$fc-unthemed-muted-bg-color: #eee;

packages/list/src/main.scss

@@ -18,7 +18,8 @@
 }
 
 .fc-unthemed .fc-list-view {
-  border: 1px solid var(--unthemed-border-color);
+  border: 1px solid $fc-unthemed-border-color;
+  border: 1px solid var(--fc-unthemed-border-color, $fc-unthemed-border-color);
 }
 
 .fc .fc-list-table {
@@ -42,7 +43,8 @@
 }
 
 .fc-unthemed .fc-list-heading td {
-  background: var(--unthemed-muted-bg-color);
+  background: $fc-unthemed-muted-bg-color;
+  background: var(--fc-unthemed-muted-bg-color, $fc-unthemed-muted-bg-color);
 }
 
 .fc-ltr .fc-list-heading-main { float: left; }

scripts/lib/rollup-bundles.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const glob = require('glob')
 const nodeResolve = require('rollup-plugin-node-resolve')
+const postCss = require('rollup-plugin-postcss')
 const { renderBanner, isRelPath, SOURCEMAP_PLUGINS, WATCH_OPTIONS, EXTERNAL_BROWSER_GLOBALS, TEMPLATE_PLUGIN, onwarn, watchSubdirSassIncludes } = require('./rollup-util')
 const { pkgStructs, pkgStructHash, getCorePkgStruct, getNonPremiumBundle } = require('./pkg-struct')
 
@@ -52,6 +53,9 @@ function buildBundleConfig(pkgStruct, isDev) {
           paths: [ nodeModulesDir ] // for requiring other packages
         }
       }),
+      postCss({
+        extract: true // to separate .css file
+      }),
       ...(isDev ? SOURCEMAP_PLUGINS : [])
     ],
     watch: WATCH_OPTIONS,
@@ -72,6 +76,10 @@ if (exports.globalPlugins) {
 }
 `
 
+/*
+modules we don't want in the main bundle file but want as separate files in the same dir.
+can't have CSS.
+*/
 function buildNonBundleConfig(pkgStruct, bundleDistDir, isDev) {
   let banner = renderBanner(pkgStruct.jsonObj)
   let inputFile = path.join('tmp/tsc-output', pkgStruct.srcDir, 'main.js')

scripts/lib/rollup-modules.js

@@ -1,8 +1,9 @@
 const path = require('path')
+const { readFileSync } = require('fs')
 const nodeResolve = require('rollup-plugin-node-resolve')
 const sass = require('rollup-plugin-sass')
 const { renderBanner, isRelPath, isScssPath, TEMPLATE_PLUGIN, SOURCEMAP_PLUGINS, WATCH_OPTIONS, onwarn, watchSubdirSassIncludes } = require('./rollup-util')
-const { pkgStructs } = require('./pkg-struct')
+const { pkgStructs, getCorePkgStruct } = require('./pkg-struct')
 
 
 module.exports = function(isDev) {
@@ -11,6 +12,12 @@ module.exports = function(isDev) {
 }
 
 
+const coreVarsScssString = readFileSync(
+  path.join(getCorePkgStruct().srcDir, 'styles/_vars.scss'),
+  'utf8'
+)
+
+
 function buildPkgConfig(pkgStruct, isDev) {
   let banner = renderBanner(pkgStruct.jsonObj)
   let anyCss = false
@@ -37,6 +44,10 @@ function buildPkgConfig(pkgStruct, isDev) {
       nodeResolve(),
       sass({
         output: true, // to a .css file
+        options: {
+          // core already has sass vars imported, but inject them for other modules
+          data: (pkgStruct.isCore ? '' : coreVarsScssString) + '\n'
+        }
       }),
       TEMPLATE_PLUGIN,
       ...(isDev ? SOURCEMAP_PLUGINS : []),

scripts/lib/rollup-tests.js

@@ -5,6 +5,7 @@ const nodeResolve = require('rollup-plugin-node-resolve')
 const alias = require('rollup-plugin-alias')
 const commonjs = require('rollup-plugin-commonjs')
 const sourcemaps = require('rollup-plugin-sourcemaps')
+const postCss = require('rollup-plugin-postcss')
 const { EXTERNAL_BROWSER_GLOBALS, WATCH_OPTIONS, onwarn } = require('./rollup-util')
 
 
@@ -54,6 +55,9 @@ function buildMainConfig() {
         'package-tests': path.join(process.cwd(), 'tmp/tsc-output/packages/__tests__/src')
       }),
       commonjs(), // for fast-deep-equal import
+      postCss({
+        extract: true // to separate .css file
+      }),
       sourcemaps()
     ],
     watch: WATCH_OPTIONS,