[elements-sk] Delete hacks to automatically include stylesheets.
Successs criteria: This CL should not cause any Gold diffs.
Bug: skia:14161
Change-Id: Ieacdb62fc94687bf333333847d1810e263b62dc3
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/654406
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Commit-Queue: Leandro Lovisolo <lovisolo@google.com>
diff --git a/infra-sk/BUILD.bazel b/infra-sk/BUILD.bazel
index 3f4fdfb..f2dd4c1 100644
--- a/infra-sk/BUILD.bazel
+++ b/infra-sk/BUILD.bazel
@@ -1,38 +1,5 @@
load("//infra-sk:index.bzl", "sass_library")
-package(default_visibility = ["//visibility:public"])
-
-#keep
-sass_library(
- name = "elements-sk_scss",
- # This list of files was generated by running the following command from the repository's root
- # directory:
- #
- # $ find node_modules/elements-sk -name *.scss | sed -E "s/(.*)/@npm\/\/:\1/" | sort
- #
- # Please update if the files in the elements-sk NPM package ever change.
- srcs = [
- "@npm//:node_modules/elements-sk/checkbox-sk/checkbox-sk.scss",
- "@npm//:node_modules/elements-sk/collapse-sk/collapse-sk.scss",
- "@npm//:node_modules/elements-sk/colors.scss",
- "@npm//:node_modules/elements-sk/error-toast-sk/error-toast-sk.scss",
- "@npm//:node_modules/elements-sk/icon/icon-sk.scss",
- "@npm//:node_modules/elements-sk/multi-select-sk/multi-select-sk.scss",
- "@npm//:node_modules/elements-sk/nav-links-sk/nav-links-sk.scss",
- "@npm//:node_modules/elements-sk/radio-sk/radio-sk.scss",
- "@npm//:node_modules/elements-sk/select-sk/select-sk.scss",
- "@npm//:node_modules/elements-sk/spinner-sk/spinner-sk.scss",
- "@npm//:node_modules/elements-sk/styles/buttons/buttons.scss",
- "@npm//:node_modules/elements-sk/styles/select/select.scss",
- "@npm//:node_modules/elements-sk/styles/table/table.scss",
- "@npm//:node_modules/elements-sk/tabs-panel-sk/tabs-panel-sk.scss",
- "@npm//:node_modules/elements-sk/tabs-sk/tabs-sk.scss",
- "@npm//:node_modules/elements-sk/themes/color-palette.scss",
- "@npm//:node_modules/elements-sk/themes/themes.scss",
- "@npm//:node_modules/elements-sk/toast-sk/toast-sk.scss",
- ],
-)
-
sass_library(
name = "themes_sass_lib",
srcs = ["themes.scss"],
diff --git a/infra-sk/esbuild/esbuild.config.mjs b/infra-sk/esbuild/esbuild.config.mjs
index f00eaa4..977bcff 100644
--- a/infra-sk/esbuild/esbuild.config.mjs
+++ b/infra-sk/esbuild/esbuild.config.mjs
@@ -1,42 +1,8 @@
/** Configuration module for esbuild. */
-/**
- * An ad-hoc esbuild plugin that ignores any *.scss or *.css imports from JavaScript or TypeScript.
- *
- * Without this, esbuild chokes when it sees Webpack-style imports such as:
- *
- * import './styles.scss';
- *
- * When this plugin sees a *.scss or *.css import, it tells esbuild to resolve it as an empty
- * JavaScript file, which is effectively the same as pretending it was never there to begin with.
- *
- * We should delete this plugin once we've cleaned up all Webpack-style CSS/SCSS imports from
- * TypeScript files.
- *
- * Inspired by https://github.com/evanw/esbuild/issues/808#issuecomment-806086039.
- *
- * See https://esbuild.github.io/plugins for reference.
- */
-const ignoreScssImportsPlugin = {
- name: 'ignore-scss-imports',
- setup(build) {
- build.onResolve({ filter: /\.(scss|css)$/ }, args => ({
- path: args.path,
- namespace: 'ignored-scss-imports-ns',
- }))
- build.onLoad({ filter: /.*/, namespace: 'ignored-scss-imports-ns' }, async (args) => {
- return {
- contents: '',
- loader: 'js',
- }
- })
- },
-};
-
export default {
define: {
// Prevent "global is not defined" errors. See https://github.com/evanw/esbuild/issues/73.
"global": "window",
},
- plugins: [ignoreScssImportsPlugin],
}
diff --git a/infra-sk/generate_elements_sk_scss_imports/BUILD.bazel b/infra-sk/generate_elements_sk_scss_imports/BUILD.bazel
deleted file mode 100644
index 6a4afa9..0000000
--- a/infra-sk/generate_elements_sk_scss_imports/BUILD.bazel
+++ /dev/null
@@ -1,27 +0,0 @@
-load("//bazel/go:go_test.bzl", "go_test")
-load("@io_bazel_rules_go//go:def.bzl", "go_binary", "go_library")
-
-go_library(
- name = "generate_elements_sk_scss_imports_lib",
- srcs = ["generate_elements_sk_scss_imports.go"],
- importpath = "go.skia.org/infra/infra-sk/generate_elements_sk_scss_imports",
- visibility = ["//visibility:private"],
- deps = [
- "//bazel/gazelle/frontend/parsers",
- "//go/sklog",
- "//go/util",
- ],
-)
-
-go_binary(
- name = "generate_elements_sk_scss_imports",
- embed = [":generate_elements_sk_scss_imports_lib"],
- visibility = ["//visibility:public"],
-)
-
-go_test(
- name = "generate_elements_sk_scss_imports_test",
- srcs = ["generate_elements_sk_scss_imports_test.go"],
- embed = [":generate_elements_sk_scss_imports_lib"],
- deps = ["@com_github_stretchr_testify//assert"],
-)
diff --git a/infra-sk/generate_elements_sk_scss_imports/generate_elements_sk_scss_imports.go b/infra-sk/generate_elements_sk_scss_imports/generate_elements_sk_scss_imports.go
deleted file mode 100644
index 5e30998..0000000
--- a/infra-sk/generate_elements_sk_scss_imports/generate_elements_sk_scss_imports.go
+++ /dev/null
@@ -1,126 +0,0 @@
-// This program takes as inputs one or more TypeScript source files, determines whether they depend
-// on any elements-sk modules, and writes to standard output a Sass stylesheet that imports the
-// stylesheets required by any such elements-sk module.
-//
-// This program is used by the sk_element and sk_page Bazel rules to automatically generate a Sass
-// stylesheet with any necessary elements-sk imports. This is necessary because the underlying
-// Bazel rules ignore Webpack-style Sass imports from TypeScript files.
-package main
-
-import (
- "fmt"
- "io/ioutil"
- "os"
- "path/filepath"
- "sort"
- "strings"
-
- "go.skia.org/infra/bazel/gazelle/frontend/parsers"
- "go.skia.org/infra/go/sklog"
- "go.skia.org/infra/go/util"
-)
-
-// knownStylesheets is the list of Sass stylesheets we would like to import automatically based on
-// the TypeScript imports found in a TypeScript source file.
-//
-// This list can be regenerated with the following command, which must be run from an elements-sk
-// repository checkout:
-//
-// $ find src | grep \.scss$ | sed -E "s/^src/elements-sk/" | sort
-var knownStylesheets = []string{
- "elements-sk/checkbox-sk/checkbox-sk.scss",
- "elements-sk/collapse-sk/collapse-sk.scss",
- "elements-sk/colors.scss",
- "elements-sk/error-toast-sk/error-toast-sk.scss",
- "elements-sk/icon/icon-sk.scss",
- "elements-sk/multi-select-sk/multi-select-sk.scss",
- "elements-sk/nav-links-sk/nav-links-sk.scss",
- "elements-sk/radio-sk/radio-sk.scss",
- "elements-sk/select-sk/select-sk.scss",
- "elements-sk/spinner-sk/spinner-sk.scss",
- "elements-sk/styles/buttons/buttons.scss",
- "elements-sk/styles/select/select.scss",
- "elements-sk/styles/table/table.scss",
- "elements-sk/tabs-panel-sk/tabs-panel-sk.scss",
- "elements-sk/tabs-sk/tabs-sk.scss",
- "elements-sk/themes/color-palette.scss",
- "elements-sk/themes/themes.scss",
- "elements-sk/toast-sk/toast-sk.scss",
-}
-
-// elementsSkStylesheetsFromTsImport takes the verbatim path of a TypeScript import statement, and
-// if the path corresponds to an elements-sk module, returns the list of Sass stylesheets required
-// by the elements-sk module, or nil otherwise.
-func elementsSkStylesheetsFromTsImport(tsImport string) []string {
- var stylesheets []string
-
- // Heuristic: if a TypeScript import is prefixed by the parent directory of a known
- // stylesheet, we assume that the stylesheet must be imported as well.
- //
- // Example input TypeScript source file:
- //
- // // Resolves to "elements-sk/checkbox-sk/checkbox-sk.ts".
- // import 'elements-sk/checkbox-sk/checkbox-sk';
- //
- // // Resolves to "elements-sk/styles/buttons/index.ts".
- // import 'elements-sk/styles/buttons';
- //
- // Expected Sass imports:
- //
- // @import 'node_modules/elements-sk/checkbox-sk/checkbox-sk.scss';
- // @import 'node_modules/elements-sk/styles/buttons/buttons.scss';
- for _, stylesheet := range knownStylesheets {
- // Exclude top-level stylesheets (e.g. "elements-sk/colors.scss").
- if filepath.Dir(stylesheet) == "elements-sk" {
- continue
- }
-
- if strings.HasPrefix(tsImport, filepath.Dir(stylesheet)) {
- stylesheets = append(stylesheets, stylesheet)
- }
- }
-
- // In addition, we must account for dependencies between components. There are only a few
- // such dependencies, and they change infrequently, so we handle them in an ad-hoc way.
- if strings.HasPrefix(tsImport, "elements-sk/error-toast-sk") {
- stylesheets = append(stylesheets, "elements-sk/toast-sk/toast-sk.scss")
- }
- if strings.HasPrefix(tsImport, "elements-sk/radio-sk") {
- stylesheets = append(stylesheets, "elements-sk/checkbox-sk/checkbox-sk.scss")
- }
-
- return stylesheets
-}
-
-func main() {
- tsSources := os.Args[1:]
- if len(tsSources) == 0 {
- sklog.Fatalf("Usage: %s <one or more TypeScript source files>", os.Args[0])
- }
-
- var outputSassImports []string
-
- // Iterate over all the input files.
- for _, tsSource := range tsSources {
- // Read in the current TypeScript source file, and extract the paths of its import statements.
- b, err := ioutil.ReadFile(tsSource)
- if err != nil {
- sklog.Fatalf("Error while reading file %q: %v", tsSource, err)
- }
- tsImports := parsers.ParseTSImports(string(b))
-
- // Map each TypeScript import to zero or more elements-sk Sass imports.
- for _, tsImport := range tsImports {
- for _, stylesheet := range elementsSkStylesheetsFromTsImport(tsImport) {
- outputSassImports = append(outputSassImports, fmt.Sprintf("@import 'node_modules/%s';", stylesheet))
- }
- }
- }
-
- // Print out the Sass import statements for any required elements-sk stylesheets.
- outputSassImports = util.SSliceDedup(outputSassImports)
- sort.Strings(outputSassImports)
- for _, imp := range outputSassImports {
- fmt.Println(imp)
- }
-}
diff --git a/infra-sk/generate_elements_sk_scss_imports/generate_elements_sk_scss_imports_test.go b/infra-sk/generate_elements_sk_scss_imports/generate_elements_sk_scss_imports_test.go
deleted file mode 100644
index 2bd87e6..0000000
--- a/infra-sk/generate_elements_sk_scss_imports/generate_elements_sk_scss_imports_test.go
+++ /dev/null
@@ -1,25 +0,0 @@
-package main
-
-import (
- "testing"
-
- "github.com/stretchr/testify/assert"
-)
-
-func TestElementsSkStylesheetsFromTsImport_NotAnElementsSkImport_ReturnsEmptySlice(t *testing.T) {
- assert.Empty(t, elementsSkStylesheetsFromTsImport("path/to/foo"))
-}
-
-func TestElementsSkStylesheetsFromTsImport_ModuleWithNoDeps_ReturnsOneStylesheet(t *testing.T) {
- expected := []string{"elements-sk/collapse-sk/collapse-sk.scss"}
- assert.ElementsMatch(t, expected, elementsSkStylesheetsFromTsImport("elements-sk/collapse-sk"))
- assert.ElementsMatch(t, expected, elementsSkStylesheetsFromTsImport("elements-sk/collapse-sk/collapse-sk"))
-}
-
-func TestElementsSkStylesheetsFromTsImport_ModuleWithDeps_ReturnsMultipleStylesheets(t *testing.T) {
- expected := []string{
- "elements-sk/error-toast-sk/error-toast-sk.scss",
- "elements-sk/toast-sk/toast-sk.scss",
- }
- assert.ElementsMatch(t, expected, elementsSkStylesheetsFromTsImport("elements-sk/error-toast-sk"))
-}
diff --git a/infra-sk/index.bzl b/infra-sk/index.bzl
index 8a7c121..012435f 100644
--- a/infra-sk/index.bzl
+++ b/infra-sk/index.bzl
@@ -33,12 +33,11 @@
This is just a convenience macro that generates the ts_library and sass_library targets
required to build a custom element.
- This macro generates a "ghost" Sass stylesheet which includes `@import` statements for each
- sk_element dependency (sk_element_deps argument), and for any elements-sk modules imported from
- the TypeScript sources (ts_srcs argument). This ghost stylesheet will be included in the CSS
+ This macro generates a "ghost" Sass stylesheet with `@import` statements for each sk_element
+ dependency (sk_element_deps argument). This ghost stylesheet will be included in the CSS
bundles produced by any sk_page targets that depend on this element (directly or transitively).
It is therefore *not* necessary to explicitly import the stylesheets of any depended on
- sk_elements or elements-sk modules.
+ sk_elements.
Args:
name: The name of the target.
@@ -52,36 +51,17 @@
visibility: Visibility of the generated ts_library and sass_library targets.
"""
- # Generate a Sass stylesheet with import statements for each elements-sk module required by the
- # TypeScript sources (ts_srcs argument).
- generate_sass_stylesheet_with_elements_sk_imports_from_typescript_sources(
- name = name + "_elements_sk_deps_scss",
- ts_srcs = ts_srcs,
- scss_output_file = name + "__generated_elements_sk_deps.scss",
- )
-
- # Add all elements-sk styles as dependencies to satisfy the imports from the Sass stylesheet
- # generated in the previous step.
- elements_sk_scss_label = "//infra-sk:elements-sk_scss"
- if elements_sk_scss_label not in sass_deps:
- # We cannot use sass_deps.append() or sass_deps += [...] because that causes the following
- # Starlark error:
- #
- # Error: trying to mutate a frozen list value
- sass_deps = sass_deps + [elements_sk_scss_label]
-
# Generate a "ghost" Sass entry-point stylesheet with import statements for the following
# files:
#
# - Each file in the sass_srcs argument.
- # - The generated Sass stylesheet with elements-sk imports.
# - The "ghost" entry-point stylesheets of each sk_element in the sk_element_deps argument.
#
# This stylesheet will be included in the CSS bundles generated by any sk_page targets that
# depend on this sk_element directly or transitively.
generate_sass_stylesheet_with_imports(
name = name + "_ghost_entrypoint_scss",
- scss_files_to_import = sass_srcs + [name + "_elements_sk_deps_scss"] +
+ scss_files_to_import = sass_srcs +
[
make_label_target_explicit(dep) + "_ghost_entrypoint_scss"
for dep in sk_element_deps
@@ -107,32 +87,11 @@
sass_library(
name = name + "_styles",
- srcs = sass_srcs + [
- name + "_elements_sk_deps_scss",
- name + "_ghost_entrypoint_scss",
- ],
+ srcs = sass_srcs + [name + "_ghost_entrypoint_scss"],
deps = all_sass_deps,
visibility = visibility,
)
-def generate_sass_stylesheet_with_elements_sk_imports_from_typescript_sources(
- name,
- ts_srcs,
- scss_output_file):
- """Generates a .scss file with `@import` statements for the elements-sk imports in the ts_srcs.
-
- Args:
- name: The name of the target.
- ts_srcs: A list of .ts files.
- scss_output_file: Name of the .scss file to generate.
- """
- native.genrule(
- name = name,
- srcs = ts_srcs + ["//infra-sk/generate_elements_sk_scss_imports"],
- outs = [scss_output_file],
- cmd = "$(location //infra-sk/generate_elements_sk_scss_imports) $(SRCS) > $@",
- )
-
def generate_sass_stylesheet_with_imports(name, scss_files_to_import, scss_output_file, visibility = None):
"""Generates a .scss file with one `@import` statement for each file in scss_files_to_import.
@@ -468,31 +427,10 @@
cmd = "touch $@",
)
- # Generate a Sass stylesheet with any elements-sk imports required by the TypeScript
- # entry-point file.
- generate_sass_stylesheet_with_elements_sk_imports_from_typescript_sources(
- name = name + "_elements_sk_deps_scss",
- ts_srcs = [ts_entry_point],
- scss_output_file = name + "__generated_elements_sk_deps.scss",
- )
-
- # Add all elements-sk styles as dependencies to satisfy the imports from the Sass stylesheet
- # generated in the previous step.
- elements_sk_scss_label = "//infra-sk:elements-sk_scss"
- if elements_sk_scss_label not in sass_deps:
- # We cannot use sass_deps.append() or sass_deps += [...] because that causes the following
- # Starlark error:
- #
- # Error: trying to mutate a frozen list value
- sass_deps = sass_deps + [elements_sk_scss_label]
-
# Create a sass_library including the scss_entry_point file, and all the Sass dependencies.
sass_library(
name = name + "_styles",
- srcs = [
- scss_entry_point,
- name + "_elements_sk_deps_scss",
- ],
+ srcs = [scss_entry_point],
deps = all_sass_deps,
)
@@ -500,14 +438,12 @@
# files:
#
# - This page's Sass entry-point file (scss_entry_point argument).
- # - The generated Sass stylesheet with elements-sk imports.
# - The "ghost" entry-point stylesheets of each sk_element in the sk_element_deps argument.
#
# We will use this generated stylesheet as the entry-points for the sass_binaries below.
generate_sass_stylesheet_with_imports(
name = name + "_ghost_entrypoint_scss",
- scss_files_to_import = ([scss_entry_point] if scss_entry_point else []) +
- [name + "_elements_sk_deps_scss"] +
+ scss_files_to_import = [scss_entry_point] +
[
make_label_target_explicit(dep) + "_ghost_entrypoint_scss"
for dep in sk_element_deps
