Raphaël Bosi
b8e2a6e910
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.
61 lines
1.2 KiB
TypeScript
61 lines
1.2 KiB
TypeScript
const UNITLESS_CSS_PROPERTY_BASE_NAMES = [
|
|
'animationIterationCount',
|
|
'aspectRatio',
|
|
'borderImageOutset',
|
|
'borderImageSlice',
|
|
'borderImageWidth',
|
|
'boxFlex',
|
|
'boxFlexGroup',
|
|
'boxOrdinalGroup',
|
|
'columnCount',
|
|
'columns',
|
|
'flex',
|
|
'flexGrow',
|
|
'flexPositive',
|
|
'flexShrink',
|
|
'flexNegative',
|
|
'flexOrder',
|
|
'gridArea',
|
|
'gridRow',
|
|
'gridRowEnd',
|
|
'gridRowSpan',
|
|
'gridRowStart',
|
|
'gridColumn',
|
|
'gridColumnEnd',
|
|
'gridColumnSpan',
|
|
'gridColumnStart',
|
|
'fontWeight',
|
|
'lineClamp',
|
|
'lineHeight',
|
|
'opacity',
|
|
'order',
|
|
'orphans',
|
|
'scale',
|
|
'tabSize',
|
|
'widows',
|
|
'zIndex',
|
|
'zoom',
|
|
'fillOpacity',
|
|
'floodOpacity',
|
|
'stopOpacity',
|
|
'strokeDasharray',
|
|
'strokeDashoffset',
|
|
'strokeMiterlimit',
|
|
'strokeOpacity',
|
|
'strokeWidth',
|
|
];
|
|
|
|
const UNITLESS_CSS_PROPERTY_VENDOR_PREFIXES = ['Webkit', 'Moz', 'ms', 'O'];
|
|
|
|
const withVendorPrefixedAliases = (propertyName: string): string[] => [
|
|
propertyName,
|
|
...UNITLESS_CSS_PROPERTY_VENDOR_PREFIXES.map(
|
|
(vendorPrefix) =>
|
|
`${vendorPrefix}${propertyName[0].toUpperCase()}${propertyName.slice(1)}`,
|
|
),
|
|
];
|
|
|
|
export const UNITLESS_CSS_PROPERTY_NAMES = new Set(
|
|
UNITLESS_CSS_PROPERTY_BASE_NAMES.flatMap(withVendorPrefixedAliases),
|
|
);
|