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

.eslintrc.yml

@@ -3,3 +3,5 @@ extends:
 overrides:
     - files: ['*.js']
       parser: espree
+rules:
+    import/extensions: [error, {js: never, json: always, css: always}]

.github/actions/size-stats-message/action.yml

@@ -11,6 +11,9 @@ inputs:
     master-lib-overhead:
         description: 'Mistica lib size overhead (on master)'
         required: true
+    master-lib-overhead-gzip:
+        description: 'Mistica lib size overhead gzip (on master)'
+        required: true
     pr-total-js:
         description: 'Total JS size (on pr)'
         required: true
@@ -20,6 +23,9 @@ inputs:
     pr-lib-overhead:
         description: 'Mistica lib size overhead (on pr)'
         required: true
+    pr-lib-overhead-gzip:
+        description: 'Mistica lib size overhead gzip (on pr)'
+        required: true
 runs:
     using: 'node12'
     main: 'main.js'

.github/actions/size-stats-message/main.js

@@ -6,11 +6,13 @@ const main = async () => {
         totalJs: Number(core.getInput('master-total-js')),
         withoutIcons: Number(core.getInput('master-js-without-icons')),
         libOverhead: Number(core.getInput('master-lib-overhead')),
+        libOverheadGzip: Number(core.getInput('master-lib-overhead-gzip')),
     };
     const pr = {
         totalJs: Number(core.getInput('pr-total-js')),
         withoutIcons: Number(core.getInput('pr-js-without-icons')),
         libOverhead: Number(core.getInput('pr-lib-overhead')),
+        libOverheadGzip: Number(core.getInput('pr-lib-overhead-gzip')),
     };
 
     core.setOutput(
@@ -36,6 +38,11 @@ const main = async () => {
             <td>${prettyBytes(master.libOverhead)}
             <td>${prettyBytes(pr.libOverhead)}
             <td>${prettyBytes(pr.libOverhead - master.libOverhead, {signed: true})}
+        <tr>
+            <td><b>Lib overhead (gzip)</b>
+            <td>${prettyBytes(master.libOverheadGzip)}
+            <td>${prettyBytes(pr.libOverheadGzip)}
+            <td>${prettyBytes(pr.libOverheadGzip - master.libOverheadGzip, {signed: true})}
     </table>
     `
     );

.github/actions/size-stats/action.yml

@@ -12,6 +12,8 @@ output:
         description: 'JS size without icons'
     lib-overhead:
         description: 'Mistica lib size overhead'
+    lib-overhead-gzip:
+        description: 'Mistica lib size overhead (gzip)'
 runs:
     using: 'node12'
     main: 'main.js'

.github/actions/size-stats/main.js

@@ -7,6 +7,7 @@ const main = async () => {
     core.setOutput('total-js', sizeStats.totalJs);
     core.setOutput('js-without-icons', sizeStats.jsWithoutIcons);
     core.setOutput('lib-overhead', sizeStats.libOverhead);
+    core.setOutput('lib-overhead-gzip', sizeStats.libOverheadGzip);
 };
 
 main().catch((error) => {

.github/workflows/size-stats.yml

@@ -12,6 +12,7 @@ jobs:
             total-js: ${{ steps.stats.outputs.total-js }}
             js-without-icons: ${{ steps.stats.outputs.js-without-icons }}
             lib-overhead: ${{ steps.stats.outputs.lib-overhead }}
+            lib-overhead-gzip: ${{ steps.stats.outputs.lib-overhead-gzip }}
 
         steps:
             - uses: actions/checkout@v2
@@ -30,6 +31,7 @@ jobs:
             total-js: ${{ steps.stats.outputs.total-js }}
             js-without-icons: ${{ steps.stats.outputs.js-without-icons }}
             lib-overhead: ${{ steps.stats.outputs.lib-overhead }}
+            lib-overhead-gzip: ${{ steps.stats.outputs.lib-overhead-gzip }}
 
         steps:
             - uses: actions/checkout@v2
@@ -63,9 +65,11 @@ jobs:
                   master-total-js: ${{ needs.master-size-stats.outputs.total-js }}
                   master-js-without-icons: ${{ needs.master-size-stats.outputs.js-without-icons }}
                   master-lib-overhead: ${{ needs.master-size-stats.outputs.lib-overhead }}
+                  master-lib-overhead-gzip: ${{ needs.master-size-stats.outputs.lib-overhead-gzip }}
                   pr-total-js: ${{ needs.branch-size-stats.outputs.total-js }}
                   pr-js-without-icons: ${{ needs.branch-size-stats.outputs.js-without-icons }}
                   pr-lib-overhead: ${{ needs.branch-size-stats.outputs.lib-overhead }}
+                  pr-lib-overhead-gzip: ${{ needs.branch-size-stats.outputs.lib-overhead-gzip }}
 
             - name: Comment on PR
               uses: ./.github/shared-actions/novum/comment-pr

.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/overscroll-color-context.js.flow

@@ -5,5 +5,5 @@ declare type ProviderProps = {
   children: React.Node,
 };
 declare export var OverscrollColorProvider: (x: ProviderProps) => React.Node;
-declare var OverscrollColor: () => null;
+declare var OverscrollColor: () => React.Node;
 declare export default typeof OverscrollColor;

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",
@@ -101,14 +108,18 @@
         "flow-bin": "^0.152.0",
         "flow-typed": "^3.7.0",
         "glob": "^7.2.0",
+        "gzip-size": "^6.0.0",
         "husky": "^7.0.4",
         "is-ci": "^3.0.1",
         "jest": "^27.5.1",
         "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 +131,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;