Unify remote element style declarations (#23263)
Front components run in a Web Worker with a fake DOM. Until now the worker had a hand-rolled `style` object for remote elements and the host had its own separate CSS-string parser: two implementations of the same parsing that kept drifting apart (several review rounds fixed edge cases in one copy but not the other). What changed: - One shared `createStyleProxy` now backs `element.style` in the worker, and one shared `parseCssDeclarations` feeds both the worker proxy and the host's `parseCssString`. Most of the diff is existing logic split out of `installStylePropertyOnRemoteElements` into small single-purpose utils (`splitCssDeclarations`, `stripImportantPriorityFromCssValue`, `normalizeCssPropertyName`, `formatCssValue`, ...), not new behavior. - `!important` is stripped from values instead of tracked. Nothing ever read priorities back, and the host applies styles through React inline styles, which cannot express `!important`. Rendering note: `color: red !important` used to reach React as an invalid value (property silently not applied); it now applies, without the priority. - Style writes flush to the host synchronously, exactly as on main. - The parser handles quotes, escapes and parentheses; CSS comments inside hand-written `cssText` are not supported. This shared proxy is also the base for the worker `getComputedStyle` stub in the geometry PR. Second of three PRs splitting the geometry mirror work.
This commit is contained in:
+11
@@ -0,0 +1,11 @@
|
||||
import { isCssCustomPropertyName } from '../isCssCustomPropertyName';
|
||||
|
||||
describe('isCssCustomPropertyName', () => {
|
||||
it('should detect a custom property name', () => {
|
||||
expect(isCssCustomPropertyName('--gap')).toBe(true);
|
||||
});
|
||||
|
||||
it('should reject a standard property name', () => {
|
||||
expect(isCssCustomPropertyName('color')).toBe(false);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user