watch scss differently

scripts/lib/rollup-bundles.js

@@ -5,7 +5,7 @@ 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 { renderBanner, isRelPath, SOURCEMAP_PLUGINS, WATCH_OPTIONS, EXTERNAL_BROWSER_GLOBALS, TEMPLATE_PLUGIN, onwarn, watchSubdirSassIncludes, isScssPath } = require('./rollup-util')
+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')
 
@@ -59,7 +59,6 @@ function buildBundleConfig(pkgStruct, isDev) {
     plugins: [
       alias(buildAliasMap()),
       nodeResolve(), // for requiring tslib. TODO: whitelist?
-      watchSubdirSassIncludes,
       // sass({
       //   output: true, // to a .css file
       //   options: {
@@ -69,7 +68,8 @@ function buildBundleConfig(pkgStruct, isDev) {
       // }),
       scss({
         output: true, // to a .css file
-        prefix: (pkgStruct.isCore ? '' : coreVarsScssString) + '\n'
+        prefix: (pkgStruct.isCore ? '' : coreVarsScssString) + '\n',
+        watch: path.join(process.cwd(), pkgStruct.srcDir, 'styles')
       }),
       ...(isDev ? SOURCEMAP_PLUGINS : []),
       {
@@ -124,7 +124,6 @@ function buildNonBundleConfig(pkgStruct, bundleDistDir, isDev) {
       sourcemap: isDev
     },
     plugins: [
-      watchSubdirSassIncludes,
       // if we don't provide this whitelist, all external packages get resolved and included :(
       nodeResolve({ only: [ 'tslib' ] }),
       TEMPLATE_PLUGIN,

scripts/lib/rollup-modules.js

@@ -3,7 +3,7 @@ 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, watchSubdirSassIncludes } = require('./rollup-util')
+const { renderBanner, isRelPath, isScssPath, TEMPLATE_PLUGIN, SOURCEMAP_PLUGINS, WATCH_OPTIONS, onwarn } = require('./rollup-util')
 const { pkgStructs, getCorePkgStruct } = require('./pkg-struct')
 
 
@@ -41,7 +41,6 @@ function buildPkgConfig(pkgStruct, isDev) {
       return !isRelPath(id)
     },
     plugins: [
-      watchSubdirSassIncludes,
       nodeResolve(),
       // sass({
       //   output: true, // to a .css file
@@ -52,7 +51,8 @@ function buildPkgConfig(pkgStruct, isDev) {
       // }),
       scss({
         output: true, // to a .css file
-        prefix: (pkgStruct.isCore ? '' : coreVarsScssString) + '\n'
+        prefix: (pkgStruct.isCore ? '' : coreVarsScssString) + '\n',
+        watch: path.join(process.cwd(), pkgStruct.srcDir, 'styles') // watch
       }),
       TEMPLATE_PLUGIN,
       ...(isDev ? SOURCEMAP_PLUGINS : []),

scripts/lib/rollup-util.js

@@ -81,25 +81,3 @@ exports.isScssPath = function(path) {
 exports.isStylePath = function(path) {
   return /\.s?css$/i.test(path)
 }
-
-
-// a rollup plugin
-// TODO: rename to watchSassIncludesInDir
-// TODO: only look at names like _*.scss
-exports.watchSubdirSassIncludes = {
-  transform(code, id) {
-    if (exports.isScssPath(id)) { // yuck
-
-      let allStyleFiles = glob.sync(
-        path.join(path.dirname(id), '**/*.{scss,sass,css}')
-      )
-      allStyleFiles = allStyleFiles.filter((path) => path !== id) // IMPORTANT TO remove the main file itself. already being watched
-      // console.log('ROOT', id, 'WATCHING', allStyleFiles)
-
-      for (let styleFile of allStyleFiles) {
-        this.addWatchFile(styleFile)
-      }
-    }
-    return null
-  }
-}