feat(react-theme-sass): Add SASS variables mapped to CSS variables provided by react-theme by miroslavstastny · Pull Request #20808 · microsoft/fluentui

miroslavstastny · 2021-11-28T20:35:21Z

Add react-theme-sass package with SCSS variables mapped to v9 theme CSS variables

Pull request checklist

Addresses an existing issue: Fixes Plan for (P1): Generate SASS files for tokens. SASS is needed by various partners (P2) #19385
Include a change request file using $ yarn change

Description of changes

There are usecases where partners want to use v9 theming in their existing SASS-based code.
The plan is to have FluentProvider set the v9 theme and SASS styles to use the theme.

The theme is accessible as a set of CSS variables managed by the provider:

But any code should never hardcode the CSS variable names as those are internal to the FUIv9 implementation and might change (e.g. we might switch to hashed variable names).

This PR adds a react-theme-sass package which exports SCSS variables which are mapped to CSS variables. Should the CSS variable names change, only the mapping will change, the SCSS variable names will remain the same (those currently match the token names).

Expected usage

@import "~@fluentui/react-theme-sass";

.brandButton {
  color: $colorBrandForeground1;
  background: $colorBrandBackground;
  border-radius: $borderRadiusLarge;
}

The @fluentui/react-theme-sass package will NOT be re-exported by @fluentui/react-components. It is consumer's responsibility to install the package explicitly and keep the version in sync with @fluentui/react-components.

…ovided by react-theme

fabricteam · 2021-11-28T20:41:38Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`54.888 kB` `17.524 kB`
`react-avatar` Avatar	`44.266 kB` `12.603 kB`
`react-badge` Badge	`24.19 kB` `7.107 kB`
`react-badge` CounterBadge	`25.058 kB` `7.407 kB`
`react-badge` PresenceBadge	`22.507 kB` `6.587 kB`
`react-button` Button	`28.197 kB` `8.093 kB`
`react-button` CompoundButton	`33.494 kB` `9.054 kB`
`react-button` MenuButton	`30.118 kB` `8.728 kB`
`react-button` SplitButton	`36.193 kB` `9.798 kB`
`react-button` ToggleButton	`37.434 kB` `8.689 kB`
`react-card` Card - All	`48.488 kB` `14.347 kB`
`react-card` Card	`43.997 kB` `13.195 kB`
`react-card` CardFooter	`7.618 kB` `3.232 kB`
`react-card` CardHeader	`8.885 kB` `3.673 kB`
`react-card` CardPreview	`7.811 kB` `3.361 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`166.089 kB` `47.059 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.489 kB` `10.636 kB`
`react-divider` Divider	`15.337 kB` `5.544 kB`
`react-image` Image	`10.075 kB` `3.942 kB`
`react-input` Input	`21.474 kB` `7.118 kB`
`react-label` Label	`8.323 kB` `3.479 kB`
`react-link` Link	`11.072 kB` `4.496 kB`
`react-make-styles` makeStaticStyles (runtime)	`8.161 kB` `3.564 kB`
`react-make-styles` makeStyles + mergeClasses (runtime)	`19.554 kB` `7.446 kB`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.793 kB` `1.267 kB`
`react-menu` Menu (including children components)	`103.149 kB` `31.833 kB`
`react-menu` Menu (including selectable components)	`105.4 kB` `32.191 kB`
`react-popover` Popover	`95.348 kB` `29.017 kB`
`react-portal` Portal	`6.249 kB` `2.163 kB`
`react-positioning` usePopper	`22.808 kB` `7.935 kB`
`react-provider` FluentProvider	`13.972 kB` `5.237 kB`
`react-slider` Slider	`22.936 kB` `7.751 kB`
`react-switch` Switch	`25.397 kB` `8.208 kB`
`react-text` Text - Default	`10.769 kB` `4.224 kB`
`react-text` Text - Wrappers	`14.077 kB` `4.565 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.426 kB` `6.551 kB`
`react-theme` Teams: Light theme	`18.42 kB` `5.27 kB`
`react-tooltip` Tooltip	`45.013 kB` `15.641 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against d525c8b2106551865d648873210a6b48c2326ecb}

codesandbox-ci · 2021-11-28T20:43:55Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 84c2858:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2021-11-28T20:48:47Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: d525c8b2106551865d648873210a6b48c2326ecb (build)

fabricteam · 2021-11-28T21:11:19Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
ContextualMenu	mount	15514	7253	1000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	832	825	5000
BaseButton	mount	794	814	5000
Breadcrumb	mount	2309	2303	1000
ButtonNext	mount	442	437	5000
Checkbox	mount	1343	1328	5000
CheckboxBase	mount	1122	1137	5000
ChoiceGroup	mount	4108	4121	5000
ComboBox	mount	855	863	1000
CommandBar	mount	8861	8824	1000
ContextualMenu	mount	15514	7253	1000	Possible regression
DefaultButton	mount	1000	996	5000
DetailsRow	mount	3303	3252	5000
DetailsRowFast	mount	3280	3241	5000
DetailsRowNoStyles	mount	3099	3112	5000
Dialog	mount	2232	2231	1000
DocumentCardTitle	mount	155	156	1000
Dropdown	mount	2760	2772	5000
FluentProviderNext	mount	1661	1784	5000
FluentProviderWithTheme	mount	140	126	10
FluentProviderWithTheme	virtual-rerender	92	100	10
FluentProviderWithTheme	virtual-rerender-with-unmount	175	188	10
FocusTrapZone	mount	1597	1642	5000
FocusZone	mount	1566	1546	5000
IconButton	mount	1520	1517	5000
Label	mount	329	316	5000
Layer	mount	2594	2575	5000
Link	mount	430	433	5000
MakeStyles	mount	1477	1455	50000
MenuButton	mount	1272	1265	5000
MessageBar	mount	1720	1745	5000
Nav	mount	2874	2858	1000
OverflowSet	mount	955	964	5000
Panel	mount	2152	2168	1000
Persona	mount	732	756	1000
Pivot	mount	1237	1271	1000
PrimaryButton	mount	1112	1142	5000
Rating	mount	6645	6558	5000
SearchBox	mount	1150	1149	5000
Shimmer	mount	2182	2159	5000
Slider	mount	1693	1661	5000
SpinButton	mount	4295	4277	5000
Spinner	mount	394	398	5000
SplitButton	mount	2721	2690	5000
Stack	mount	472	466	5000
StackWithIntrinsicChildren	mount	1992	1995	5000
StackWithTextChildren	mount	4467	4503	5000
SwatchColorPicker	mount	10604	9728	5000
TagPicker	mount	2338	2312	5000
TeachingBubble	mount	11320	11449	5000
Text	mount	390	393	5000
TextField	mount	1212	1183	5000
ThemeProvider	mount	1050	1044	5000
ThemeProvider	virtual-rerender	558	549	5000
ThemeProvider	virtual-rerender-with-unmount	1633	1607	5000
Toggle	mount	700	701	5000
buttonNative	mount	138	131	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	166	154	1.08:1
HeaderMinimalPerf.default	327	307	1.07:1
AvatarMinimalPerf.default	177	169	1.05:1
ListNestedPerf.default	491	467	1.05:1
SkeletonMinimalPerf.default	305	291	1.05:1
ButtonMinimalPerf.default	148	142	1.04:1
ChatWithPopoverPerf.default	338	324	1.04:1
GridMinimalPerf.default	296	285	1.04:1
ListCommonPerf.default	547	528	1.04:1
LoaderMinimalPerf.default	596	575	1.04:1
BoxMinimalPerf.default	298	289	1.03:1
CarouselMinimalPerf.default	413	401	1.03:1
ListWith60ListItems.default	559	544	1.03:1
AlertMinimalPerf.default	233	229	1.02:1
ButtonSlotsPerf.default	475	465	1.02:1
CardMinimalPerf.default	482	474	1.02:1
DividerMinimalPerf.default	314	308	1.02:1
FlexMinimalPerf.default	251	246	1.02:1
HeaderSlotsPerf.default	655	640	1.02:1
ImageMinimalPerf.default	325	320	1.02:1
InputMinimalPerf.default	1112	1090	1.02:1
LabelMinimalPerf.default	335	330	1.02:1
LayoutMinimalPerf.default	316	311	1.02:1
ListMinimalPerf.default	441	432	1.02:1
SegmentMinimalPerf.default	302	297	1.02:1
StatusMinimalPerf.default	577	568	1.02:1
TextAreaMinimalPerf.default	425	416	1.02:1
TreeMinimalPerf.default	674	664	1.02:1
AnimationMinimalPerf.default	467	463	1.01:1
ButtonOverridesMissPerf.default	1440	1424	1.01:1
ChatMinimalPerf.default	636	627	1.01:1
CheckboxMinimalPerf.default	2284	2251	1.01:1
DatepickerMinimalPerf.default	4709	4669	1.01:1
FormMinimalPerf.default	353	348	1.01:1
ItemLayoutMinimalPerf.default	1017	1011	1.01:1
ProviderMergeThemesPerf.default	1481	1472	1.01:1
ProviderMinimalPerf.default	967	958	1.01:1
RadioGroupMinimalPerf.default	390	387	1.01:1
ToolbarMinimalPerf.default	790	785	1.01:1
DialogMinimalPerf.default	640	643	1:1
DropdownMinimalPerf.default	2558	2552	1:1
EmbedMinimalPerf.default	3499	3505	1:1
MenuMinimalPerf.default	715	712	1:1
MenuButtonMinimalPerf.default	1413	1409	1:1
ReactionMinimalPerf.default	322	322	1:1
RefMinimalPerf.default	206	205	1:1
SplitButtonMinimalPerf.default	3653	3665	1:1
TableManyItemsPerf.default	1598	1603	1:1
CustomToolbarPrototype.default	3496	3491	1:1
TooltipMinimalPerf.default	880	878	1:1
AccordionMinimalPerf.default	133	135	0.99:1
AttachmentSlotsPerf.default	897	902	0.99:1
ChatDuplicateMessagesPerf.default	260	262	0.99:1
DropdownManyItemsPerf.default	567	574	0.99:1
SliderMinimalPerf.default	1418	1439	0.99:1
IconMinimalPerf.default	532	537	0.99:1
TableMinimalPerf.default	348	350	0.99:1
TextMinimalPerf.default	299	301	0.99:1
TreeWith60ListItems.default	152	154	0.99:1
AttachmentMinimalPerf.default	131	134	0.98:1
RosterPerf.default	982	1006	0.98:1
PopupMinimalPerf.default	520	528	0.98:1
VideoMinimalPerf.default	533	547	0.97:1

miroslavstastny · 2021-11-30T15:40:57Z

@@ -0,0 +1 @@
+export {};


Is the index.ts necessary?

no, you should also remove the main entrypoint

…ariables

miroslavstastny · 2022-01-26T15:28:20Z

    "markdown-table": "^2.0.0",
    "node-plop": "^0.25.0",
    "node-polyfill-webpack-plugin": "^1.0.2",
-    "node-sass": "^6.0.1",


this is now a devDependency in root package.json (without the caret).
@layershifter - is that ok?

Not Shift :) but we've generally been trying to move dev deps to the root and remove carets, so it should be fine.

ecraig12345 · 2022-01-26T20:12:56Z

+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",


These should probably be removed (along with the index file) since this package isn't for JS

ecraig12345 · 2022-01-26T20:13:31Z

+  "name": "@fluentui/react-theme-sass",
+  "version": "9.0.0-beta.3",
+  "description": "SASS variables referencing react-theme design tokens injected to DOM by react-provider.",
+  "private": true,


Just to verify, is this intended to be checked in but not published yet?

ecraig12345 · 2022-01-26T20:21:36Z

+  "dependencies": {
+    "tslib": "^2.1.0"
+  },


Since this package doesn't ship JS (if I'm understanding right) I don't think it should depend on tslib

Suggested change

"dependencies": {

"tslib": "^2.1.0"

},

ecraig12345 · 2022-01-26T20:23:41Z

@@ -0,0 +1,29 @@
+{


At least IMO, if this package is never intended to ship JS, the API Extractor configs and output should be removed. The unfortunate part is I'm not sure whether the migration generator understands this or will just keep trying to add them back.

ling1726 · 2022-01-27T08:10:38Z

      "@fluentui/react-tabster": ["packages/react-tabster/src/index.ts"],
      "@fluentui/react-text": ["packages/react-text/src/index.ts"],
      "@fluentui/react-theme": ["packages/react-theme/src/index.ts"],
+      "@fluentui/react-theme-sass": ["packages/react-theme-sass/src/index.ts"],


There's no ts here, do we need path aliases ?

good question, for sake of consistency I'd say yes. Also I'd keep the index.ts there with empty export / even better to throw a runtime error if someone would import that

ling1726 · 2022-01-27T08:11:10Z

@@ -0,0 +1,3 @@
+{
+  "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"]


babel config seems redundant since there's no js code to run on

ling1726 · 2022-01-27T08:14:47Z

Be nice to get @Hotell's opinion here, since the issue of 'what to do when a package has no JS' definitely should come under the radar our repo infra plans.

Also will add to our next vbuild agenda

Hotell · 2022-01-26T15:34:05Z

    "loader-utils": "2.0.0",
    "memfs": "3.2.2",
    "node-fetch": "2.6.7",
+    "node-sass": "6.0.1",


Hotell · 2022-01-26T15:35:44Z

+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json",
+  "compiler": {


how did you generate the scaffold ? this shouldn't be here

Hotell · 2022-01-26T15:37:17Z

@@ -0,0 +1,4 @@
+{
+  "extends": ["plugin:@fluentui/eslint-plugin/node"],


hmm just to verify, this is a NODE package not BROWSER package, correct ? meaning this will be compiled away during build in consumers code.

Hotell · 2022-01-27T11:43:02Z

+        .map(tokenName => `$expected__${tokenName}: $${tokenName};`),
+    ].join('\n');
+
+    renderSync({ data });


what is this test testing ?

Hotell · 2022-01-27T11:45:10Z

      "@fluentui/react-tabster": ["packages/react-tabster/src/index.ts"],
      "@fluentui/react-text": ["packages/react-text/src/index.ts"],
      "@fluentui/react-theme": ["packages/react-theme/src/index.ts"],
+      "@fluentui/react-theme-sass": ["packages/react-theme-sass/src/index.ts"],


good question, for sake of consistency I'd say yes. Also I'd keep the index.ts there with empty export / even better to throw a runtime error if someone would import that

Hotell · 2022-01-27T11:46:47Z

@@ -0,0 +1,6 @@
+$borderRadiusNone: var(--borderRadiusNone);


how did you generate these files ? I'm missing the script automation for this in the PR

miroslavstastny · 2022-05-18T09:20:51Z

Stale, replaced by #22964

feat(react-theme-sass): Add SASS variables mapped to CSS variables pr…

5f332ac

…ovided by react-theme

msft-fluent-ui-bot assigned khmakoto Nov 28, 2021

miroslavstastny added 2 commits November 30, 2021 12:52

add missing dev dependency

8404eb7

add missing dev dependency

49afe1c

miroslavstastny commented Nov 30, 2021

View reviewed changes

Comment thread packages/react-theme-sass/sass/Sass.test.ts Outdated

miroslavstastny commented Nov 30, 2021

View reviewed changes

add variables for colorPalette tokens

5c5effe

miroslavstastny mentioned this pull request Jan 6, 2022

Do not export useTheme hook #20482

Closed

miroslavstastny added 5 commits January 24, 2022 19:02

Merge remote-tracking branch 'upstream/master' into feat/theme-sass-v…

057b11c

…ariables

hoist node-sass dependency to root package.json

d409a29

add missing tokens

2135299

fix build

b2d6e69

Merge remote-tracking branch 'upstream/master' into feat/theme-sass-v…

84c2858

…ariables

miroslavstastny marked this pull request as ready for review January 26, 2022 15:26

miroslavstastny requested a review from a team as a code owner January 26, 2022 15:26

miroslavstastny commented Jan 26, 2022

View reviewed changes

ecraig12345 reviewed Jan 26, 2022

View reviewed changes

ling1726 reviewed Jan 27, 2022

View reviewed changes

Hotell reviewed Jan 27, 2022

View reviewed changes

miroslavstastny mentioned this pull request May 12, 2022

feat(react-theme-sass): Add Sass variables mapped to CSS variables provided by react-theme #22964

Merged

miroslavstastny closed this May 18, 2022

		@@ -0,0 +1,3 @@
		{
		"plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"]

		@@ -0,0 +1,4 @@
		{
		"extends": ["plugin:@fluentui/eslint-plugin/node"],

Conversation

miroslavstastny commented Nov 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

fabricteam commented Nov 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci Bot commented Nov 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor Bot commented Nov 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Nov 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ling1726 commented Jan 27, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

miroslavstastny commented May 18, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

miroslavstastny commented Nov 28, 2021 •

edited

Loading

fabricteam commented Nov 28, 2021 •

edited

Loading

codesandbox-ci Bot commented Nov 28, 2021 •

edited

Loading

size-auditor Bot commented Nov 28, 2021 •

edited

Loading

fabricteam commented Nov 28, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)