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

atabel · 2022-10-25T08:57:05Z

Tasks

To do:

Make storybook work
Make playroom work
Setup vanilla extract build and generate mistica.css file
Make jest unit test work with vanilla extract
Configure eslint import/extensions rule to work with .css.ts extensions
- configured locally, but we should consider moving that config to @telefonica/eslint-config
Vendor prefixes
Automatic box-sizing: border-box
Figure out the best way to work with media queries
- media queries are now static and not configurable. I've deprecated ThemeConfig['mediaQueries'] and will be removed in future versions
- We were using ThemeConfig['mediaQueries'] configuration in Playroom for two things: override desktopOrTabletMinHeight to 0 to not fallback to mobile break point when the bottom code panel is shown, and for the PreviewTools forceMobile and forceDesktop props. Those props are heavily used in Mistica docs in brand factory site. To support these use cases the solution I've found is making two additional Playroom static builds served in /playroom-desktop and /playroom-mobile which use custom media query breakpoints (see playroom.config.js changes). The downside is that this will increase the preview deployments time. A future improvement could be to only make these additional playroom builds when deploying to prod, and skip them in PR previews.
Make ssr tests work

Nice to have:

Make storybook run with vite instead of webpack?

Release plan

We can release a first version with all the setup and then migrate component by component in future PRs

Major version?

Some breaking changes:

Once we remove jss completely from mistica we'll need to remove the createUseStyles function, so we'll need a major version for sure. But this isn't done in this PR yet and we can do it in future PRs once we have migrated all components
To use components that use vanilla extract, the app that uses mistica needs to include/serve the new css/mistica.css file. This is a breaking change. We could find a way to mitigate this by inlining the css in the js or something. It isn't the more performance solution but could be a good transient solution that doesn't force us to release a major version yet

The plan:

Merge this branch in a first minor version:
- the generated Vanilla Extract css will be injected in js and rendered in a <style> tag by ThemeContextProvider.
- Deprecate ThemeConfig['mediaQueries'] (see details above).
- Deprecate createUseStyles
In future PRs, migrate all the components to VE
Write docs with a migration path for apps using createUseStyles from mistica
In a major release, remove JSS from mistica.

github-actions · 2022-10-25T08:59:35Z

Size stats

	master	this branch	diff
Total JS	8.43 MB	4.03 MB	-4.4 MB
JS without icons	905 kB	451 kB	-454 kB
Lib overhead	160 kB	155 kB	-5.07 kB
Lib overhead (gzip)	0 B	47.3 kB	+47.3 kB

github-actions · 2022-10-26T10:41:25Z

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-2tehy5vuv-tuentisre.vercel.app

Built with commit 1185096.
This pull request is being automatically deployed with vercel-action

github-actions · 2022-10-26T10:50:42Z

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

atabel · 2022-10-26T13:03:04Z

.gitignore

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


this file is generated by yarn build

sergivillar · 2022-10-26T15:18:33Z

src/avatar.tsx

+                className={classes.avatar}
+                role="img"
+                aria-label={ariaLabel ?? initials}
+                style={{width: size, height: size, color: textColor, background: backgroundColor}}


so now we will use more and more inline styles to support things like 'isInverse' colors right? or could we create a common set of styles with sprinkles for that?

we can use sprinkles when possible (as an alternative to inline styles), but only when dynamic values are available in our sprinkles definitions. For example, if a component receives a prop color, we can use it with sprinkles if the color is one of the skin, but if the color prop accepts any string then we need to use inline styles

src/sprinkles.css.ts

sergivillar · 2022-10-26T15:32:37Z

src/sprinkles.css.ts

+
+const sizes = [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 72, 80] as const;
+
+const commonProperties = defineProperties({


from the documentation

conditions: { mobile: {}, tablet: { '@media': 'screen and (min-width: 768px)' }, desktop: { '@media': 'screen and (min-width: 1024px)' } }

i think this is also interesting

I still need to figure out how to work with mediaqueries, because until now mistica media queries have been configurable with context, but I don't know how to make them configurable and at the same time be able to use them in vanilla extract / sprinkles. (css doesn't allow variables in @media 😞 )

I've added a TODO to the PR list

src/theme-context-provider.tsx

sergivillar · 2022-10-27T06:55:51Z

really nice, two questions

how vanilla-extract solve the issue of hash classnames generation in SSR? we had issues with this in JSS
what will happen with the currently createUserStyles?

atabel · 2022-10-27T11:42:22Z

really nice, two questions

how vanilla-extract solve the issue of hash classnames generation in SSR? we had issues with this in JSS

Classnames are generated at build time, so there should never be hydration missmatches

what will happen with the currently createUserStyles?

As said in "Release plan", once we migrate all components to VS, we'll remove JSS from mistica, so the apps using mistica which were using createUseStyles will need to use JSS directly or migrate to other style solution.

sergivillar · 2022-11-02T15:43:46Z

playroom.config.js

+const getMediaQueriesConfig = () => {
+    const impossibleSize = 999999;
+
+    if (process.env.FORCE_MOBILE) {
+        return {
+            tabletMinWidth: impossibleSize,
+            desktopMinWidth: impossibleSize,
+            largeDesktopMinWidth: impossibleSize,
+            desktopOrTabletMinHeight: impossibleSize,
+        };
+    }
+    if (process.env.FORCE_DESKTOP) {
+        return {
+            tabletMinWidth: 0,
+            desktopMinWidth: 0,
+            largeDesktopMinWidth: impossibleSize,
+            desktopOrTabletMinHeight: 0,
+        };
+    }
+    return {
+        desktopOrTabletMinHeight: 0,
+    };
+};
+
+const getOutputPath = () => {
+    if (process.env.FORCE_MOBILE) {
+        return './public/playroom-mobile/';
+    }
+    if (process.env.FORCE_DESKTOP) {
+        return './public/playroom-desktop/';
+    }
+    return './public/playroom/';
+};


maybe this file could include a comment explaining the reasons of this, as stated in the PR description

sergivillar · 2022-11-02T16:25:58Z

where is done the double build that you talked about in the description? I cant see it @atabel

atabel · 2022-11-03T08:06:25Z

where is done the double build that you talked about in the description? I cant see it @atabel

see package.json vercel-build script

src/theme-context-provider.tsx

atabel · 2022-11-07T11:12:08Z

src/index.tsx

@@ -15,6 +15,7 @@ export {
    ServerSideStyles,
 } from './jss';

+export {vars as skinVars} from './skins/skin-contract.css';


Export vars (skin colors) to be usable by apps using Vanilla Extract

atabel · 2022-11-07T11:14:42Z

vite.config.js

+            // Change .css.js files to something else so that they don't get re-processed by consumer apps using vanilla extract too
+            fileNames: ({name}) => `${name.replace(/\.css$/, '.css.vanilla')}.js`,


Vanilla Extract Next plugin applies to node_modules too, so it tries to re-process mistica files (which are already compiled by mistica build) and result in errors. With this change, we make those files invisible for the Next plugin in apps using mistica and VE (zeus, for example).

perhaps a better name would be .css.mistica

sergivillar · 2022-11-07T13:20:03Z

vite.config.js

+        react(),
+        vanillaExtractPlugin(),
+        noBundlePlugin({
+            // Change .css.js files to something else so that they don't get re-processed by consumer apps using vanilla extract too


this is because VE process all files ended in css? ir is because of vite?

# [12.9.0](v12.8.0...v12.9.0) (2022-11-10) ### Bug Fixes * **Cards:** close button ([#576](#576)) ([4c27059](4c27059)) * **playroom:** PreviewTools tabs in desktop ([#574](#574)) ([76f39cc](76f39cc)) ### Features * **Vanilla Extract:** as a future replacement of jss ([#561](#561)) ([8e54a95](8e54a95))

tuentisre · 2022-11-10T09:31:56Z

🎉 This PR is included in version 12.9.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

atabel added 3 commits October 20, 2022 17:03

playroom and storybook working

f841a5e

build

f75a192

Merge branch 'master' into atoledano-vanilla

0a3b84c

atabel added 9 commits October 25, 2022 12:11

removed unused imports

0823022

ssr tests

1ab5c3e

fix playroom build

36754f6

autoprefixer

9302619

comment

68e3282

added postcss plugin for automatic box-sizing border-box

dd14992

make postcss work in storybook

f630d09

fix ts

18ff594

fix vercel deploy

e6e8d15

update swc

5cd60b9

atabel commented Oct 26, 2022

View reviewed changes

atabel added 2 commits October 26, 2022 16:15

fix test

e28b19f

fix ssr tests

b703449

sergivillar reviewed Oct 26, 2022

View reviewed changes

src/sprinkles.css.ts Show resolved Hide resolved

sergivillar reviewed Oct 26, 2022

View reviewed changes

src/theme-context-provider.tsx Outdated Show resolved Hide resolved

atabel requested review from pladaria and brtbrt October 27, 2022 06:40

atabel added 3 commits October 27, 2022 11:00

fix eslint rule

ac1ad82

migrate Box

8b57721

revert box

bf0df66

atabel requested review from sergivillar, brtbrt and pladaria November 2, 2022 15:37

sergivillar reviewed Nov 2, 2022

View reviewed changes

brtbrt approved these changes Nov 2, 2022

View reviewed changes

atabel added 6 commits November 3, 2022 11:34

Merge branch 'master' into atoledano-vanilla

a95d1d2

comment vercel builds

ab8e52b

make forceMobile and forceDesktop work in PreviewTools

690f2ca

handle false in forceMobile/forceDesktop

ce6ced7

Merge branch 'master' into atoledano-vanilla

b44bab2

handle false in forceMobile/forceDesktop

941ed0e

pladaria reviewed Nov 3, 2022

View reviewed changes

src/theme-context-provider.tsx Outdated Show resolved Hide resolved

pladaria approved these changes Nov 3, 2022

View reviewed changes

atabel added 3 commits November 3, 2022 16:42

grammar

9bb76ba

Merge branch 'master' into atoledano-vanilla

b85347c

support consummer apps to use VE too

039381b

atabel commented Nov 7, 2022

View reviewed changes

pladaria approved these changes Nov 7, 2022

View reviewed changes

change .vanilla.css to .mistica-vanilla.css

097ee7b

sergivillar reviewed Nov 7, 2022

View reviewed changes

Merge branch 'master' into atoledano-vanilla

1185096

atabel changed the title ~~Introduce vanilla extract as a future replacement of jss in mistica~~ feat(Vanilla Extract): as a future replacement of jss Nov 8, 2022

atabel merged commit 8e54a95 into master Nov 8, 2022

atabel deleted the atoledano-vanilla branch November 8, 2022 10:43

tuentisre added the released label Nov 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

atabel commented Oct 25, 2022 •

edited

Loading

github-actions bot commented Oct 25, 2022 •

edited

Loading

github-actions bot commented Oct 26, 2022 •

edited

Loading

github-actions bot commented Oct 26, 2022 •

edited

Loading

atabel Oct 26, 2022

sergivillar Oct 26, 2022

atabel Oct 27, 2022

sergivillar Oct 26, 2022

atabel Oct 27, 2022 •

edited

Loading

atabel Oct 27, 2022

sergivillar commented Oct 27, 2022

atabel commented Oct 27, 2022

sergivillar Nov 2, 2022

sergivillar commented Nov 2, 2022

atabel commented Nov 3, 2022

atabel Nov 7, 2022

atabel Nov 7, 2022

pladaria Nov 7, 2022

sergivillar Nov 7, 2022

tuentisre commented Nov 10, 2022


		const sizes = [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 72, 80] as const;

		const commonProperties = defineProperties({

		// Change .css.js files to something else so that they don't get re-processed by consumer apps using vanilla extract too
		fileNames: ({name}) => `${name.replace(/\.css$/, '.css.vanilla')}.js`,

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

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

Conversation

atabel commented Oct 25, 2022 • edited Loading

Tasks

To do:

Nice to have:

Release plan

Major version?

The plan:

github-actions bot commented Oct 25, 2022 • edited Loading

github-actions bot commented Oct 26, 2022 • edited Loading

github-actions bot commented Oct 26, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atabel Oct 27, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sergivillar commented Oct 27, 2022

atabel commented Oct 27, 2022

Choose a reason for hiding this comment

sergivillar commented Nov 2, 2022

atabel commented Nov 3, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tuentisre commented Nov 10, 2022

atabel commented Oct 25, 2022 •

edited

Loading

github-actions bot commented Oct 25, 2022 •

edited

Loading

github-actions bot commented Oct 26, 2022 •

edited

Loading

github-actions bot commented Oct 26, 2022 •

edited

Loading

atabel Oct 27, 2022 •

edited

Loading