[CORL-360] Embrace CSS Variables (#2312)

* fix: docz bug

* feat: implement css variables

* fix: adapt docz

* fix: webpack config

* fix: add ui l10n bundle to tests

src/core/build/createWebpackConfig.ts

@@ -92,7 +92,7 @@ export default function createWebpackConfig(
     fallbackLocale: "en-US",
 
     // Common fluent files are always included in the locale bundles.
-    commonFiles: ["framework.ftl", "common.ftl"],
+    commonFiles: ["framework.ftl", "common.ftl", "ui.ftl"],
 
     // Locales that come with the main bundle. Others are loaded on demand.
     bundled: ["en-US"],
@@ -350,6 +350,48 @@ export default function createWebpackConfig(
                   : "assets/media/[name].[ext]",
               },
             },
+            {
+              test: /\.css\.ts$/,
+              use: [
+                !watch ? MiniCssExtractPlugin.loader : styleLoader,
+                {
+                  loader: require.resolve("css-loader"),
+                  options: {
+                    modules: true,
+                    importLoaders: 2,
+                    localIdentName: "[name]-[local]-[hash:base64:5]",
+                    sourceMap: !disableSourcemaps,
+                  },
+                },
+                {
+                  loader: require.resolve("postcss-loader"),
+                  options: {
+                    config: {
+                      path: paths.appPostCssConfig,
+                    },
+                    parser: "postcss-js",
+                  },
+                },
+                {
+                  loader: require.resolve("babel-loader"),
+                  options: {
+                    configFile: false,
+                    babelrc: false,
+                    presets: [
+                      "@babel/typescript",
+                      [
+                        "@babel/env",
+                        { targets: { node: "10.0.0" }, modules: "commonjs" },
+                      ],
+                    ],
+                    // This is a feature of `babel-loader` for webpack (not Babel itself).
+                    // It enables caching results in ./node_modules/.cache/babel-loader/
+                    // directory for faster rebuilds.
+                    cacheDirectory: true,
+                  },
+                },
+              ],
+            },
             // Process JS with Babel.
             {
               test: /\.(ts|tsx)$/,
@@ -373,7 +415,7 @@ export default function createWebpackConfig(
                   },
                 },
                 {
-                  loader: "ts-loader",
+                  loader: require.resolve("ts-loader"),
                   options: {
                     configFile: paths.appTsconfig,
                     compilerOptions: {

src/core/build/postcss.config.js

@@ -9,7 +9,6 @@ const paths = require("./paths").default;
 const autoprefixer = require("autoprefixer");
 const postcssFontMagician = require("postcss-font-magician");
 const postcssFlexbugsFixes = require("postcss-flexbugs-fixes");
-const postcssVariables = require("postcss-css-variables");
 const postcssPresetEnv = require("postcss-preset-env");
 const postcssNested = require("postcss-nested");
 const postcssImport = require("postcss-import");
@@ -49,7 +48,7 @@ module.exports = {
     // This allows us to define dynamic css variables.
     postcssPrependImports({
       path: "",
-      files: [paths.appThemeVariablesCSS, paths.appThemeMixinsCSS],
+      files: [paths.appThemeMixinsCSS],
     }),
     // Needed by above plugin.
     postcssImport(),
@@ -59,10 +58,6 @@ module.exports = {
     postcssNested(),
     // Sass style variables to be used in media queries.
     postcssAdvancedVariables({ variables: mediaQueryVariables }),
-    // CSS standard variables for everything else.
-    postcssVariables({
-      variables: cssVariables,
-    }),
     // Provides a modern CSS environment.
     postcssPresetEnv(),
     // Does all the font handling logic.

src/core/client/account/index.tsx

@@ -6,6 +6,9 @@ import App from "./App";
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
+// Import css variables.
+import "talk-ui/theme/variables.css";
+
 async function main() {
   const ManagedTalkContextProvider = await createManaged({
     initLocalState,

src/core/client/admin/index.tsx

@@ -6,6 +6,9 @@ import EntryContainer from "./containers/EntryContainer";
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
+// Import css variables.
+import "talk-ui/theme/variables.css";
+
 async function main() {
   const ManagedTalkContextProvider = await createManaged({
     initLocalState,

src/core/client/auth/index.tsx

@@ -10,6 +10,9 @@ import { initLocalState } from "./local";
 import localesData from "./locales";
 import AppQuery from "./queries/AppQuery";
 
+// Import css variables.
+import "talk-ui/theme/variables.css";
+
 /**
  * Adapt popup height to current content every 100ms.
  *

src/core/client/framework/testHelpers/createFluentBundle.ts

@@ -7,7 +7,7 @@ import fs from "fs";
 import path from "path";
 
 // These locale prefixes are always loaded.
-const commonPrefixes = ["common", "framework"];
+const commonPrefixes = ["ui", "common", "framework"];
 
 function decorateErrorWhenMissing(bundle: FluentBundle) {
   const originalHasMessage = bundle.hasMessage;

src/core/client/install/index.tsx

@@ -7,6 +7,9 @@ import { createManaged } from "talk-framework/lib/bootstrap";
 import App from "./components/App";
 import localesData from "./locales";
 
+// Import css variables.
+import "talk-ui/theme/variables.css";
+
 async function main() {
   const ManagedTalkContextProvider = await createManaged({
     localesData,

src/core/client/stream/index.tsx

@@ -16,6 +16,9 @@ import {
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
+// Import css variables.
+import "talk-ui/theme/variables.css";
+
 const listeners = (
   <>
     <OnPymLogin />

src/core/client/ui/components/Brand/BrandName.tsx

@@ -22,7 +22,7 @@ const BrandName: FunctionComponent<Props> = ({
   size,
   ...rest
 }) => (
-  <Localized id="general-brandName">
+  <Localized id="ui-brandName">
     <Typography
       {...rest}
       variant="heading1"

src/core/client/ui/theme/variables.css

@@ -1,16 +0,0 @@
-/*
-  Variables defined in `variables.ts` are already available
-  flattened and in kebab case.
-
-  These are additionally variables we define.
-*/
-
-:root {
-  --mini-unit: calc(1px * var(--mini-unit-small));
-}
-
-@media (min-width: $breakpoints-xs) {
-  :root {
-    --mini-unit: calc(1px * var(--mini-unit-large));
-  }
-}

src/core/client/ui/theme/variables.css.ts

@@ -0,0 +1,36 @@
+/*
+  Variables defined in `variables.ts` are already available
+  flattened and in kebab case.
+
+  These are additionally variables we define.
+*/
+
+import flat from "flat";
+import { kebabCase, mapKeys, mapValues, pickBy } from "lodash";
+
+import variables from "./variables";
+
+const flatKebabVariables = mapKeys(
+  mapValues(flat(variables, { delimiter: "-" }), v => v.toString()),
+  (_, k) => `--${kebabCase(k)}`
+);
+
+// These are the default css standard variables.
+const cssVariables = pickBy(
+  flatKebabVariables,
+  (v, k) => !k.startsWith("breakpoints-")
+);
+
+const style = {
+  ":root": {
+    ...cssVariables,
+    "--mini-unit": "calc(1px * var(--mini-unit-small))",
+  },
+  [`@media (min-width: ${variables.breakpoints.xs}px)`]: {
+    ":root": {
+      "--mini-unit": "calc(1px * var(--mini-unit-large))",
+    },
+  },
+};
+
+module.exports = style;

src/locales/en-US/admin.ftl

@@ -1,8 +1,6 @@
 ### Localization for Admin
 
 ## General
-
-general-brandName = { -product-name }
 general-notAvailable = Not available
 
 ## Story Status

src/locales/en-US/ui.ftl

@@ -0,0 +1 @@
+ui-brandName = { -product-name }