make sass compilation more reliable

gulpfile.js

@@ -29,6 +29,7 @@ exports.build = series(
   () => runTsc(),
   writeLocales, // needs tsc
   () => buildTestIndex(), // needs tsc. needs to happen before rollup
+  shellTask('npm:sass'),
   parallel(
     shellTask('npm:rollup'), // needs tsc, copied scss, generated locales
     writePkgLicenses,
@@ -44,7 +45,9 @@ exports.watch = series(
   series(
     writeLocales, // needs tsc
     () => buildTestIndex(true), // needs tsc. watch=true
+    shellTask('npm:sass'),
     parallel(
+      shellTask('npm:sass:watch'), // double work :(
       shellTask('npm:rollup:watch'), // needs tsc, copied scss, generated locales
       writePkgLicenses, // doesn't watch!
       writePkgReadmes, // doesn't watch!

package.json

@@ -33,6 +33,8 @@
     "tsc": "tsc -p tsconfig.json",
     "tsc:watch": "tsc -p tsconfig.json --sourceMap --watch",
     "tsc:dts": "tsc -p tsconfig.dts.json",
+    "sass": "sass --no-source-map `./scripts/sass-args.js`",
+    "sass:watch": "sass --watch `./scripts/sass-args.js`",
     "rollup": "rollup -c --environment BUILD:production",
     "rollup:watch": "rollup -c --environment BUILD:development --watch",
     "test": "concurrently --restart-tries 999 --prefix none 'karma start karma.config.js'",
@@ -93,9 +95,9 @@
     "rollup-plugin-node-resolve": "^4.0.1",
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-scss": "^2.1.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rrule": "^2.6.2",
+    "sass": "^1.26.3",
     "shelljs": "^0.8.3",
     "tslint": "^5.16.0",
     "tslint-config-standard": "^8.0.1",

packages/list/src/main.scss

@@ -1,4 +1,7 @@
 
+@import '../../core/src/styles/vars';
+
+
 /* List View
 --------------------------------------------------------------------------------------------------*/
 

scripts/lib/pkg-struct.js

@@ -48,6 +48,7 @@ function buildPkgStruct(pkgName, mainPath) {
   if (existsSync(jsonPath)) {
     let origJsonObj = require(jsonPath) // not yet combined with more root-level json
     let srcDir = path.join(dir, 'src') // relative to project root
+    let distDir = path.join(dir, 'dist') // relative to project root
     let tscDir = path.join('tmp/tsc-output', srcDir)
 
     return {
@@ -60,7 +61,7 @@ function buildPkgStruct(pkgName, mainPath) {
       srcDir,
       tscDir, // TODO: use elsewhere!!!
       tscMain: path.join(tscDir, path.basename(mainPath)), // TODO: use elsewhere!!! TODO: make an absolute version
-      distDir: path.join(dir, 'dist'), // relative to project root
+      distDir,
       jsonObj: buildPkgJsonObj(origJsonObj, isPremium, isBundle)
     }
   }

scripts/lib/rollup-bundles.js

@@ -1,10 +1,7 @@
 const path = require('path')
-const { readFileSync } = require('fs')
 const glob = require('glob')
 const nodeResolve = require('rollup-plugin-node-resolve')
-// const sass = require('rollup-plugin-sass')
-const scss = require('rollup-plugin-scss') // does correct ordering
-// const postCss = require('rollup-plugin-postcss') // was only used to extra non-sass CSS. obsolete
+const postCss = require('rollup-plugin-postcss')
 const { renderBanner, isRelPath, SOURCEMAP_PLUGINS, WATCH_OPTIONS, EXTERNAL_BROWSER_GLOBALS, TEMPLATE_PLUGIN, onwarn, isScssPath } = require('./rollup-util')
 const { pkgStructs, pkgStructHash, getCorePkgStruct, getNonPremiumBundle } = require('./pkg-struct')
 const alias = require('rollup-plugin-alias')
@@ -39,7 +36,6 @@ module.exports = function(isDev) {
 
 function buildBundleConfig(pkgStruct, isDev) {
   let banner = renderBanner(pkgStruct.jsonObj)
-  let anyCss = false
 
   return {
     input: path.join('tmp/tsc-output', pkgStruct.srcDir, 'main.js'), // TODO: use tscMain
@@ -48,36 +44,22 @@ function buildBundleConfig(pkgStruct, isDev) {
       file: path.join(pkgStruct.distDir, 'main.js'),
       name: EXTERNAL_BROWSER_GLOBALS['fullcalendar'], // TODO: make it a separarate const???
       banner,
-      sourcemap: isDev,
-      intro() {
-        if (anyCss) {
-          return 'import \'./main.css\';'
-        }
-        return ''
-      }
+      sourcemap: isDev
     },
     plugins: [
       alias(buildAliasMap()),
       nodeResolve(), // for requiring tslib. TODO: whitelist?
-      // 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'
-      //   }
-      // }),
-      scss({
-        output: true, // to a .css file
-        prefix: (pkgStruct.isCore ? '' : coreVarsScssString) + '\n',
-        watch: path.join(process.cwd(), pkgStruct.srcDir, 'styles')
+      postCss({
+        extract: true // to separate file
       }),
       ...(isDev ? SOURCEMAP_PLUGINS : []),
       {
-        resolveId(id, importer) { // TODO: not really DRY
+        resolveId(id, importer) { // TODO: not really DRY // TODO: use alias instead?
           if (isScssPath(id) && isRelPath(id) && importer.match('/tmp/tsc-output/')) {
             let resourcePath = importer.replace('/tmp/tsc-output/', '/')
-            resourcePath = path.dirname(resourcePath)
-            resourcePath = path.join(resourcePath, id)
+            resourcePath = path.dirname(resourcePath) // the directory of the file
+            resourcePath = resourcePath.replace(/\/src(\/|$)/, '/dist$1')
+            resourcePath = path.join(resourcePath, id.replace('.scss', '.css'))
             return { id: resourcePath, external: false }
           }
           return null
@@ -184,12 +166,6 @@ function buildLocalesAllConfig() {
 }
 
 
-const coreVarsScssString = readFileSync( // NOT DRY
-  path.join(getCorePkgStruct().srcDir, 'styles/_vars.scss'),
-  'utf8'
-)
-
-
 // TODO: use elsewhere
 // NOTE: can't use `entries` because rollup-plugin-alias is an old version
 function buildAliasMap() {

scripts/lib/rollup-modules.js

@@ -1,8 +1,6 @@
 const path = require('path')
 const { readFileSync } = require('fs')
 const nodeResolve = require('rollup-plugin-node-resolve')
-// const sass = require('rollup-plugin-sass')
-const scss = require('rollup-plugin-scss') // does correct ordering. BAD BUG: can't have SASS includes with same filename. FILE BUG
 const { renderBanner, isRelPath, isScssPath, TEMPLATE_PLUGIN, SOURCEMAP_PLUGINS, WATCH_OPTIONS, onwarn } = require('./rollup-util')
 const { pkgStructs, getCorePkgStruct } = require('./pkg-struct')
 
@@ -13,15 +11,8 @@ 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
 
   return {
     input: path.join('tmp/tsc-output', pkgStruct.srcDir, 'main.js'),
@@ -29,38 +20,19 @@ function buildPkgConfig(pkgStruct, isDev) {
       file: path.join(pkgStruct.distDir, 'main.js'),
       format: 'esm',
       banner,
-      sourcemap: isDev,
-      intro() {
-        if (anyCss) {
-          return 'import \'./main.css\';'
-        }
-        return ''
-      }
+      sourcemap: isDev
     },
     external(id) {
       return !isRelPath(id)
     },
     plugins: [
       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'
-      //   }
-      // }),
-      scss({
-        output: true, // to a .css file
-        prefix: (pkgStruct.isCore ? '' : coreVarsScssString) + '\n',
-        watch: path.join(process.cwd(), pkgStruct.srcDir, 'styles') // watch
-      }),
       TEMPLATE_PLUGIN,
       ...(isDev ? SOURCEMAP_PLUGINS : []),
       {
-        resolveId(id) { // TODO: not DRY
+        resolveId(id) {
           if (isScssPath(id) && isRelPath(id)) {
-            anyCss = true
-            return { id: path.join(process.cwd(), pkgStruct.srcDir, id), external: false }
+            return { id: './' + path.basename(id, '.scss') + '.css', external: true }
           }
           return null
         }

scripts/sass-args.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+
+const path = require('path')
+const glob = require('glob')
+const { pkgStructs } = require('./lib/pkg-struct')
+
+let pairs = []
+
+for (let pkgStruct of pkgStructs) {
+  let srcDirAbs = path.join(process.cwd(), pkgStruct.srcDir) // TODO: dont rely on us being at root
+  let distDirAbs = path.join(process.cwd(), pkgStruct.distDir)
+
+  let scssFilesnames = glob.sync('*.scss', { // .scss files in the root
+    cwd: srcDirAbs,
+    ignore: '**/_*.scss' // ignore includes
+  })
+
+  // TODO: when this script runs sass ourselves, make paths relative
+
+  for (let scssFilesname of scssFilesnames) {
+    pairs.push(
+      path.join(srcDirAbs, scssFilesname) +
+      ':' +
+      path.join(distDirAbs, scssFilesname.replace('.scss', '.css')) // TODO: more robust replacement
+    )
+  }
+}
+
+console.log(pairs.join(' '))