chore(sass): fix module builds

- fixes module builds broken by PR #12112
- break module imports out into a separate file since it behaves differently than
  Sass variables.
- add a new `hoistScssAtUseStatements()` function to deduplicates @use statements
  and move them to the top as required by Sass.
- start testing the module and closure builds for every PR and don't let breaking
  changes get to `master` before we find them.
- update CircleCI NodeJS image and comments about where to find new images
- update caniuse-lite

Author: Splaktar

.circleci/config.yml

@@ -6,7 +6,7 @@
 # See http://blog.daemonl.com/2016/02/yaml.html
 # To validate changes, use an online parser, eg. http://yaml-online-parser.appspot.com/
 
-# Find the latest version here: https://github.com/CircleCI-Public/circleci-dockerfiles/tree/master/node/images
+# Find the latest version and SHA here: https://hub.docker.com/r/circleci/node/tags
 var_1: &docker_image circleci/node:14.16.1-browsers
 var_2: &cache_key angularjs-material-{{ checksum "package-lock.json" }}
 
@@ -44,7 +44,7 @@ var_7: &store_junit_test_results
     path: ./artifacts/junit
 
 # Branch filter that we can specify for jobs that should only run on publish branches. This filter
-# is used to ensure that not all upstream branches will be published as Github builds
+# is used to ensure that not all upstream branches will be published as GitHub builds
 # (e.g. revert branches, feature branches)
 var_8: &publish_branches_filter
   branches:
@@ -104,6 +104,24 @@ jobs:
       - run: npm run build
       - *save_cache
 
+  build_js_modules:
+    <<: *job_defaults
+    steps:
+      - checkout_and_rebase
+      - *restore_cache
+      - *npm_install
+      - run: npm run build:modules
+      - *save_cache
+
+  build_closure_modules:
+    <<: *job_defaults
+    steps:
+      - checkout_and_rebase
+      - *restore_cache
+      - *npm_install
+      - run: npm run build:closure
+      - *save_cache
+
   # ------------------------------------------------------------------------------------------
   # Jobs that run the unit tests on locally installed browsers (Chrome and Firefox headless).
   # The available browsers are included in the Docker image.
@@ -180,9 +198,17 @@ workflows:
       - test_angularjs_snapshot:
           requires:
             - build
+      - build_js_modules:
+          requires:
+            - build
+      - build_closure_modules:
+          requires:
+            - build
       - update_and_snapshot_docs:
             filters: *publish_branches_filter
             requires:
               - test_angularjs_1_7
               - test_angularjs_1_8
               - test_angularjs_snapshot
+              - build_js_modules
+              - build_closure_modules

gulp/config.js

@@ -94,7 +94,9 @@ module.exports = {
     'src/core/style/_mixins.scss'
   ],
   themeCore: 'src/core/style/core-theme.scss',
+  scssModules: 'src/core/style/_modules.scss',
   scssBaseFiles: [
+    'src/core/style/_modules.scss',
     'src/core/style/_variables.scss',
     'src/components/input/_input-variables.scss',
     'src/core/style/_mixins.scss',
@@ -105,12 +107,14 @@ module.exports = {
   ],
   scssServicesLayout: 'src/core/services/layout/layout.scss',
   scssLayoutFiles: [
+    'src/core/style/_modules.scss',
     'src/core/style/_variables.scss',
     'src/core/style/_mixins.scss',
     'src/core/style/layout.scss',
     'src/core/services/layout/layout.scss'
   ],
   scssLayoutAttributeFiles: [
+    'src/core/style/_modules.scss',
     'src/core/style/_variables.scss',
     'src/core/style/_mixins.scss',
     'src/core/services/layout/layout-attributes.scss'

gulp/util.js

@@ -202,12 +202,24 @@ function buildModule(module, opts) {
       return fs.readFileSync(fileName, 'utf8').toString();
     }).join('\n');
 
+    let sassModules;
+    // Don't add the Sass modules to core since they get automatically included already.
+    if (name === 'core') {
+      sassModules = '';
+    } else {
+      sassModules = fs.readFileSync(config.scssModules, 'utf8').toString();
+    }
+
     return lazypipe()
     .pipe(insert.prepend, baseStyles)
     .pipe(gulpif, /theme.scss/, rename(name + '-default-theme.scss'), concat(name + '.scss'))
     // Theme files are suffixed with the `default-theme.scss` string.
     // In some cases there are multiple theme SCSS files, which should be concatenated together.
     .pipe(gulpif, /default-theme.scss/, concat(name + '-default-theme.scss'))
+    // We can't prepend these earlier, or they get duplicated in a way that hoistScssAtUseStatements
+    // can't deduplicate them.
+    .pipe(insert.prepend, sassModules)
+    .pipe(utils.hoistScssAtUseStatements)
     .pipe(sass)
     .pipe(dedupeCss)
     .pipe(utils.autoprefix)
@@ -246,7 +258,7 @@ function filterNonCodeFiles() {
   });
 }
 
-// builds the theming related css and provides it as a JS const for angular
+// builds the theming related css and provides it as a JS const for AngularJS
 function themeBuildStream() {
   // Make a copy so that we don't modify the actual config that is used by other functions
   const paths = config.themeBaseFiles.slice(0);

package-lock.json

@@ -289,6 +289,45 @@ exports.hoistScssVariables = function() {
   });
 };
 
+/**
+ * Find Sass @use module imports and ensure that they are at the very top of the Sass prior to
+ * running it through the Sass compiler. This also deduplicates @use statements to avoid errors.
+ */
+exports.hoistScssAtUseStatements = function() {
+  return through2.obj(function(file, enc, next) {
+    const contents = file.contents.toString().split('\n');
+    let lastAtUseLineNumber = -1;
+    const atUseStatements = [];
+
+    let openCount = 0;
+    let closeCount = 0;
+    let openBlock = false;
+
+    for (let currentLineNumber = 0; currentLineNumber < contents.length; ++currentLineNumber) {
+      const line = contents[currentLineNumber];
+
+      if (openBlock || /^\s*@use\s/.test(line) && !/^\s+/.test(line)) {
+        openCount += (line.match(/\(/g) || []).length;
+        closeCount += (line.match(/\)/g) || []).length;
+        openBlock = openCount !== closeCount;
+        // Don't move statements from line 0 to line 0.
+        if (currentLineNumber > 0) {
+          const atUseStatement = contents.splice(currentLineNumber, 1)[0];
+          // Don't write duplicate @use statements to avoid
+          // 'There's already a module with namespace x' errors.
+          if (!atUseStatements.includes(atUseStatement)) {
+            atUseStatements.push(atUseStatement);
+            contents.splice(++lastAtUseLineNumber, 0, atUseStatement);
+          }
+        }
+      }
+    }
+    file.contents = Buffer.from(contents.join('\n'));
+    this.push(file);
+    next();
+  });
+};
+
 exports.cssToNgConstant = function(ngModule, factoryName) {
   return through2.obj(function(file, enc, next) {
 

scripts/gulp-utils.js

@@ -0,0 +1 @@
+@use "sass:math";

src/core/style/_modules.scss

@@ -1,4 +1,3 @@
-@use "sass:math";
 // Typography
 // ------------------------------
 $font-family: Roboto, 'Helvetica Neue', sans-serif !default;