experiment with making bootstrap scss available as a library

This will allow us to import the local sass lib, then use something
like the following in our sass:

@import "ts/bootstrap/functions";
@import "ts/bootstrap/variables";
@import "ts/bootstrap/mixins";
@import "ts/bootstrap/helpers";
@import "ts/bootstrap/dropdown";
@import "ts/bootstrap/forms";
@import "ts/bootstrap/buttons";
@import "ts/bootstrap/button-group";
 
I'm currently trialing it out on a prototype reimplementation of the
deck options screen. Unfortunately bootstrap don't seem to support the
@use syntax, so we need to @import everything
This commit is contained in:
Damien Elmes 2021-04-14 21:20:23 +10:00
parent 4a406192fa
commit 646b58a1a9
2 changed files with 33 additions and 9 deletions

23
ts/bootstrap/BUILD.bazel Normal file
View file

@ -0,0 +1,23 @@
load("//ts:vendor.bzl", "pkg_from_name", "vendor_js_lib")
load("@io_bazel_rules_sass//:defs.bzl", "sass_library")
# copy bootstrap sass files in
vendor_js_lib(
name = "sass-sources",
include = [
"scss",
],
base = "external/npm/node_modules/bootstrap/",
pkg = pkg_from_name("bootstrap"),
strip_prefix = "scss/",
visibility = ["//visibility:private"],
)
# wrap them in a library
sass_library(
name = "scss",
srcs = [
":sass-sources",
],
visibility = ["//visibility:public"],
)

View file

@ -26,7 +26,7 @@ vendor_js_lib = rule(
}, },
) )
def _pkg_from_name(name): def pkg_from_name(name):
return "@npm//{0}:{0}__files".format(name) return "@npm//{0}:{0}__files".format(name)
# #
@ -37,7 +37,7 @@ def _pkg_from_name(name):
def copy_jquery(name = "jquery", visibility = ["//visibility:public"]): def copy_jquery(name = "jquery", visibility = ["//visibility:public"]):
vendor_js_lib( vendor_js_lib(
name = name, name = name,
pkg = _pkg_from_name(name), pkg = pkg_from_name(name),
include = [ include = [
"dist/jquery.min.js", "dist/jquery.min.js",
], ],
@ -48,7 +48,7 @@ def copy_jquery(name = "jquery", visibility = ["//visibility:public"]):
def copy_jquery_ui(name = "jquery-ui", visibility = ["//visibility:public"]): def copy_jquery_ui(name = "jquery-ui", visibility = ["//visibility:public"]):
vendor_js_lib( vendor_js_lib(
name = name, name = name,
pkg = _pkg_from_name("jquery-ui-dist"), pkg = pkg_from_name("jquery-ui-dist"),
base = "external/npm/node_modules/jquery-ui-dist/", base = "external/npm/node_modules/jquery-ui-dist/",
include = [ include = [
"jquery-ui.min.js", "jquery-ui.min.js",
@ -59,7 +59,7 @@ def copy_jquery_ui(name = "jquery-ui", visibility = ["//visibility:public"]):
def copy_protobufjs(name = "protobufjs", visibility = ["//visibility:public"]): def copy_protobufjs(name = "protobufjs", visibility = ["//visibility:public"]):
vendor_js_lib( vendor_js_lib(
name = name, name = name,
pkg = _pkg_from_name(name), pkg = pkg_from_name(name),
include = [ include = [
"dist/protobuf.min.js", "dist/protobuf.min.js",
], ],
@ -70,7 +70,7 @@ def copy_protobufjs(name = "protobufjs", visibility = ["//visibility:public"]):
def copy_mathjax(name = "mathjax", visibility = ["//visibility:public"]): def copy_mathjax(name = "mathjax", visibility = ["//visibility:public"]):
vendor_js_lib( vendor_js_lib(
name = name, name = name,
pkg = _pkg_from_name(name), pkg = pkg_from_name(name),
include = [ include = [
"es5/tex-chtml.js", "es5/tex-chtml.js",
"es5/input/tex/extensions", "es5/input/tex/extensions",
@ -88,7 +88,7 @@ def copy_mathjax(name = "mathjax", visibility = ["//visibility:public"]):
def copy_css_browser_selector(name = "css-browser-selector", visibility = ["//visibility:public"]): def copy_css_browser_selector(name = "css-browser-selector", visibility = ["//visibility:public"]):
vendor_js_lib( vendor_js_lib(
name = name, name = name,
pkg = _pkg_from_name(name), pkg = pkg_from_name(name),
include = [ include = [
"css_browser_selector.min.js", "css_browser_selector.min.js",
], ],
@ -98,18 +98,19 @@ def copy_css_browser_selector(name = "css-browser-selector", visibility = ["//vi
def copy_bootstrap_js(name = "bootstrap-js", visibility = ["//visibility:public"]): def copy_bootstrap_js(name = "bootstrap-js", visibility = ["//visibility:public"]):
vendor_js_lib( vendor_js_lib(
name = name, name = name,
pkg = _pkg_from_name(name), pkg = pkg_from_name("bootstrap"),
include = [ include = [
"dist/js/bootstrap.bundle.min.js", "dist/js/bootstrap.bundle.min.js",
], ],
strip_prefix = "dist/js/", strip_prefix = "dist/js/",
visibility = visibility, visibility = visibility,
base = "external/npm/node_modules/bootstrap/",
) )
def copy_bootstrap_css(name = "bootstrap-css", visibility = ["//visibility:public"]): def copy_bootstrap_css(name = "bootstrap-css", visibility = ["//visibility:public"]):
vendor_js_lib( vendor_js_lib(
name = name, name = name,
pkg = _pkg_from_name(name), pkg = pkg_from_name("bootstrap"),
include = [ include = [
"dist/css/bootstrap.min.css", "dist/css/bootstrap.min.css",
], ],
@ -120,7 +121,7 @@ def copy_bootstrap_css(name = "bootstrap-css", visibility = ["//visibility:publi
def copy_bootstrap_icons(name = "bootstrap-icons", icons = [], visibility = ["//visibility:public"]): def copy_bootstrap_icons(name = "bootstrap-icons", icons = [], visibility = ["//visibility:public"]):
vendor_js_lib( vendor_js_lib(
name = name, name = name,
pkg = _pkg_from_name(name), pkg = pkg_from_name(name),
include = ["icons/{}".format(icon) for icon in icons], include = ["icons/{}".format(icon) for icon in icons],
strip_prefix = "icons/", strip_prefix = "icons/",
visibility = visibility, visibility = visibility,