Remove treat support (#809)

Co-authored-by: Remus Mate <rmate@seek.com.au>

.changeset/brown-files-tie.md

@@ -0,0 +1,9 @@
+---
+'sku': major
+---
+
+Drop support for styling with [treat]. Please [migrate] styles to [Vanilla Extract].
+
+[treat]: https://seek-oss.github.io/treat/
+[migrate]: https://github.com/seek-oss/braid-design-system/blob/e42c6f9168904f6b607c74157cafebf9b0147489/docs/treat%20to%20vanilla-extract%20migration.md
+[Vanilla Extract]: https://vanilla-extract.style/documentation/getting-started

docs/docs/styling.md

@@ -10,14 +10,14 @@ $ yarn add @vanilla-extract/css
 
 Now you can create `.css.ts` files in your project.
 
-```js
+```ts
 // BigBox.css.ts
 import { style } from '@vanilla-extract/css';
 
 export const bigBox = style({ width: 500, height: 500 });
 ```
 
-```js
+```tsx
 // BigBox.tsx
 import * as styles from './BigBox.css';
 
@@ -26,7 +26,7 @@ export function BigBox() {
 }
 ```
 
-See [vanilla-extract](https://vanilla-extract.style/documentation/getting-started) for full documentation.
+See [Vanilla Extract](https://vanilla-extract.style/documentation/getting-started) for full documentation.
 
 ## Locally Scoped CSS
 
@@ -57,25 +57,7 @@ export default () => <div className={styles.exampleWrapper}>Hello World!</div>;
 
 ## treat
 
-> Usage of treat is deprecated in favour of [Vanilla Extract](#vanilla-extract)
-
-Note: You must access all treat imports through the sku prefix. e.g. `sku/treat`, `sku/react-treat`;
-
-See treat's [docs](https://seek-oss.github.io/treat/) for details on proper usage.
-
-```js
-import { style } from 'sku/treat';
-
-export const bigBox = style({ width: 500, height: 500 });
-```
-
-```js
-import { useStyles } from 'sku/react-treat';
-import * as styleRefs from './example.treat';
+As of sku v12, [treat] support has been removed in favour of [Vanilla Extract].
 
-export default () => {
-  const styles = useStyles(styleRefs);
-
-  return <div className={styles.bigBox}>I am a big box</div>;
-};
-```
+[treat]: https://seek-oss.github.io/treat/
+[vanilla extract]: #vanilla-extract

fixtures/braid-design-system/src/App.js

@@ -10,7 +10,6 @@ import {
 } from 'braid-design-system';
 import theme from 'braid-design-system/themes/apac';
 
-import * as styles from './App.treat';
 import { vanillaBox } from './App.css';
 
 const noop = () => {};
@@ -35,8 +34,7 @@ function Stuff({ themeName }) {
           label="This is a checkbox"
         />
       </Card>
-      <Box className={styles.customBox}>Custom content {renderLabel}</Box>
-      <Box className={vanillaBox}>🧁 Vanilla content</Box>
+      <Box className={vanillaBox}>🧁 Vanilla content {renderLabel}</Box>
     </>
   );
 }

fixtures/library-build/src/library.js

@@ -1,11 +1,10 @@
 import styles from './styles.less';
-import { customBox } from './styles.treat';
 
 export default () => {
   const dynamicImport = 'used';
   import(`./dynamicImports/${dynamicImport}`).then(({ message }) => {
     const el = document.createElement('div');
-    el.className = `${styles.root} ${customBox}`;
+    el.className = `${styles.root}`;
     el.innerHTML = message;
     document.body.appendChild(el);
   });

fixtures/library-file/src/library.js

@@ -1,11 +1,10 @@
 import styles from './styles.less';
-import { customBox } from './styles.treat';
 
 export default () => {
   const dynamicImport = 'used';
   import(`./dynamicImports/${dynamicImport}`).then(({ message }) => {
     const el = document.createElement('div');
-    el.className = `${styles.root} ${customBox}`;
+    el.className = `${styles.root}`;
     el.innerHTML = message;
     document.body.appendChild(el);
   });

packages/sku/config/babel/babelConfig.js

@@ -23,7 +23,6 @@ module.exports = ({
     ],
     require.resolve('babel-plugin-macros'),
     require.resolve('@loadable/babel-plugin'),
-    [require.resolve('babel-plugin-treat'), { alias: 'sku/treat' }],
     require.resolve('@babel/plugin-transform-runtime'),
   ];
 

packages/sku/config/eslint/importOrderConfig.js

@@ -29,7 +29,7 @@ module.exports = {
         ],
         pathGroups: [
           {
-            pattern: '*.+(treat|less|css)',
+            pattern: '*.@(less|css)',
             group: 'index',
             position: 'after',
             patternOptions: { matchBase: true },

packages/sku/config/webpack/plugins/createHtmlRenderPlugin.js

@@ -121,9 +121,6 @@ module.exports = () => {
     transformFilePath: transformOutputPath,
     mapStatsToParams,
     extraGlobals: {
-      // This fixes an issue where one of treats deps (@hapi/joek)
-      // accesses Buffer globally. Not great...
-      Buffer,
       // Allows Date serialization checks to work in render e.g. `myDate instance Date`
       Date,
     },

packages/sku/config/webpack/plugins/metrics-plugin/index.js

@@ -1,10 +1,6 @@
 const { performance } = require('perf_hooks');
 const prettyMilliseconds = require('pretty-ms');
 const debug = require('debug')('sku:metrics');
-const chalk = require('chalk');
-
-const { persistentCache } = require('../../../../context');
-const banner = require('../../../../lib/banner');
 const track = require('../../../../telemetry');
 
 const smp = 'sku-metrics-plugin';
@@ -14,7 +10,6 @@ class MetricsPlugin {
     this.initial = true;
     this.target = target;
     this.type = type;
-    this.builtTreatFiles = new Set();
     this.builtLessFiles = new Set();
   }
 
@@ -32,10 +27,6 @@ class MetricsPlugin {
           target: this.target,
           type: this.type,
         });
-        track.gauge('start.files.initial.treat', this.builtTreatFiles.size, {
-          target: this.target,
-          type: this.type,
-        });
         track.gauge('start.files.initial.less', this.builtLessFiles.size, {
           target: this.target,
           type: this.type,
@@ -51,56 +42,23 @@ class MetricsPlugin {
           target: this.target,
           type: this.type,
         });
-        track.gauge('start.files.rebuild.treat', this.builtTreatFiles.size, {
-          target: this.target,
-          type: this.type,
-        });
         track.gauge('start.files.rebuild.less', this.builtLessFiles.size, {
           target: this.target,
           type: this.type,
         });
       }
 
-      this.builtTreatFiles.clear();
       this.builtLessFiles.clear();
     });
 
     compiler.hooks.thisCompilation.tap(smp, (compilation) => {
       compilation.hooks.buildModule.tap(smp, (module) => {
         if (module.resource) {
-          if (module.resource.endsWith('.treat.ts')) {
-            this.builtTreatFiles.add(module.resource);
-          } else if (module.resource.endsWith('.less')) {
+          if (module.resource.endsWith('.less')) {
             this.builtLessFiles.add(module.resource);
           }
         }
       });
-
-      if (persistentCache) {
-        compilation.hooks.finishModules.tap(smp, () => {
-          const internalTreatFiles = Array.from(this.builtTreatFiles).filter(
-            (treatFile) => !treatFile.match(/node_modules|braid-design-system/),
-          );
-
-          if (internalTreatFiles.length > 0) {
-            const treatFileNumMsg =
-              internalTreatFiles.length > 1
-                ? `${internalTreatFiles.length} treat files were`
-                : `A treat file was`;
-
-            banner(
-              'error',
-              `${treatFileNumMsg} detected within your project while using 'persistentCache' mode.`,
-              [
-                `Set '${chalk.bold(
-                  'persistentCache: false',
-                )}' in your sku.config.js until all treat files have been removed from the project.`,
-              ],
-            );
-            process.exit(1);
-          }
-        });
-      }
     });
   }
 }

packages/sku/config/webpack/plugins/sku-webpack-plugin/index.js

@@ -14,7 +14,6 @@ const {
   SVG,
   resolvePackage,
 } = require('../../utils');
-const createTreatPlugin = require('../createTreatPlugin');
 const defaultCompilePackages = require('../../../../context/defaultCompilePackages');
 const validateOptions = require('./validateOptions');
 
@@ -50,7 +49,6 @@ class SkuWebpackPlugin {
       generateCSSTypes,
       browserslist,
       mode = compiler.options.mode,
-      libraryName,
       displayNamesProd,
       removeAssertionsInProduction,
       MiniCssExtractPlugin,
@@ -65,7 +63,7 @@ class SkuWebpackPlugin {
         include: this.include,
         oneOf: [
           {
-            compiler: /(vanilla-extract|treat-webpack-loader)/,
+            compiler: /(vanilla-extract)/,
             use: makeJsLoaders({
               target: 'node',
               lang: 'ts',
@@ -94,7 +92,7 @@ class SkuWebpackPlugin {
         include: this.include,
         oneOf: [
           {
-            compiler: /(vanilla-extract|treat-webpack-loader)/,
+            compiler: /(vanilla-extract)/,
             use: makeJsLoaders({
               target: 'node',
               lang: 'js',
@@ -204,14 +202,6 @@ class SkuWebpackPlugin {
       }
     }
 
-    createTreatPlugin({
-      target,
-      isProductionBuild,
-      libraryName,
-      browserslist,
-      MiniCssExtractPlugin,
-    }).apply(compiler);
-
     new VanillaExtractPlugin({
       identifiers: isProductionBuild ? 'short' : 'debug',
       outputCss: target === 'browser',

packages/sku/lib/validatePeerDeps.js

@@ -17,7 +17,7 @@ const asyncMap = (list, fn) => {
   return Promise.all(list.map((item) => fn(item)));
 };
 
-const singletonPackages = ['react-treat'];
+const singletonPackages = ['@vanilla-extract/css'];
 
 module.exports = async () => {
   try {

packages/sku/package.json

@@ -60,7 +60,6 @@
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "babel-plugin-treat": "^1.6.2",
     "babel-plugin-unassert": "^3.1.0",
     "browserslist": "^4.16.1",
     "browserslist-config-seek": "^2.1.0",
@@ -110,7 +109,6 @@
     "prettier": "^2.8.8",
     "pretty-ms": "^7.0.1",
     "react-refresh": "^0.14.0",
-    "react-treat": "^2.0.1",
     "require-from-string": "^2.0.2",
     "rimraf": "^5.0.0",
     "selfsigned": "^2.1.1",
@@ -120,7 +118,6 @@
     "svgo-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.1.4",
     "traverse": "^0.6.6",
-    "treat": "^2.0.4",
     "tree-kill": "^1.2.1",
     "typescript": "^4.5.0",
     "validate-npm-package-name": "^4.0.0",