blob: afb8c7f4b83e82f8634c1b348c6f7c62a9c2a8c2 [file] [log] [blame]
"""This module provides a macro to support Webpack-style SCSS imports for elements-sk styles.
This module will be removed once the migration off Webpack is complete.
"""
def generate_tilde_prefixed_elements_sk_scss_files(name):
"""Copies @npm//:node_modules/elements-sk/**/*.scss files into //_bazel_bin/~elemnts-sk.
This macro adds support for tilde-prefixed Sass imports of elements-sk styles, e.g.:
```
@import '~elements-sk/themes/themes';
```
The output of this macro is a filegroup with the generated tilde-prefixed SCSS files. Do not use
directly; client code should use the //infra-sk:elements-sk_scss sass_library target instead.
This hack is necessary to maintain compatibility with the Webpack build, which uses the
css-loader plugin to inline CSS imports. Said plugin adds all NPM packages to the Sass compiler
import path, prefixed with "~". See https://webpack.js.org/loaders/css-loader/#import for more.
This macro will be removed once we're completely off Webpack, and all our SCSS imports have been
rewritten using the conventional (i.e. non-Webpack) syntax.
Args:
name: Name of the output filegroup which will contain the tilde-prefixed SCSS files.
"""
scss_files = [
# To regenerate this list, please run the following Bash command:
#
# $ find node_modules/elements-sk -name "*.scss" \
# | sed -E "s/(.*)/@npm\/\/:\\1/" \
# | sort
"@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",
]
tilde_prefixed_scss_files = [
f.replace("@npm//:node_modules/elements-sk", "~elements-sk")
for f in scss_files
]
# Copy each SCSS file into its tilde-prefixed location.
for scss_file, tilde_prefixed_scss_file in zip(scss_files, tilde_prefixed_scss_files):
native.genrule(
name = tilde_prefixed_scss_file.replace("/", "__"), # No slashes on build target names.
srcs = [scss_file],
outs = [tilde_prefixed_scss_file],
cmd = "cp $< $@",
)
# Do not use directly. Use //infra-sk:elements-sk_scss instead, which includes these files.
native.filegroup(
name = name,
srcs = tilde_prefixed_scss_files,
visibility = ["//infra-sk:__pkg__"],
)