feat(Vanilla Extract): as a future replacement of jss

.gitignore

@@ -18,6 +18,7 @@ storybook-static/
 .vercel
 src/generated/mistica-icons/index.tsx.txt
 reports
+css/mistica.css
 
 .yarn/*
 !.yarn/cache

.storybook/main.js

@@ -1,4 +1,6 @@
 const path = require('path');
+const {VanillaExtractPlugin} = require('@vanilla-extract/webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const replaceBabelWithSwc = (config) => {
     // Replace default webpack babel-loader with swc-loader
@@ -17,9 +19,49 @@ const replaceBabelWithSwc = (config) => {
     return config;
 };
 
+const addVanillaExtractSupport = (config) => {
+    config.module.rules.forEach((rule) => {
+        if (
+            rule.test &&
+            (Array.isArray(rule.test)
+                ? rule.test.some((exp) => exp.test('random.css'))
+                : rule.test.test('random.css'))
+        ) {
+            const previousExclude = rule.exclude || [];
+            rule.exclude = [
+                ...(Array.isArray(previousExclude) ? previousExclude : [previousExclude]),
+                /\.vanilla\.css$/,
+            ];
+        }
+    });
+
+    config.plugins.push(new VanillaExtractPlugin(), new MiniCssExtractPlugin());
+    config.module.rules.push({
+        test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
+        use: [
+            MiniCssExtractPlugin.loader,
+            {
+                loader: require.resolve('css-loader'),
+                options: {
+                    url: false, // Required as image imports should be handled via JS/TS import statements
+                },
+            },
+            require.resolve('postcss-loader'),
+        ],
+    });
+};
+
 module.exports = {
     stories: ['./welcome-story.js', '../src/**/__stories__/*-story.tsx'],
     addons: [
+        {
+            name: '@storybook/addon-postcss',
+            options: {
+                postcssLoaderOptions: {
+                    implementation: require('postcss'),
+                },
+            },
+        },
         '@storybook/addon-links',
         {
             name: '@storybook/addon-storysource',
@@ -45,6 +87,8 @@ module.exports = {
             ignored: [/node_modules/, /__tests__/, /__acceptance_tests__/, /__screenshot_tests__/],
         };
 
+        addVanillaExtractSupport(config);
+
         return replaceBabelWithSwc(config);
     },
     managerWebpack: async (config) => {

flow-defs/avatar.css.js.flow

@@ -0,0 +1,4 @@
+// @flow
+
+declare export var avatar: string;
+declare export var image: string;

flow-defs/badge.css.js.flow

@@ -0,0 +1,7 @@
+// @flow
+
+declare export var container: string;
+declare export var badge: string;
+declare export var badgeNumber: string;
+declare export var badgeWithChildren: string;
+declare export var badgeBigNumber: string;

flow-defs/skins/skin-contract.css.js.flow

@@ -0,0 +1,6 @@
+// @flow
+import type {Colors} from './types';
+
+declare export var vars: {
+    colors: Colors,
+};

flow-defs/sprinkles.css.js.flow

@@ -0,0 +1,4 @@
+// @flow
+
+declare export var sprinkles: any; // TODO: improve this
+export type Sprinkles = any; // TODO: improve this

flow-defs/tag.css.js.flow

@@ -0,0 +1,3 @@
+// @flow
+
+declare export var tag: string;

flow-overrides/skins/skin-contract.css.js.flow

@@ -0,0 +1,6 @@
+// @flow
+import type {Colors} from './types';
+
+declare export var vars: {
+    colors: Colors,
+};

flow-overrides/sprinkles.css.js.flow

@@ -0,0 +1,4 @@
+// @flow
+
+declare export var sprinkles: any; // TODO: improve this
+export type Sprinkles = any; // TODO: improve this

jest.base.config.js

@@ -10,6 +10,7 @@ module.exports = {
         '!**/__*__/**', // ignore tests, acceptance, stories, etc
     ],
     transform: {
+        '\\.css\\.ts$': '@vanilla-extract/jest-transform',
         '^.+\\.(t|j)sx?$': ['@swc/jest', {...swcConfig, sourceMaps: 'inline'}],
     },
     coverageReporters: ['json-summary', 'lcov'],

package.json

@@ -30,7 +30,7 @@
         "storybook-for-acceptance-tests": "cross-env NODE_ENV=production yarn storybook --ci 2>&1",
         "playroom": "playroom start",
         "gen-ts-defs": "rimraf dist-ts && tsc --project tsconfig.production.json --emitDeclarationOnly && cp -r dist-ts/src/* dist && rimraf dist-ts",
-        "now-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
+        "vercel-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
         "storybook-static": "rimraf public && yarn build-storybook -s ./.storybook/css/fonts -o public --quiet",
         "serve-static-storybook": "node ./scripts/serve-static-storybook.js",
         "detect-circular-dependencies": "npx dpdm --circular src/index.tsx",
@@ -67,16 +67,17 @@
         "@storybook/addon-actions": "6.4.19",
         "@storybook/addon-controls": "6.4.19",
         "@storybook/addon-links": "6.4.19",
+        "@storybook/addon-postcss": "^2.0.0",
         "@storybook/addon-storysource": "6.4.19",
         "@storybook/addon-viewport": "6.4.19",
         "@storybook/addons": "6.4.19",
         "@storybook/cli": "6.4.19",
         "@storybook/components": "6.4.19",
         "@storybook/react": "6.4.19",
         "@storybook/theming": "6.4.19",
-        "@swc/cli": "^0.1.56",
-        "@swc/core": "^1.2.160",
-        "@swc/jest": "^0.2.20",
+        "@swc/cli": "^0.1.57",
+        "@swc/core": "^1.3.11",
+        "@swc/jest": "^0.2.23",
         "@telefonica/acceptance-testing": "^2.7.0",
         "@telefonica/eslint-config": "^1.0.7",
         "@telefonica/prettier-config": "^1.1.0",
@@ -86,12 +87,18 @@
         "@testing-library/user-event": "^13.5.0",
         "@types/detect-port": "^1.3.2",
         "@types/jest-environment-puppeteer": "^4.4.1",
+        "@types/mini-css-extract-plugin": "^1.2.2",
         "@types/mkdirp": "^1.0.2",
         "@types/react-autosuggest": "^10.1.5",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-transition-group": "^4.4.4",
         "@types/rimraf": "^3.0.2",
         "@types/semver-compare": "^1.0.1",
+        "@vanilla-extract/jest-transform": "^1.0.1",
+        "@vanilla-extract/vite-plugin": "^3.6.1",
+        "@vanilla-extract/webpack-plugin": "^2.2.0",
+        "@vitejs/plugin-react": "^2.1.0",
+        "autoprefixer": "^10.4.12",
         "axe-html-reporter": "^2.2.3",
         "cpx": "^1.5.0",
         "cross-env": "^7.0.3",
@@ -107,8 +114,11 @@
         "jest-environment-puppeteer": "^4.4.0",
         "jimp": "^0.16.1",
         "lint-staged": "^12.3.7",
+        "mini-css-extract-plugin": "^1.6.2",
         "node-fetch": "^2.6.7",
         "playroom": "^0.28.0",
+        "postcss": "^8.4.18",
+        "postcss-loader": "^4.2.0",
         "prettier": "^2.6.1",
         "pretty-bytes": "^5.6.0",
         "prop-types": "^15.8.1",
@@ -120,12 +130,17 @@
         "semantic-release": "^19.0.2",
         "static-server": "^2.2.1",
         "swc-loader": "^0.1.15",
-        "typescript": "^4.6.3"
+        "typescript": "^4.6.3",
+        "vite": "^3.1.8",
+        "vite-plugin-no-bundle": "^1.0.6"
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
         "@tef-novum/webview-bridge": "^3.8.0",
         "@telefonica/libphonenumber": "^2.8.1",
+        "@vanilla-extract/css": "^1.9.1",
+        "@vanilla-extract/dynamic": "^2.0.2",
+        "@vanilla-extract/sprinkles": "^1.5.0",
         "classnames": "^2.3.1",
         "jss": "^10.9.0",
         "jss-plugin-camel-case": "^10.9.0",

playroom.config.js

@@ -35,7 +35,7 @@ const config = {
         module: {
             rules: [
                 {
-                    test: /\.tsx$/,
+                    test: /\.tsx?$/,
                     include: [
                         path.resolve(__dirname, 'src'),
                         path.resolve(__dirname, 'playroom'),
@@ -51,6 +51,20 @@ const config = {
                     test: /(reset|roboto)\.css$/,
                     use: ['style-loader', 'css-loader'],
                 },
+                {
+                    test: /\.vanilla\.css$/i,
+                    // Don't process vanilla files from Playroom as they are handled separately.
+                    exclude: /node_modules\/playroom/,
+                    use: [
+                        'style-loader',
+                        {
+                            loader: require.resolve('css-loader'),
+                            options: {
+                                url: false,
+                            },
+                        },
+                    ],
+                },
             ],
         },
     }),

postcss.config.js

@@ -0,0 +1,4 @@
+// vite automatically apply postcss to css files, like the generated mistica.css file from vanilla extract.
+module.exports = {
+    plugins: [require('autoprefixer'), require('./postcss/box-sizing-border-box')],
+};

postcss/box-sizing-border-box.js

@@ -0,0 +1,23 @@
+const addBoxSizing = (decl) => {
+    decl.cloneBefore({prop: 'box-sizing', value: 'border-box'});
+};
+
+/**
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = () => {
+    return {
+        postcssPlugin: 'box-sizing-border-box',
+
+        Declaration: {
+            width: addBoxSizing,
+            height: addBoxSizing,
+            'min-width': addBoxSizing,
+            'min-height': addBoxSizing,
+            'max-width': addBoxSizing,
+            'max-height': addBoxSizing,
+        },
+    };
+};
+
+module.exports.postcss = true;

scripts/compile.js

@@ -1,26 +1,14 @@
 const childProcess = require('child_process');
-const rimraf = require('rimraf');
 const execSync = childProcess.execSync;
 
 const run = (command) => {
     execSync(command, {stdio: 'inherit'});
 };
 
 const compile = () => {
-    run(`yarn swc src --out-dir dist-es --extensions .tsx`);
-
-    [
-        '__tests__',
-        '__acceptance_tests__',
-        '__screenshot_tests__',
-        '__type_tests__',
-        '__stories__',
-        'test-utils',
-    ].forEach((dirName) => {
-        rimraf.sync(`dist-es/${dirName}`);
-    });
-
+    run(`yarn vite build`);
     run(`yarn swc dist-es --out-dir dist -C module.type=commonjs`);
+    run(`cp dist-es/style.css css/mistica.css`);
 };
 
 if (require.main === module) {