compile css for modules

gulpfile.js

@@ -7,7 +7,6 @@ const { writePkgLicenses } = require('./scripts/lib/pkg-license')
 const { minifyJs, minifyCss } = require('./scripts/lib/minify') // combine into one task? make part of rollup?
 const { lint } = require('./scripts/lib/lint')
 const { archive } = require('./scripts/lib/archive')
-const { copyScss, watchScss } = require('./scripts/lib/pkg-scss') // watchScss is a bad name!
 const { writeLocales, watchLocales } = require('./scripts/lib/locales')
 
 const buildDts = exports.dts = series(
@@ -25,7 +24,6 @@ exports.minify = parallel(minifyJs, minifyCss)
 
 exports.build = series(
   writePkgJsons, // important for node-resolution
-  copyScss,
   shellTask('npm:tsc'),
   writeLocales, // needs tsc
   parallel(
@@ -39,7 +37,6 @@ exports.build = series(
 
 exports.watch = series(
   writePkgJsons, // important for node-resolution
-  copyScss,
   parallel(
     shellTask('npm:tsc:watch'),
     series(
@@ -50,8 +47,7 @@ exports.watch = series(
         writePkgLicenses, // doesn't watch!
         writePkgReadmes, // doesn't watch!
         buildDts, // doesn't watch!
-        watchLocales, // TODO: ignore initial
-        watchScss // TODO: ignore initial
+        watchLocales // TODO: ignore initial
       )
     )
   )

packages/list/src/main.scss

@@ -1,4 +1,3 @@
-@import '~@fullcalendar/core/styles/_vars.scss';
 
 /* List View
 --------------------------------------------------------------------------------------------------*/

packages/timegrid/src/main.scss

@@ -1,4 +1,4 @@
-@import '~@fullcalendar/core/styles/_vars.scss';
+
 @import './styles/time-grid';
 @import './styles/event';
 @import './styles/now-indicator';

scripts/lib/pkg-scss.js

@@ -1,26 +0,0 @@
-const { src, dest } = require('gulp')
-const rename = require('gulp-rename')
-const { watch } = require('./util')
-
-
-const GLOB = 'packages?(-premium)/*/src/**/*.scss'
-
-
-exports.copyScss = copyScss
-exports.watchScss = watchScss
-
-
-function copyScss() {
-  return src(GLOB)
-    .pipe(
-      rename(function(pathParts) {
-        pathParts.dirname = pathParts.dirname.replace(/\/src(\/|$)/, '/dist$1')
-      })
-    )
-    .pipe(dest('.'))
-}
-
-
-function watchScss() {
-  return watch(GLOB, copyScss)
-}

scripts/lib/rollup-bundles.js

@@ -1,8 +1,7 @@
 const path = require('path')
 const glob = require('glob')
 const nodeResolve = require('rollup-plugin-node-resolve')
-const sass = require('rollup-plugin-sass') // NOTE: rollup-plugin-*scss* confused include paths roots. file bug?
-const { renderBanner, isRelPath, SOURCEMAP_PLUGINS, WATCH_OPTIONS, EXTERNAL_BROWSER_GLOBALS, TEMPLATE_PLUGIN, stripScssTildeImporter, onwarn, watchSubdirSassIncludes } = require('./rollup-util')
+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')
 
 
@@ -53,11 +52,6 @@ function buildBundleConfig(pkgStruct, isDev) {
           paths: [ nodeModulesDir ] // for requiring other packages
         }
       }),
-      sass({
-        output: true, // to a .css file
-        includePaths: [ nodeModulesDir ], // for including scss in other packages
-        importer: stripScssTildeImporter
-      }),
       ...(isDev ? SOURCEMAP_PLUGINS : [])
     ],
     watch: WATCH_OPTIONS,

scripts/lib/rollup-modules.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const nodeResolve = require('rollup-plugin-node-resolve')
-const { renderBanner, isRelPath, isScssPath, TEMPLATE_PLUGIN, SOURCEMAP_PLUGINS, WATCH_OPTIONS, onwarn } = require('./rollup-util')
+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')
 
 
@@ -12,6 +13,7 @@ module.exports = function(isDev) {
 
 function buildPkgConfig(pkgStruct, isDev) {
   let banner = renderBanner(pkgStruct.jsonObj)
+  let anyCss = false
 
   return {
     input: path.join('tmp/tsc-output', pkgStruct.srcDir, 'main.js'),
@@ -19,15 +21,34 @@ function buildPkgConfig(pkgStruct, isDev) {
       file: path.join(pkgStruct.distDir, 'main.js'),
       format: 'esm',
       banner,
-      sourcemap: isDev
+      sourcemap: isDev,
+      intro() {
+        if (anyCss) {
+          return 'import \'./main.css\';'
+        }
+        return ''
+      }
     },
     external(id) {
-      return !isRelPath(id) || isScssPath(id)
+      return !isRelPath(id)
     },
     plugins: [
+      watchSubdirSassIncludes,
       nodeResolve(),
+      sass({
+        output: true, // to a .css file
+      }),
       TEMPLATE_PLUGIN,
-      ...(isDev ? SOURCEMAP_PLUGINS : [])
+      ...(isDev ? SOURCEMAP_PLUGINS : []),
+      {
+        resolveId(id) {
+          if (isScssPath(id) && isRelPath(id)) {
+            anyCss = true
+            return { id: path.join(process.cwd(), pkgStruct.srcDir, id), external: false }
+          }
+          return null
+        }
+      }
     ],
     watch: WATCH_OPTIONS,
     onwarn

scripts/lib/rollup-tests.js

@@ -3,10 +3,9 @@ const glob = require('glob')
 const multiEntry = require('rollup-plugin-multi-entry')
 const nodeResolve = require('rollup-plugin-node-resolve')
 const alias = require('rollup-plugin-alias')
-const scss = require('rollup-plugin-scss')
 const commonjs = require('rollup-plugin-commonjs')
 const sourcemaps = require('rollup-plugin-sourcemaps')
-const { EXTERNAL_BROWSER_GLOBALS, WATCH_OPTIONS, stripScssTildeImporter, onwarn } = require('./rollup-util')
+const { EXTERNAL_BROWSER_GLOBALS, WATCH_OPTIONS, onwarn } = require('./rollup-util')
 
 
 module.exports = function() {
@@ -54,10 +53,6 @@ function buildMainConfig() {
         // the alias to the non-premium tests. must be absolute
         'package-tests': path.join(process.cwd(), 'tmp/tsc-output/packages/__tests__/src')
       }),
-      scss({
-        includePaths: nodeModulesDirs,
-        importer: stripScssTildeImporter
-      }),
       commonjs(), // for fast-deep-equal import
       sourcemaps()
     ],

scripts/lib/rollup-util.js

@@ -68,11 +68,6 @@ exports.onwarn = function(warning, warn) {
 }
 
 
-exports.stripScssTildeImporter = function(path) { // for the rollup-scss plugin
-  return { file: path.replace(TILDE_PATH_RE, '') }
-}
-
-
 exports.isRelPath = function(path) {
   return REL_PATH_RE.test(path)
 }