Skip to content

fix(merge-styles): contain server-rendered CSS output - #36709

Open
Paul Mardling (PaulGMardling) wants to merge 6 commits into
microsoft:masterfrom
PaulGMardling:fix/merge-coercion
Open

fix(merge-styles): contain server-rendered CSS output#36709
Paul Mardling (PaulGMardling) wants to merge 6 commits into
microsoft:masterfrom
PaulGMardling:fix/merge-coercion

Conversation

@PaulGMardling

@PaulGMardling Paul Mardling (PaulGMardling) commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

Previous Behavior

Declaration values were normalized during serialization, but structural CSS entries did not receive final output containment for server rendering.

New Behavior

Declaration values remain normalized before serialization, and CSS returned for server rendering now applies narrow final containment across declaration and structural entries. A single-pass scanner preserves CSS escape parity for consecutive backslashes without repeated regex retries, while existing selectors, combinators, at-rules, custom properties, keyframes, strings, URLs, browser insertion, callbacks, and cache behavior remain unchanged.

Focused regression coverage includes declaration values, selectors, ordinary and custom property names, keyframe step names, case variants, odd and even backslash runs, long matching and nonmatching runs, URLs, and valid structural CSS syntax.

Related Issue(s)

  • Internal tracking only.

Validation

  • yarn nx run merge-styles:code-style
  • yarn nx run merge-styles:test
  • yarn nx run merge-styles:build
  • yarn nx run merge-styles:lint
  • yarn check:change --branch origin/master --no-fetch

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@github-actions

github-actions Bot commented Sep 8, 2026

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
ActivityItem
71.511 kB
23.466 kB
71.795 kB
23.574 kB
284 B
108 B
react
Announced
38.766 kB
13.382 kB
39.047 kB
13.498 kB
281 B
116 B
react
Breadcrumb
200.779 kB
59.775 kB
201.063 kB
59.889 kB
284 B
114 B
react
Button
194.363 kB
56.054 kB
194.695 kB
56.167 kB
332 B
113 B
react
ButtonGrid
179.244 kB
54.067 kB
179.528 kB
54.178 kB
284 B
111 B
react
Calendar
121.293 kB
36.952 kB
121.575 kB
37.065 kB
282 B
113 B
react
Callout
84.456 kB
27.693 kB
84.738 kB
27.814 kB
282 B
121 B
react
Check
53.471 kB
17.936 kB
53.756 kB
18.054 kB
285 B
118 B
react
Checkbox
60.225 kB
19.994 kB
60.509 kB
20.107 kB
284 B
113 B
react
ChoiceGroup
65.717 kB
21.576 kB
66.02 kB
21.682 kB
303 B
106 B
react
ChoiceGroupOption
59.03 kB
19.464 kB
59.315 kB
19.569 kB
285 B
105 B
react
Coachmark
92.829 kB
29.434 kB
93.114 kB
29.541 kB
285 B
107 B
react
ColorPicker
135.091 kB
42.254 kB
135.376 kB
42.359 kB
285 B
105 B
react
ComboBox
250.592 kB
71.678 kB
250.874 kB
71.786 kB
282 B
108 B
react
CommandBar
201.824 kB
59.54 kB
202.125 kB
59.664 kB
301 B
124 B
react
ContextualMenu
154.274 kB
47.7 kB
154.561 kB
47.807 kB
287 B
107 B
react
DatePicker
183.22 kB
56.023 kB
183.505 kB
56.121 kB
285 B
98 B
react
DetailsList
230.008 kB
66.014 kB
230.29 kB
66.129 kB
282 B
115 B
react
Dialog
210.074 kB
62.5 kB
210.358 kB
62.611 kB
284 B
111 B
react
Divider
19.893 kB
6.936 kB
20.164 kB
7.053 kB
271 B
117 B
react
DocumentCard
215.813 kB
63.838 kB
216.097 kB
63.964 kB
284 B
126 B
react
DraggableZone
34.582 kB
11.592 kB
34.849 kB
11.695 kB
267 B
103 B
react
Dropdown
233.079 kB
68.135 kB
233.363 kB
68.247 kB
284 B
112 B
react
ExtendedPicker
97.086 kB
27.95 kB
97.368 kB
28.066 kB
282 B
116 B
react
Fabric
42.006 kB
14.453 kB
42.287 kB
14.575 kB
281 B
122 B
react
Facepile
209.377 kB
62.564 kB
209.662 kB
62.671 kB
285 B
107 B
react
FloatingPicker
240.836 kB
68.395 kB
241.118 kB
68.528 kB
282 B
133 B
react
FocusTrapZone
17.113 kB
5.936 kB
17.425 kB
6.091 kB
312 B
155 B
react
FocusZone
55.391 kB
17.548 kB
55.678 kB
17.65 kB
287 B
102 B
react
Grid
179.244 kB
54.067 kB
179.528 kB
54.178 kB
284 B
111 B
react
GroupedList
135.213 kB
40.822 kB
135.498 kB
40.928 kB
285 B
106 B
react
GroupedListV2
122.837 kB
37.889 kB
123.122 kB
37.998 kB
285 B
109 B
react
HoverCard
96.917 kB
30.798 kB
97.202 kB
30.923 kB
285 B
125 B
react
Icon
52.159 kB
17.378 kB
52.441 kB
17.482 kB
282 B
104 B
react
Icons
66.627 kB
24.479 kB
66.9 kB
24.596 kB
273 B
117 B
react
Image
47.183 kB
15.787 kB
47.451 kB
15.896 kB
268 B
109 B
react
Keytip
81.486 kB
26.762 kB
81.768 kB
26.865 kB
282 B
103 B
react
KeytipData
14.201 kB
4.644 kB
14.509 kB
4.795 kB
308 B
151 B
react
KeytipLayer
103.226 kB
32.003 kB
103.511 kB
32.124 kB
285 B
121 B
react
Keytips
106 kB
33.025 kB
106.282 kB
33.132 kB
282 B
107 B
react
Label
38.627 kB
13.349 kB
38.893 kB
13.462 kB
266 B
113 B
react
Layer
48.346 kB
16.468 kB
48.629 kB
16.576 kB
283 B
108 B
react
Link
39.947 kB
13.766 kB
40.227 kB
13.889 kB
280 B
123 B
react
List
39.648 kB
12.531 kB
39.935 kB
12.633 kB
287 B
102 B
react
MarqueeSelection
74.764 kB
22.533 kB
75.06 kB
22.637 kB
296 B
104 B
react
MessageBar
189.392 kB
56.484 kB
189.676 kB
56.613 kB
284 B
129 B
react
Modal
93.845 kB
30.319 kB
94.13 kB
30.43 kB
285 B
111 B
react
Nav
186.842 kB
55.869 kB
187.145 kB
56.004 kB
303 B
135 B
react
OverflowSet
33.636 kB
11.36 kB
33.904 kB
11.472 kB
268 B
112 B
react
Overlay
41.175 kB
14.19 kB
41.456 kB
14.304 kB
281 B
114 B
react
Panel
200.3 kB
59.482 kB
200.604 kB
59.596 kB
304 B
114 B
react
Persona
114.726 kB
36.572 kB
115.011 kB
36.692 kB
285 B
120 B
react
PersonaCoin
114.726 kB
36.572 kB
115.011 kB
36.692 kB
285 B
120 B
react
PersonaPresence
58.341 kB
19.48 kB
58.626 kB
19.588 kB
285 B
108 B
react
Pickers
297.834 kB
83.212 kB
298.117 kB
83.328 kB
283 B
116 B
react
Pivot
187.719 kB
56.623 kB
188.002 kB
56.748 kB
283 B
125 B
react
Positioning
23.112 kB
7.761 kB
23.432 kB
7.857 kB
320 B
96 B
react
PositioningContainer
73.679 kB
23.818 kB
73.966 kB
23.919 kB
287 B
101 B
react
ProgressIndicator
39.765 kB
13.638 kB
40.046 kB
13.749 kB
281 B
111 B
react
Rating
82.323 kB
26.225 kB
82.608 kB
26.336 kB
285 B
111 B
react
Fluent UI React (entire library)
1.017 MB
283.569 kB
1.018 MB
283.733 kB
288 B
164 B
react
ScrollablePane
55.802 kB
17.829 kB
56.07 kB
17.93 kB
268 B
101 B
react
SearchBox
187.632 kB
56.064 kB
187.916 kB
56.184 kB
284 B
120 B
react
SelectedItemsList
231.319 kB
67.352 kB
231.614 kB
67.48 kB
295 B
128 B
react
Selection
42.719 kB
12.376 kB
43.001 kB
12.492 kB
282 B
116 B
react
Separator
35.667 kB
12.227 kB
35.934 kB
12.335 kB
267 B
108 B
react
Shimmer
49.51 kB
16.36 kB
49.777 kB
16.464 kB
267 B
104 B
react
ShimmeredDetailsList
240.74 kB
68.726 kB
241.022 kB
68.841 kB
282 B
115 B
react
Slider
57.89 kB
19.313 kB
58.172 kB
19.419 kB
282 B
106 B
react
SpinButton
191.276 kB
57.148 kB
191.582 kB
57.277 kB
306 B
129 B
react
Spinner
42.053 kB
14.565 kB
42.326 kB
14.68 kB
273 B
115 B
react
Stack
42.343 kB
14.467 kB
42.625 kB
14.574 kB
282 B
107 B
react
Sticky
32.868 kB
10.589 kB
33.146 kB
10.705 kB
278 B
116 B
react
Styling
46.377 kB
15.242 kB
46.647 kB
15.337 kB
270 B
95 B
react
SwatchColorPicker
189.597 kB
57.615 kB
189.881 kB
57.714 kB
284 B
99 B
react
TeachingBubble
204.608 kB
60.477 kB
204.892 kB
60.596 kB
284 B
119 B
react
Text
37.19 kB
12.879 kB
37.457 kB
12.986 kB
267 B
107 B
react
TextField
81.017 kB
25.418 kB
81.309 kB
25.53 kB
292 B
112 B
react
Theme
43.822 kB
14.276 kB
44.107 kB
14.384 kB
285 B
108 B
react
TimePicker
240.406 kB
69.476 kB
240.688 kB
69.573 kB
282 B
97 B
react
Toggle
46.48 kB
16.079 kB
46.748 kB
16.185 kB
268 B
106 B
react
Tooltip
87.247 kB
28.262 kB
87.542 kB
28.37 kB
295 B
108 B
react
Utilities
83.123 kB
25.271 kB
83.405 kB
25.379 kB
282 B
108 B
react
Viewport
24.178 kB
7.716 kB
24.444 kB
7.813 kB
266 B
97 B
react
WeeklyDayPicker
101.544 kB
31.769 kB
101.826 kB
31.895 kB
282 B
126 B
react-charting
AreaChart
305.154 kB
95.909 kB
305.514 kB
96.036 kB
360 B
127 B
react-charting
ChartHoverCard
37.29 kB
12.738 kB
37.565 kB
12.881 kB
275 B
143 B
react-charting
DeclarativeChart
680.459 kB
193.864 kB
680.819 kB
193.988 kB
360 B
124 B
react-charting
DonutChart
204.416 kB
64.319 kB
204.704 kB
64.425 kB
288 B
106 B
react-charting
GanttChart
287.222 kB
90.82 kB
287.582 kB
90.942 kB
360 B
122 B
react-charting
GaugeChart
197.731 kB
61.769 kB
198.013 kB
61.89 kB
282 B
121 B
react-charting
GroupedVerticalBarChart
297.023 kB
93.155 kB
297.383 kB
93.291 kB
360 B
136 B
react-charting
HeatMapChart
287.919 kB
90.559 kB
288.279 kB
90.695 kB
360 B
136 B
react-charting
HorizontalBarChart
127.475 kB
40.118 kB
127.771 kB
40.223 kB
296 B
105 B
react-charting
HorizontalBarChartWithAxis
298.395 kB
93.219 kB
298.755 kB
93.342 kB
360 B
123 B
react-charting
Legends
152.037 kB
46.832 kB
152.321 kB
46.961 kB
284 B
129 B
react-charting
LineChart
334.72 kB
102.945 kB
335.08 kB
103.071 kB
360 B
126 B
react-charting
MultiStackedBarChart
182.57 kB
55.844 kB
182.866 kB
55.961 kB
296 B
117 B
react-charting
PieChart
135.059 kB
42.757 kB
135.355 kB
42.861 kB
296 B
104 B
react-charting
PolarChart
235.701 kB
74.718 kB
235.983 kB
74.875 kB
282 B
157 B
react-charting
SankeyChart
158.576 kB
49.642 kB
158.858 kB
49.759 kB
282 B
117 B
react-charting
ScatterChart
291.196 kB
92.181 kB
291.556 kB
92.309 kB
360 B
128 B
react-charting
Sparkline
88.144 kB
29.862 kB
88.426 kB
29.962 kB
282 B
100 B
react-charting
StackedBarChart
176.145 kB
53.411 kB
176.441 kB
53.52 kB
296 B
109 B
react-charting
TreeChart
85.764 kB
27.102 kB
86.046 kB
27.212 kB
282 B
110 B
react-charting
VerticalBarChart
308.085 kB
95.291 kB
308.445 kB
95.419 kB
360 B
128 B
react-charting
VerticalStackedBarChart
305.195 kB
94.973 kB
305.555 kB
95.104 kB
360 B
131 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react
Autofill
15.557 kB
4.803 kB
react
Color
7.94 kB
3.172 kB
react
DateTimeUtilities
5.447 kB
1.917 kB
react
DragDrop
8.546 kB
2.789 kB
react
Popup
12.427 kB
4.226 kB
react
ResizeGroup
13.467 kB
4.42 kB
react
ResponsiveMode
8.271 kB
3.006 kB
react
SelectableOption
927 B
479 B
react
ThemeGenerator
12.525 kB
4.15 kB
react
WindowProvider
1.262 kB
614 B
🤖 This report was generated against a5b8341b24ed78137d2eeb4e7514b01071c6d471

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@PaulGMardling Paul Mardling (PaulGMardling) changed the title fix: normalize merge styles value serialization fix(merge-styles): normalize declaration value serialization Sep 8, 2026
@github-actions

github-actions Bot commented Sep 8, 2026

Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,6 @@
{

@github-actions github-actions Bot Sep 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests/Callout 15 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Callout.Bottom auto edge.default.chromium.png 2195 Changed
vr-tests/Callout.Bottom center.default.chromium.png 2128 Changed
vr-tests/Callout.Left center.default.chromium.png 2584 Changed
vr-tests/Callout.Gap space 25.default.chromium.png 2195 Changed
vr-tests/Callout.Bottom right edge.default.chromium.png 1130 Changed
vr-tests/Callout.Bottom left edge - RTL.default.chromium.png 2199 Changed
vr-tests/Callout.Bottom right edge - RTL.default.chromium.png 1124 Changed
vr-tests/Callout.Left top edge.default.chromium.png 2183 Changed
vr-tests/Callout.No callout width specified.default.chromium.png 2143 Changed
vr-tests/Callout.Right bottom edge.default.chromium.png 3095 Changed
vr-tests/Callout.Top center.default.chromium.png 2127 Changed
vr-tests/Callout.Rendering callout attached to a rectangle.default.chromium.png 1835 Changed
vr-tests/Callout.Right top edge.default.chromium.png 1126 Changed
vr-tests/Callout.Top right edge.default.chromium.png 1146 Changed
vr-tests/Callout.Top left edge.default.chromium.png 2212 Changed
vr-tests/Keytip 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Keytip.Disabled.default.chromium.png 26 Changed
vr-tests/react-charting-VerticalBarChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-VerticalBarChart.Basic - Secondary Y Axis.default.chromium.png 3 Changed

There were 1 duplicate changes discarded. Check the build logs for more information.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@PaulGMardling Paul Mardling (PaulGMardling) changed the title fix(merge-styles): normalize declaration value serialization fix(merge-styles): contain server-rendered CSS output Sep 8, 2026
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant