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
This commit is contained in:
Keen Yee Liau 2019-01-15 15:24:30 -08:00 committed by Alex Rickabaugh
parent a570fdf0f0
commit f59f18c13e
4 changed files with 67 additions and 6 deletions

View File

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

View File

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

View File

@ -60,6 +60,16 @@ function hasRoutingModule(host: Tree) {
return hasRouting; 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 { export default function(options: BazelWorkspaceOptions): Rule {
return (host: Tree, context: SchematicContext) => { return (host: Tree, context: SchematicContext) => {
if (!options.name) { if (!options.name) {
@ -103,6 +113,7 @@ export default function(options: BazelWorkspaceOptions): Rule {
...options, ...options,
'dot': '.', ...workspaceVersions, 'dot': '.', ...workspaceVersions,
routing: hasRoutingModule(host), routing: hasRoutingModule(host),
sass: hasSassStylesheet(host),
}), }),
move(appDir), move(appDir),
])); ]));

View File

@ -12,7 +12,7 @@ import {clean} from './index';
describe('Bazel-workspace Schematic', () => { describe('Bazel-workspace Schematic', () => {
const schematicRunner = const schematicRunner =
new SchematicTestRunner('@angular/bazel', require.resolve('../collection.json'), ); new SchematicTestRunner('@angular/bazel', require.resolve('../collection.json'));
const defaultOptions = { const defaultOptions = {
name: 'demo', name: 'demo',
}; };
@ -79,6 +79,46 @@ describe('Bazel-workspace Schematic', () => {
expect(content).toContain('workspace(name = "demo_project"'); 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', () => { describe('clean', () => {