feat(bazel): Add support for SASS (#28167)

This commit adds the appropriate rules to the WORKSPACE for a project
that requires SASS support.

PR Close #28167

packages/bazel/src/schematics/bazel-workspace/files/WORKSPACE.template

@@ -41,7 +41,7 @@ http_archive(
     url = "https://registry.yarnpkg.com/rxjs/-/rxjs-%s.tgz" % RXJS_VERSION,
     strip_prefix = "package/src",
 )
-
+<% if (sass) { %>
 # Rules for compiling sass
 RULES_SASS_VERSION = "<%= RULES_SASS_VERSION %>"
 http_archive(
@@ -49,7 +49,7 @@ http_archive(
     url = "https://github.com/bazelbuild/rules_sass/archive/%s.zip" % RULES_SASS_VERSION,
     strip_prefix = "rules_sass-%s" % RULES_SASS_VERSION,
 )
-
+<% } %>
 ####################################
 # Load and install our dependencies downloaded above.
 
@@ -85,9 +85,9 @@ browser_repositories(
 
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
 ts_setup_workspace()
-
+<% if (sass) { %>
 load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
 sass_repositories()
-
+<% } %>
 load("@angular//:index.bzl", "ng_setup_workspace")
 ng_setup_workspace()

packages/bazel/src/schematics/bazel-workspace/files/src/BUILD.bazel.template

@@ -5,7 +5,17 @@ load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test_suit
 load("@build_bazel_rules_nodejs//:defs.bzl", "rollup_bundle", "history_server")
 load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+<% if (sass) { %>load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 
+[
+sass_binary(
+    name = "style_" + x,
+    src = x,
+    deps = [],
+)
+for x in glob(["**/*.scss"])
+]
+<% } %>
 ng_module(
     name = "src",
     srcs = glob(
@@ -20,7 +30,7 @@ ng_module(
     assets = glob([
       "**/*.css",
       "**/*.html",
-    ]),
+    ])<% if (sass) { %> + [":style_" + x for x in glob(["**/*.scss"])]<% } %>,
     deps = [
         "@angular//packages/core",
         "@angular//packages/platform-browser",<% if (routing) { %>

packages/bazel/src/schematics/bazel-workspace/index.ts

@@ -60,6 +60,16 @@ function hasRoutingModule(host: Tree) {
   return hasRouting;
 }
 
+/**
+ * Returns true if project uses SASS stylesheets, false otherwise.
+ */
+function hasSassStylesheet(host: Tree) {
+  let hasSass = false;
+  // The proper extension for SASS is .scss
+  host.visit((file: string) => { hasSass = hasSass || file.endsWith('.scss'); });
+  return hasSass;
+}
+
 export default function(options: BazelWorkspaceOptions): Rule {
   return (host: Tree, context: SchematicContext) => {
     if (!options.name) {
@@ -103,6 +113,7 @@ export default function(options: BazelWorkspaceOptions): Rule {
         ...options,
         'dot': '.', ...workspaceVersions,
         routing: hasRoutingModule(host),
+        sass: hasSassStylesheet(host),
       }),
       move(appDir),
     ]));

packages/bazel/src/schematics/bazel-workspace/index_spec.ts

@@ -12,7 +12,7 @@ import {clean} from './index';
 
 describe('Bazel-workspace Schematic', () => {
   const schematicRunner =
-      new SchematicTestRunner('@angular/bazel', require.resolve('../collection.json'), );
+      new SchematicTestRunner('@angular/bazel', require.resolve('../collection.json'));
   const defaultOptions = {
     name: 'demo',
   };
@@ -79,6 +79,46 @@ describe('Bazel-workspace Schematic', () => {
       expect(content).toContain('workspace(name = "demo_project"');
     });
   });
+
+  describe('SASS', () => {
+    let host = new UnitTestTree(new HostTree);
+    beforeAll(() => {
+      host.create('/demo/src/app/app.component.scss', '');
+      expect(host.files).toContain('/demo/src/app/app.component.scss');
+      const options = {...defaultOptions};
+      host = schematicRunner.runSchematic('bazel-workspace', options, host);
+      expect(host.files).toContain('/demo/WORKSPACE');
+      expect(host.files).toContain('/demo/src/BUILD.bazel');
+    });
+
+    it('should download rules_sass in WORKSPACE', () => {
+      const content = host.readContent('/demo/WORKSPACE');
+      expect(content).toContain('RULES_SASS_VERSION');
+      expect(content).toContain('io_bazel_rules_sass');
+    });
+
+    it('should load sass_repositories in WORKSPACE', () => {
+      const content = host.readContent('/demo/WORKSPACE');
+      expect(content).toContain(
+          'load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")');
+      expect(content).toContain('sass_repositories()');
+    });
+
+    it('should add sass_binary rules in src/BUILD', () => {
+      const content = host.readContent('/demo/src/BUILD.bazel');
+      expect(content).toContain('load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")');
+      expect(content).toMatch(/sass_binary\((.*\n)+\)/);
+    });
+
+    it('should add SASS targets to assets of ng_module in src/BUILD', () => {
+      const content = host.readContent('/demo/src/BUILD.bazel');
+      expect(content).toContain(`
+    assets = glob([
+      "**/*.css",
+      "**/*.html",
+    ]) + [":style_" + x for x in glob(["**/*.scss"])],`);
+    });
+  });
 });
 
 describe('clean', () => {