fix: Update CSS support for Braid (seek-oss#349)

thebillg · Apr 23, 2019 · 211730b · 211730b
1 parent dc4ad1b
commit 211730b
Show file tree

Hide file tree

Showing 16 changed files with 2,487 additions and 1,708 deletions.
diff --git a/config/webpack/plugins/createTreatPlugin.js b/config/webpack/plugins/createTreatPlugin.js
@@ -0,0 +1,20 @@
+const TreatPlugin = require('treat/plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = ({ target, isProductionBuild }) => {
+  const localIdentName = `${
+    isProductionBuild ? '' : 'BRAID__[name]-[local]_'
+  }[hash:base64:5]`;
+
+  const themeIdentName = `${
+    isProductionBuild ? '' : '-[folder]_'
+  }[hash:base64:3]`;
+
+  return new TreatPlugin({
+    test: /braid-design-system\/(?!node_modules).+\.treat\.(?:js|ts)/,
+    outputCSS: target === 'browser',
+    outputLoaders: [MiniCssExtractPlugin.loader],
+    localIdentName,
+    themeIdentName,
+  });
+};
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
@@ -9,6 +9,8 @@ const args = require('../args');
 const config = require('../../context');
 const createHtmlRenderPlugin = require('./plugins/createHtmlRenderPlugin');
 const { bundleAnalyzerPlugin } = require('./plugins/bundleAnalyzer');
+const createTreatPlugin = require('./plugins/createTreatPlugin');
+
 const utils = require('./utils');
 const debug = require('debug')('sku:webpack:config');
 const { cwd } = require('../../lib/cwd');
@@ -30,7 +32,8 @@ const {
 
 // port is only required for dev builds
 const makeWebpackConfig = ({ isStorybook = false, port = 0 } = {}) => {
-  const webpackMode = utils.isProductionBuild ? 'production' : 'development';
+  const { isProductionBuild } = utils;
+  const webpackMode = isProductionBuild ? 'production' : 'development';
 
   const renderHtml = isLibrary ? isStartScript : !isStorybook;
   const htmlRenderPlugin = renderHtml ? createHtmlRenderPlugin() : null;
@@ -136,8 +139,8 @@ const makeWebpackConfig = ({ isStorybook = false, port = 0 } = {}) => {
       },
       optimization: {
         nodeEnv: process.env.NODE_ENV,
-        minimize: utils.isProductionBuild,
-        concatenateModules: utils.isProductionBuild,
+        minimize: isProductionBuild,
+        concatenateModules: isProductionBuild,
         ...(!isLibrary
           ? {
               splitChunks: {
@@ -237,6 +240,7 @@ const makeWebpackConfig = ({ isStorybook = false, port = 0 } = {}) => {
           chunkFilename: cssFileMask,
         }),
         new webpack.HashedModuleIdsPlugin(),
+        createTreatPlugin({ target: 'browser', isProductionBuild }),
       ],
     },
     {
@@ -313,6 +317,7 @@ const makeWebpackConfig = ({ isStorybook = false, port = 0 } = {}) => {
           SKU_LIBRARY_NAME: JSON.stringify(libraryName),
           __SKU_PUBLIC_PATH__: JSON.stringify(paths.publicPath),
         }),
+        createTreatPlugin({ target: 'node', isProductionBuild }),
       ],
     },
   ].map(webpackDecorator);

diff --git a/config/webpack/webpack.config.ssr.js b/config/webpack/webpack.config.ssr.js
@@ -6,6 +6,7 @@ const nodeExternals = require('webpack-node-externals');
 const findUp = require('find-up');
 const StartServerPlugin = require('start-server-webpack-plugin');
 const LoadablePlugin = require('@loadable/webpack-plugin');
+const createTreatPlugin = require('./plugins/createTreatPlugin');
 
 const debug = require('debug')('sku:webpack:config');
 const args = require('../args');
@@ -22,7 +23,8 @@ const {
 } = require('../../context');
 
 const makeWebpackConfig = ({ clientPort, serverPort }) => {
-  const webpackMode = utils.isProductionBuild ? 'production' : 'development';
+  const { isProductionBuild } = utils;
+  const webpackMode = isProductionBuild ? 'production' : 'development';
 
   const envVars = lodash
     .chain(env)
@@ -104,8 +106,8 @@ const makeWebpackConfig = ({ clientPort, serverPort }) => {
       },
       optimization: {
         nodeEnv: process.env.NODE_ENV,
-        minimize: utils.isProductionBuild,
-        concatenateModules: utils.isProductionBuild,
+        minimize: isProductionBuild,
+        concatenateModules: isProductionBuild,
         splitChunks: {
           chunks: 'all',
         },
@@ -195,6 +197,7 @@ const makeWebpackConfig = ({ clientPort, serverPort }) => {
           filename: `${fileMask}.css`,
           chunkFilename: `${fileMask}.css`,
         }),
+        createTreatPlugin({ target: 'browser', isProductionBuild }),
       ].concat(
         isStartScript
           ? [
@@ -290,6 +293,7 @@ const makeWebpackConfig = ({ clientPort, serverPort }) => {
           __SKU_DEFAULT_SERVER_PORT__: JSON.stringify(serverPort),
           __SKU_PUBLIC_PATH__: JSON.stringify(publicPath),
         }),
+        createTreatPlugin({ target: 'node', isProductionBuild }),
       ].concat(
         isStartScript
           ? [

diff --git a/package.json b/package.json
@@ -153,13 +153,14 @@
     "svgo": "^1.0.5",
     "svgo-loader": "^2.1.0",
     "traverse": "^0.6.6",
+    "treat": "1.0.0-alpha.13",
     "tree-kill": "^1.2.1",
     "tslint": "^5.11.0",
     "tslint-config-seek": "^1.0.0",
     "typescript": "^3.1.5",
     "url-loader": "^1.0.1",
     "validate-npm-package-name": "^3.0.0",
-    "webpack": "^4.28.2",
+    "webpack": "^4.30.0",
     "webpack-bundle-analyzer": "^3.0.2",
     "webpack-dev-server": "3.2.1",
     "webpack-merge": "^4.1.5",

diff --git a/test/test-cases/braid-design-system/__snapshots__/braid-design-system.test.js.snap b/test/test-cases/braid-design-system/__snapshots__/braid-design-system.test.js.snap
@@ -19,42 +19,42 @@ Object {
     <meta name="viewport"
           content="width=device-width, initial-scale=1"
     >
+    <link data-chunk="main"
+          rel="stylesheet"
+          href="https://somecdn.com/vendors~main-49f571a59ec95e51db91.css"
+    >
     <link data-chunk="themes-jobStreet"
           rel="stylesheet"
           href="https://somecdn.com/vendors~themes-jobStreet-67810f616b78ebd3d240.css"
     >
     <link data-chunk="main"
-          rel="stylesheet"
-          href="https://somecdn.com/vendors~main-607cf5ff964931ad76b7.css"
-    >
-    <link data-chunk="themes-jobStreet"
           rel="preload"
           as="script"
-          href="https://somecdn.com/vendors~themes-jobStreet-6207e72313d53d669023.js"
+          href="https://somecdn.com/runtime-cab5104a3be2be1d2362.js"
           crossorigin="anonymous"
     >
-    <link data-chunk="themes-jobStreet"
+    <link data-chunk="main"
           rel="preload"
           as="script"
-          href="https://somecdn.com/themes-jobStreet-ef5d0bc2d251429d696f.js"
+          href="https://somecdn.com/vendors~main-8848b4fa7e026a3c0cd3.js"
           crossorigin="anonymous"
     >
     <link data-chunk="main"
           rel="preload"
           as="script"
-          href="https://somecdn.com/runtime-42789770c3cd810aebe4.js"
+          href="https://somecdn.com/main-e40ad30330080589ce1e.js"
           crossorigin="anonymous"
     >
-    <link data-chunk="main"
+    <link data-chunk="themes-jobStreet"
           rel="preload"
           as="script"
-          href="https://somecdn.com/vendors~main-79cee42d2f611f70df2d.js"
+          href="https://somecdn.com/vendors~themes-jobStreet-6e4b879df42439d00dee.js"
           crossorigin="anonymous"
     >
-    <link data-chunk="main"
+    <link data-chunk="themes-jobStreet"
           rel="preload"
           as="script"
-          href="https://somecdn.com/main-481bb29f52722089dabd.js"
+          href="https://somecdn.com/themes-jobStreet-47b4b0c2ff49e2cc8924.js"
           crossorigin="anonymous"
     >
     <script>
@@ -213,44 +213,47 @@ Object {
     <script>
       window.__SKU_CLIENT_CONTEXT__ = {"site":"jobStreet"};
     </script>
-    <script crossorigin="anonymous">
-      window.__LOADABLE_REQUIRED_CHUNKS__ = [2,0];
+    <script id="__LOADABLE_REQUIRED_CHUNKS__"
+            type="application/json"
+            crossorigin="anonymous"
+    >
+      [2,0]
     </script>
     <script async
-            data-chunk="themes-jobStreet"
-            src="https://somecdn.com/vendors~themes-jobStreet-6207e72313d53d669023.js"
+            data-chunk="main"
+            src="https://somecdn.com/runtime-cab5104a3be2be1d2362.js"
             crossorigin="anonymous"
     >
     </script>
     <script async
-            data-chunk="themes-jobStreet"
-            src="https://somecdn.com/themes-jobStreet-ef5d0bc2d251429d696f.js"
+            data-chunk="main"
+            src="https://somecdn.com/vendors~main-8848b4fa7e026a3c0cd3.js"
             crossorigin="anonymous"
     >
     </script>
     <script async
             data-chunk="main"
-            src="https://somecdn.com/runtime-42789770c3cd810aebe4.js"
+            src="https://somecdn.com/main-e40ad30330080589ce1e.js"
             crossorigin="anonymous"
     >
     </script>
     <script async
-            data-chunk="main"
-            src="https://somecdn.com/vendors~main-79cee42d2f611f70df2d.js"
+            data-chunk="themes-jobStreet"
+            src="https://somecdn.com/vendors~themes-jobStreet-6e4b879df42439d00dee.js"
             crossorigin="anonymous"
     >
     </script>
     <script async
-            data-chunk="main"
-            src="https://somecdn.com/main-481bb29f52722089dabd.js"
+            data-chunk="themes-jobStreet"
+            src="https://somecdn.com/themes-jobStreet-47b4b0c2ff49e2cc8924.js"
             crossorigin="anonymous"
     >
     </script>
   </body>
 </html>
 ,
-  "main-481bb29f52722089dabd.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
-  "runtime-42789770c3cd810aebe4.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
+  "main-e40ad30330080589ce1e.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
+  "runtime-cab5104a3be2be1d2362.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
   "seekAnz/index.html": 
 <!DOCTYPE html>
 <html>
@@ -262,42 +265,42 @@ Object {
     <meta name="viewport"
           content="width=device-width, initial-scale=1"
     >
+    <link data-chunk="main"
+          rel="stylesheet"
+          href="https://somecdn.com/vendors~main-49f571a59ec95e51db91.css"
+    >
     <link data-chunk="themes-seekAnz"
           rel="stylesheet"
           href="https://somecdn.com/vendors~themes-seekAnz-7f2d670318efcf6afad2.css"
     >
     <link data-chunk="main"
-          rel="stylesheet"
-          href="https://somecdn.com/vendors~main-607cf5ff964931ad76b7.css"
-    >
-    <link data-chunk="themes-seekAnz"
           rel="preload"
           as="script"
-          href="https://somecdn.com/vendors~themes-seekAnz-bd87a23b56ff5a5f456d.js"
+          href="https://somecdn.com/runtime-cab5104a3be2be1d2362.js"
           crossorigin="anonymous"
     >
-    <link data-chunk="themes-seekAnz"
+    <link data-chunk="main"
           rel="preload"
           as="script"
-          href="https://somecdn.com/themes-seekAnz-ac0870426bbd4ceca7a6.js"
+          href="https://somecdn.com/vendors~main-8848b4fa7e026a3c0cd3.js"
           crossorigin="anonymous"
     >
     <link data-chunk="main"
           rel="preload"
           as="script"
-          href="https://somecdn.com/runtime-42789770c3cd810aebe4.js"
+          href="https://somecdn.com/main-e40ad30330080589ce1e.js"
           crossorigin="anonymous"
     >
-    <link data-chunk="main"
+    <link data-chunk="themes-seekAnz"
           rel="preload"
           as="script"
-          href="https://somecdn.com/vendors~main-79cee42d2f611f70df2d.js"
+          href="https://somecdn.com/vendors~themes-seekAnz-d296d18aecfd8e7612a6.js"
           crossorigin="anonymous"
     >
-    <link data-chunk="main"
+    <link data-chunk="themes-seekAnz"
           rel="preload"
           as="script"
-          href="https://somecdn.com/main-481bb29f52722089dabd.js"
+          href="https://somecdn.com/themes-seekAnz-660a0729ec5e62821fa5.js"
           crossorigin="anonymous"
     >
     <script>
@@ -456,47 +459,50 @@ Object {
     <script>
       window.__SKU_CLIENT_CONTEXT__ = {"site":"seekAnz"};
     </script>
-    <script crossorigin="anonymous">
-      window.__LOADABLE_REQUIRED_CHUNKS__ = [3,1];
+    <script id="__LOADABLE_REQUIRED_CHUNKS__"
+            type="application/json"
+            crossorigin="anonymous"
+    >
+      [3,1]
     </script>
     <script async
-            data-chunk="themes-seekAnz"
-            src="https://somecdn.com/vendors~themes-seekAnz-bd87a23b56ff5a5f456d.js"
+            data-chunk="main"
+            src="https://somecdn.com/runtime-cab5104a3be2be1d2362.js"
             crossorigin="anonymous"
     >
     </script>
     <script async
-            data-chunk="themes-seekAnz"
-            src="https://somecdn.com/themes-seekAnz-ac0870426bbd4ceca7a6.js"
+            data-chunk="main"
+            src="https://somecdn.com/vendors~main-8848b4fa7e026a3c0cd3.js"
             crossorigin="anonymous"
     >
     </script>
     <script async
             data-chunk="main"
-            src="https://somecdn.com/runtime-42789770c3cd810aebe4.js"
+            src="https://somecdn.com/main-e40ad30330080589ce1e.js"
             crossorigin="anonymous"
     >
     </script>
     <script async
-            data-chunk="main"
-            src="https://somecdn.com/vendors~main-79cee42d2f611f70df2d.js"
+            data-chunk="themes-seekAnz"
+            src="https://somecdn.com/vendors~themes-seekAnz-d296d18aecfd8e7612a6.js"
             crossorigin="anonymous"
     >
     </script>
     <script async
-            data-chunk="main"
-            src="https://somecdn.com/main-481bb29f52722089dabd.js"
+            data-chunk="themes-seekAnz"
+            src="https://somecdn.com/themes-seekAnz-660a0729ec5e62821fa5.js"
             crossorigin="anonymous"
     >
     </script>
   </body>
 </html>
 ,
-  "themes-jobStreet-ef5d0bc2d251429d696f.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
+  "themes-jobStreet-47b4b0c2ff49e2cc8924.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
   "themes-jobStreet.render.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
-  "themes-seekAnz-ac0870426bbd4ceca7a6.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
+  "themes-seekAnz-660a0729ec5e62821fa5.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
   "themes-seekAnz.render.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
-  "vendors~main-607cf5ff964931ad76b7.css": ._3DWxPaW {
+  "vendors~main-49f571a59ec95e51db91.css": ._3DWxPaW {
   display: block;
 }
 ._2ITnC9Y {
@@ -613,8 +619,7 @@ Object {
   flex-grow: 0;
 }
 ,
-  "vendors~main-79cee42d2f611f70df2d.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
-  "vendors~themes-jobStreet-6207e72313d53d669023.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
+  "vendors~main-8848b4fa7e026a3c0cd3.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
   "vendors~themes-jobStreet-67810f616b78ebd3d240.css": ._3IiUysg,
 ._2WCNw0q,
 ._3LAqmg3,
@@ -1475,6 +1480,7 @@ Object {
   }
 }
 ,
+  "vendors~themes-jobStreet-6e4b879df42439d00dee.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
   "vendors~themes-jobStreet.render.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
   "vendors~themes-jobStreet~themes-seekAnz.render.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
   "vendors~themes-seekAnz-7f2d670318efcf6afad2.css": ._3IiUysg,
@@ -2322,7 +2328,7 @@ Object {
   }
 }
 ,
-  "vendors~themes-seekAnz-bd87a23b56ff5a5f456d.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
+  "vendors~themes-seekAnz-d296d18aecfd8e7612a6.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
   "vendors~themes-seekAnz.render.js": "CONTENTS IGNORED IN SNAPSHOT TEST",
 }
 `;