Add TypeScript dependencies and copy of example plugin (bazelbuild#7)

BUILD

@@ -13,3 +13,5 @@
 # limitations under the License.
 
 exports_files(["LICENSE"])
+
+exports_files(["tsconfig.json"], visibility = ["//visibility:public"])

WORKSPACE

@@ -30,3 +30,11 @@ yarn_install(
     package_json = "//:package.json",
     yarn_lock = "//:yarn.lock",
 )
+
+load("@npm//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
+
+install_bazel_dependencies()
+
+# Set up TypeScript toolchain
+load("@npm_bazel_typescript//:index.bzl", "ts_setup_workspace")
+ts_setup_workspace()

examples/custom_plugin_ts/BUILD

@@ -0,0 +1,62 @@
+# Copyright 2019 The Bazel Authors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
+load("//:defs.bzl", "postcss_binary", "postcss_plugin")
+
+package(default_visibility = ["//tests:__subpackages__"])
+
+AUTO_PREFIXER_BROWSERS = "ie >= 9, edge >= 12, firefox >= 42, chrome >= 32, safari >= 8, opera >= 38, ios_saf >= 9.2, android >= 4.3, and_uc >= 9.9"
+
+ts_library(
+    name = "unquote_ts",
+    srcs = ["unquote.ts"],
+    deps = [
+      "@npm//@types",
+      "@npm//postcss",
+    ],
+)
+
+filegroup(
+    name = "unquote_js",
+    srcs = [":unquote_ts"],
+    output_group = "es5_sources",
+)
+
+postcss_plugin(
+    name = "unquote",
+    srcs = [
+        ":unquote_js",
+    ],
+)
+
+sass_binary(
+    name = "style",
+    src = "style.scss",
+    output_style = "expanded",
+)
+
+postcss_binary(
+    name = "style_processed",
+    src = ":style",
+    plugins = {
+        "autoprefixer": "[{ browsers: '%s' }]" % AUTO_PREFIXER_BROWSERS,
+        "build_bazel_rules_postcss/examples/custom_plugin_ts/unquote.js": "",
+    },
+    deps = [
+        ":unquote",
+        "@npm//autoprefixer",
+    ],
+)

examples/custom_plugin_ts/style.scss

@@ -0,0 +1,12 @@
+@function mediaSafe($expr) {
+  @return unquote('unquote("' + $expr + '")');
+}
+
+$sidebar-max-width-toggleable: 42px;
+
+@media screen and (max-width: mediaSafe($sidebar-max-width-toggleable)) {
+  body {
+    font: 42px 'Comic Sans MS';
+    flex: 42 -42 auto;
+  }
+}

examples/custom_plugin_ts/unquote.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2019 The Bazel Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Example PostCSS plugin that introduces an "unquote" function
+ * to stylesheets.
+ */
+
+import * as postcss from 'postcss';
+
+// Replaces all "unquote('hello')" found with "hello", supporting
+// both ' and ". Doesn't do quote escaping.
+module.exports = postcss.plugin('unquote', () => {
+  /**
+   * Unquote implementation. http://stackoverflow.com/a/19584742
+   * @param str
+   * @return The string with unquote instances handled.
+   */
+  const unquoteStr = (str: string) => {
+    if (str.indexOf('unquote(') !== -1) {
+      return str.replace(/unquote\((["'])(.+?)\1\)/g, '$2');
+    }
+    return str;
+  };
+
+  return (css: postcss.Root) => {
+    // Handle declaration values in rules.
+    css.walkRules(rule => {
+      rule.walkDecls((decl, i) => decl.value = unquoteStr(decl.value));
+    });
+    // Handle params in @rules.
+    css.walkAtRules(rule => rule.params = unquoteStr(rule.params));
+  };
+});

package.json

@@ -3,8 +3,13 @@
     "description": "Run PostCSS with Bazel",
     "version": "0.0.1",
     "dependencies": {
+        "@types/node": "^12.12.7",
         "autoprefixer": "9.4.3",
         "minimist": "1.2.0",
-        "postcss": "7.0.7"
+        "postcss": "7.0.7",
+        "typescript": "^3.7.2"
+    },
+    "devDependencies": {
+        "@bazel/typescript": "^0.39.1"
     }
 }

tests/BUILD

@@ -16,22 +16,22 @@ load("@bazel_tools//tools/build_rules:test_rules.bzl", "file_test")
 
 package(default_visibility = ["//visibility:private"])
 
-file_test(
-    name = "autoprefixer_test",
-    content = """body {
+AUTOPREFIXER_OUTPUT = """body {
   font: 42px 'Comic Sans MS';
   -webkit-box-flex: 42;
   -webkit-flex: 42 -42 auto;
       -ms-flex: 42 -42 auto;
           flex: 42 -42 auto;
 }
-""",
+"""
+
+file_test(
+    name = "autoprefixer_test",
+    content = AUTOPREFIXER_OUTPUT,
     file = "//examples/autoprefixer:style_processed.css",
 )
 
-file_test(
-    name = "custom_plugin_test",
-    content = """@media screen and (max-width: 42px) {
+CUSTOM_PLUGIN_OUTPUT = """@media screen and (max-width: 42px) {
   body {
     font: 42px "Comic Sans MS";
     -webkit-box-flex: 42;
@@ -42,6 +42,16 @@ file_test(
 }
 
 /*# sourceMappingURL=style.css.map */
-""",
+"""
+
+file_test(
+    name = "custom_plugin_test",
+    content = CUSTOM_PLUGIN_OUTPUT,
     file = "//examples/custom_plugin:style_processed.css",
 )
+
+file_test(
+    name = "custom_plugin_ts_test",
+    content = CUSTOM_PLUGIN_OUTPUT,
+    file = "//examples/custom_plugin_ts:style_processed.css",
+)

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": [
+      "es5",
+      "es6",
+      "es2015.collection",
+      "es2015.iterable",
+      "es2015.core",
+      "dom"
+    ],
+    "types": [
+      "node"
+    ],
+    "target": "es2015",
+    "strict": true
+  },
+  "include": [
+    "examples/*.ts",
+  ]
+}