Restore support for Sass (.scss)

[borgstrom]

I see that support for Sass (.scss files) was removed back in 3044972 because it was failing. I'd like to use it, so I decided to see if I could figure out what the issue was, and it just worked

I took a look through the node-sass changelog for what changed between 4.9.2 & 4.11.0 and couldn't see anything that would cause whatever issue that prompted it's removal, but this setup is working for both dev-server & production builds

diff --git a/WORKSPACE b/WORKSPACE
index ca487e3..68a63b1 100644
--- a/WORKSPACE
+++ b/WORKSPACE
@@ -16,10 +16,9 @@ http_archive(
     sha256 = "7949fc6cc17b5b191103e97481cf8889217263acf52e00b560683413af204fcb",
 )
 
-git_repository(
-  name = "bazel_javascript",
-  remote = "https://github.com/zenclabs/bazel-javascript.git",
-  commit = "12b5124"
+local_repository(
+    name = "bazel_javascript",
+    path = "/Users/eborgstrom/Projects/bazel-javascript"
 )
 
 git_repository(
diff --git a/web/apps/admin/App.tsx b/web/apps/admin/App.tsx
index 0ff8617..de43e93 100644
--- a/web/apps/admin/App.tsx
+++ b/web/apps/admin/App.tsx
@@ -6,10 +6,12 @@ import Text, {Heading} from "../../components/typography";
 
 import Theme from "../../shared/aws-amplify-theme";
 
+import * as foo from './Foo.module.scss';
+
 class App extends React.Component {
     render() {
         return (
-            <div>
+            <div className={foo.grey}>
                 <Heading level={1}>Heading 1</Heading>
                 <Heading level={2}>Heading 2</Heading>
                 <Heading level={3}>Heading 3</Heading>
diff --git a/web/apps/admin/BUILD.bazel b/web/apps/admin/BUILD.bazel
index 588f7ab..f634ae7 100644
--- a/web/apps/admin/BUILD.bazel
+++ b/web/apps/admin/BUILD.bazel
@@ -8,6 +8,7 @@ ts_library(
         "*.ts",
         "*.tsx",
         "*.css",
+        "*.scss",
         "*.svg",
     ]) + [
         "//web/styles",
diff --git a/web/apps/admin/Foo.module.scss b/web/apps/admin/Foo.module.scss
new file mode 100644
index 0000000..a02de09
--- /dev/null
+++ b/web/apps/admin/Foo.module.scss
@@ -0,0 +1,6 @@
+$color: #333;
+
+.grey {
+  background-color: $color;
+  color: white;
+}

cc @fwouts

[fwouts]

Thanks! If I remember correctly, the main reason I removed this was because it was causing headaches and nobody had expressed the need for it. Happy to have it back.

[fwouts]

As a future step (not blocking this PR), we should add some examples of usage especially from TypeScript. I've seen some webpack plugins that automatically generate TypeScript definitions from CSS modules, but this won't give a very good developer experience in the context of Bazel since these definitions won't be accessible by the code editor.

[borgstrom]

👍

When I put together a PR for #44 I will review the examples and update them.

You can have typescript include extra type roots via tsconfig.json so as long as editors are properly integrated with tsc (I know for sure intellij is) then you can get your scss module definitions to work in your editor via:

#882 ❯❯❯ cat tsconfig.json  | jq .compilerOptions.typeRoots
[
  "node_modules/@types",
  "./typescript/types"
]

#883 ❯❯❯ cat typescript/types/sass.d.ts 
declare module '*.scss' {
    const content: {[className: string]: string};
    export = content;
}

I put all my .d.ts files in the same root:

#885 ❯❯❯ cat typescript/types/BUILD.bazel 
package(default_visibility = ["//visibility:public"])

filegroup(
    name = "types",
    srcs = glob(["*.d.ts"]),
)

And include them via the label //typescript/types in my ts_library srcs attr.

[fwouts]

From what I see, you're referring to a general type description for all CSS modules with the type {[className: string]: string}. That works, but something even better would be https://github.com/Jimdo/typings-for-css-modules-loader which will only allow you to use correct class names for your specific CSS module. Happy with either solution as a first approach.