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

.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/ci.yml

@@ -22,8 +22,15 @@ jobs:
                   PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 'true'
               run: yarn install --immutable --immutable-cache
 
-            - name: Run tests
-              run: yarn ci
+            - run: yarn lint
+            - run: yarn prettier-check
+            - run: yarn circular-dependencies
+            - run: yarn build
+            - run: yarn ts-check
+            - run: yarn storybook-static
+            - run: yarn test --ci
+            - run: NO_BUILD=true yarn test-ssr --ci
+            - run: yarn test-acceptance --ci
 
             - name: 'Upload failed screenshot diffs'
               uses: './.github/actions/upload-failed-screenshots'

.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,50 @@ const replaceBabelWithSwc = (config) => {
     return config;
 };
 
+const addVanillaExtractSupport = (config) => {
+    // Look for rules that match CSS files and make them ignore `.vanilla.css` files (CSS files generated by vanilla-extract)
+    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 +88,8 @@ module.exports = {
             ignored: [/node_modules/, /__tests__/, /__acceptance_tests__/, /__screenshot_tests__/],
         };
 
+        addVanillaExtractSupport(config);
+
         return replaceBabelWithSwc(config);
     },
     managerWebpack: async (config) => {

README.md

@@ -95,7 +95,6 @@ Start prototyping interfaces with Mistica components in the
 - [Understanding Mistica's layout components](https://github.com/Telefonica/mistica-web/blob/master/doc/layout.md)
 - [Working with forms](https://github.com/Telefonica/mistica-web/blob/master/doc/forms.md)
 - [Theme config options](https://github.com/Telefonica/mistica-web/blob/master/doc/theme-config.md)
-- [Customize media query break points](https://github.com/Telefonica/mistica-web/blob/master/doc/media-queries.md)
 - [Customize default texts](https://github.com/Telefonica/mistica-web/blob/master/doc/texts.md)
 - [Analytics](https://github.com/Telefonica/mistica-web/blob/master/doc/analytics.md)
 - [Style your components](https://github.com/Telefonica/mistica-web/blob/master/doc/styles.md)

doc/theme-config.md

@@ -20,12 +20,6 @@ type ThemeConfig = {
   analytics?: {
     logEvent: (event: TrackingEvent) => Promise<void>;
   };
-  mediaQueries?: {
-    tabletMinWidth: number;
-    desktopMinWidth: number;
-    largeDesktopMinWidth: number;
-    desktopOrTabletMinHeight: number;
-  };
   Link?: LinkComponent;
   useHrefDecorator: () => (href: string) => string;
 };
@@ -56,7 +50,6 @@ Here is a description of every attribute:
     into account.
 - `texts?`: some copies you can customize. See [customizable texts doc](./texts.md).
 - `analytics?`: see [analytics docs](./analytics.md).
-- `mediaQueries?`: see [media queries doc](./media-queries.md).
 - `Link?`: the `Link` component you want to use by Touchables that use the prop `to`. By default, the lib uses
   an anchor tag (`<a>`). Use this prop to use the Link component from ReactRouter, Next.js or any other
   library.

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/index.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 declare export { createUseStyles, getJss, ServerSideStyles } from "./jss";
+declare export { vars as skinVars } from "./skins/skin-contract.css";
 declare export { default as ThemeContext } from "./theme-context";
 declare export { default as ThemeContextProvider } from "./theme-context-provider";
 declare export { default as ScreenReaderOnly } from "./screen-reader-only";

flow-defs/media-queries.css.js.flow

@@ -0,0 +1,21 @@
+// @flow
+
+declare export var mediaQueriesConfig: {
+  tabletMinWidth: number,
+  desktopMinWidth: number,
+  largeDesktopMinWidth: number,
+  desktopOrTabletMinHeight: number,
+};
+declare export var mobile: string;
+declare export var tablet: string;
+declare export var desktop: string;
+declare export var largeDesktop: string;
+declare export var tabletOrBigger: string;
+declare export var tabletOrSmaller: string;
+declare export var desktopOrBigger: string;
+declare export var supportsHover: "@media (pointer: fine), (pointer: none)";
+/**
+ * Scopes the styles to touchable devices.
+ * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
+ */
+declare export var touchableOnly: "@media (pointer: coarse), @media (hover: none)";

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/snackbar.css.js.flow

@@ -0,0 +1,14 @@
+// @flow
+
+declare export var TRANSITION_TIME_IN_MS: 300;
+declare export var snackbar: string;
+declare export var snackbarOpen: string;
+declare export var wrapper: string;
+declare export var wrapperCritical: string;
+declare export var wrapperInfo: string;
+declare export var wrapperOpen: string;
+declare export var content: string;
+declare export var button: string;
+declare export var longButton: string;
+declare export var buttonInfo: string;
+declare export var buttonCritical: string;

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-defs/theme-context-provider.js.flow

@@ -16,6 +16,7 @@ declare type Props = {
    * Once we migrate to React18, we could remove this prop and use the useId hook instead.
    */
   providerId?: string,
+  as?: string,
   children?: React.Node,
 };
 declare var ThemeContextProvider: React.ComponentType<Props>;

flow-defs/theme.js.flow

@@ -40,16 +40,13 @@ declare var TEXTS_ES: {
   carouselPrevButton: string,
 };
 declare export var getTexts: (locale: Locale) => typeof TEXTS_ES;
+declare export var NAVBAR_HEIGHT_MOBILE: 56;
+declare export var NAVBAR_HEIGHT_DESKTOP: 80;
 declare export var dimensions: {
   headerMobileHeight: number,
   headerDesktopHeight: number,
 };
-declare export var mediaQueriesConfig: {
-  tabletMinWidth: number,
-  desktopMinWidth: number,
-  largeDesktopMinWidth: number,
-  desktopOrTabletMinHeight: number,
-};
+declare export { mediaQueriesConfig } from "./media-queries.css";
 declare type LinkComponent = React.ComponentType<{
   style?: CssStyle,
   className?: string,
@@ -99,8 +96,12 @@ export type ThemeConfig = {
     eventFormat?: EventFormat,
   },
   dimensions?: {
-    headerMobileHeight: number,
+    headerMobileHeight: number | "mistica",
   },
+
+  /**
+   * @deprecated in future versions, mistica won't allow to configure media query breakpoints.
+   */
   mediaQueries?: {
     tabletMinWidth: number,
     desktopMinWidth: number,
@@ -139,6 +140,5 @@ export type Theme = {
   isIos: boolean,
   useHrefDecorator: () => (href: string) => string,
 };
-declare export {};
 
 import { type CssStyle } from "./__css_types__.js.flow";

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