meno-core 1.0.53 → 1.1.0

package/lib/shared/cssProperties.ts

@@ -94,7 +94,24 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     type: 'select',
   },
   backgroundBlendMode: {
-    values: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'],
+    values: [
+      'normal',
+      'multiply',
+      'screen',
+      'overlay',
+      'darken',
+      'lighten',
+      'color-dodge',
+      'color-burn',
+      'hard-light',
+      'soft-light',
+      'difference',
+      'exclusion',
+      'hue',
+      'saturation',
+      'color',
+      'luminosity',
+    ],
     type: 'select',
   },
   // Gradient-text recipe (`background: linear-gradient(...); background-clip:
@@ -298,7 +315,24 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     type: 'select',
   },
   mixBlendMode: {
-    values: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'],
+    values: [
+      'normal',
+      'multiply',
+      'screen',
+      'overlay',
+      'darken',
+      'lighten',
+      'color-dodge',
+      'color-burn',
+      'hard-light',
+      'soft-light',
+      'difference',
+      'exclusion',
+      'hue',
+      'saturation',
+      'color',
+      'luminosity',
+    ],
     type: 'select',
   },
   isolation: {
@@ -409,7 +443,18 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
   // Lists
   listStyle: { type: 'string' },
   listStyleType: {
-    values: ['none', 'disc', 'circle', 'square', 'decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-alpha', 'upper-alpha'],
+    values: [
+      'none',
+      'disc',
+      'circle',
+      'square',
+      'decimal',
+      'decimal-leading-zero',
+      'lower-roman',
+      'upper-roman',
+      'lower-alpha',
+      'upper-alpha',
+    ],
     type: 'select',
   },
   listStylePosition: {
@@ -605,22 +650,127 @@ function getPropertyPriority(property: string): number {
  * Order determines display order in the UI
  */
 export const CSS_PROPERTY_GROUPS: Record<string, string[]> = {
-  'Layout': ['display'],
-  'Spacing': ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
-  'Size': ['width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'aspectRatio'],
-  'Position': ['position', 'top', 'right', 'bottom', 'left', 'inset', 'zIndex'],
-  'Flexbox': ['flex', 'flexDirection', 'flexWrap', 'flexFlow', 'justifyContent', 'alignItems', 'alignContent', 'gap', 'rowGap', 'columnGap', 'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order'],
-  'Grid': ['grid', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridGap', 'gridColumn', 'gridRow', 'gridArea', 'gridAutoFlow', 'gridAutoColumns', 'gridAutoRows', 'justifyItems', 'justifySelf', 'placeContent', 'placeItems', 'placeSelf'],
-  'Typography': ['fontWeight', 'fontSize', 'fontFamily', 'fontStyle', 'lineHeight', 'color', 'textAlign', 'textDecoration', 'textTransform', 'letterSpacing', 'wordSpacing', 'wordBreak', 'overflowWrap', 'textIndent', 'verticalAlign'],
-  'Background': ['background', 'backgroundColor', 'backgroundImage', 'backgroundSize', 'backgroundPosition', 'backgroundRepeat', 'opacity'],
-  'Borders': ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'border', 'borderWidth', 'borderStyle', 'borderColor', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft'],
-  'Outline': ['outline', 'outlineWidth', 'outlineStyle', 'outlineColor', 'outlineOffset'],
-  'Effects': ['boxShadow', 'textShadow', 'filter', 'backdropFilter', 'transform', 'transformOrigin', 'transition', 'animation', 'backfaceVisibility', 'mixBlendMode', 'clipPath'],
-  'Overflow': ['overflow', 'overflowX', 'overflowY', 'whiteSpace', 'textOverflow', 'visibility', 'content'],
-  'Interaction': ['cursor', 'pointerEvents', 'userSelect'],
-  'Lists': ['listStyle', 'listStyleType', 'listStylePosition'],
-  'Other': ['float', 'clear', 'boxSizing', 'objectFit', 'objectPosition', 'resize', 'scrollBehavior', 'accentColor'],
-  'SVG': ['stroke', 'strokeWidth', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeOpacity', 'fill', 'fillOpacity', 'fillRule'],
+  Layout: ['display'],
+  Spacing: [
+    'margin',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'padding',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+  ],
+  Size: ['width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'aspectRatio'],
+  Position: ['position', 'top', 'right', 'bottom', 'left', 'inset', 'zIndex'],
+  Flexbox: [
+    'flex',
+    'flexDirection',
+    'flexWrap',
+    'flexFlow',
+    'justifyContent',
+    'alignItems',
+    'alignContent',
+    'gap',
+    'rowGap',
+    'columnGap',
+    'alignSelf',
+    'flexGrow',
+    'flexShrink',
+    'flexBasis',
+    'order',
+  ],
+  Grid: [
+    'grid',
+    'gridTemplateColumns',
+    'gridTemplateRows',
+    'gridTemplateAreas',
+    'gridGap',
+    'gridColumn',
+    'gridRow',
+    'gridArea',
+    'gridAutoFlow',
+    'gridAutoColumns',
+    'gridAutoRows',
+    'justifyItems',
+    'justifySelf',
+    'placeContent',
+    'placeItems',
+    'placeSelf',
+  ],
+  Typography: [
+    'fontWeight',
+    'fontSize',
+    'fontFamily',
+    'fontStyle',
+    'lineHeight',
+    'color',
+    'textAlign',
+    'textDecoration',
+    'textTransform',
+    'letterSpacing',
+    'wordSpacing',
+    'wordBreak',
+    'overflowWrap',
+    'textIndent',
+    'verticalAlign',
+  ],
+  Background: [
+    'background',
+    'backgroundColor',
+    'backgroundImage',
+    'backgroundSize',
+    'backgroundPosition',
+    'backgroundRepeat',
+    'opacity',
+  ],
+  Borders: [
+    'borderRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'border',
+    'borderWidth',
+    'borderStyle',
+    'borderColor',
+    'borderTop',
+    'borderRight',
+    'borderBottom',
+    'borderLeft',
+  ],
+  Outline: ['outline', 'outlineWidth', 'outlineStyle', 'outlineColor', 'outlineOffset'],
+  Effects: [
+    'boxShadow',
+    'textShadow',
+    'filter',
+    'backdropFilter',
+    'transform',
+    'transformOrigin',
+    'transition',
+    'animation',
+    'backfaceVisibility',
+    'mixBlendMode',
+    'clipPath',
+  ],
+  Overflow: ['overflow', 'overflowX', 'overflowY', 'whiteSpace', 'textOverflow', 'visibility', 'content'],
+  Interaction: ['cursor', 'pointerEvents', 'userSelect'],
+  Lists: ['listStyle', 'listStyleType', 'listStylePosition'],
+  Other: ['float', 'clear', 'boxSizing', 'objectFit', 'objectPosition', 'resize', 'scrollBehavior', 'accentColor'],
+  SVG: [
+    'stroke',
+    'strokeWidth',
+    'strokeDasharray',
+    'strokeDashoffset',
+    'strokeLinecap',
+    'strokeLinejoin',
+    'strokeOpacity',
+    'fill',
+    'fillOpacity',
+    'fillRule',
+  ],
 };
 
 /**
@@ -647,23 +797,49 @@ export function getPropertyGroup(propertyName: string): string {
  * reuse the same group headers as list mode.
  */
 export const VISUAL_MODE_PROPERTIES: Record<string, string[]> = {
-  'Layout': ['display'],
-  'Grid': ['gridTemplateColumns'],
-  'Flexbox': ['flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'gap', 'flexGrow', 'flexShrink', 'flexBasis'],
-  'Spacing': ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
-  'Size': ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight'],
-  'Position': ['position', 'top', 'right', 'bottom', 'left', 'zIndex'],
-  'Typography': ['fontFamily', 'fontWeight', 'fontSize', 'lineHeight', 'color', 'letterSpacing', 'textAlign', 'textTransform', 'textDecoration'],
-  'Background': ['backgroundColor', 'backgroundImage', 'backgroundSize', 'backgroundPosition', 'backgroundRepeat', 'opacity'],
-  'Borders': ['borderRadius', 'borderWidth', 'borderStyle', 'borderColor'],
-  'Effects': ['boxShadow', 'transform', 'transition', 'filter'],
-  'Overflow': ['overflow', 'whiteSpace'],
-  'Interaction': ['cursor', 'pointerEvents'],
+  Layout: ['display'],
+  Grid: ['gridTemplateColumns'],
+  Flexbox: ['flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'gap', 'flexGrow', 'flexShrink', 'flexBasis'],
+  Spacing: [
+    'margin',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'padding',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+  ],
+  Size: ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight'],
+  Position: ['position', 'top', 'right', 'bottom', 'left', 'zIndex'],
+  Typography: [
+    'fontFamily',
+    'fontWeight',
+    'fontSize',
+    'lineHeight',
+    'color',
+    'letterSpacing',
+    'textAlign',
+    'textTransform',
+    'textDecoration',
+  ],
+  Background: [
+    'backgroundColor',
+    'backgroundImage',
+    'backgroundSize',
+    'backgroundPosition',
+    'backgroundRepeat',
+    'opacity',
+  ],
+  Borders: ['borderRadius', 'borderWidth', 'borderStyle', 'borderColor'],
+  Effects: ['boxShadow', 'transform', 'transition', 'filter'],
+  Overflow: ['overflow', 'whiteSpace'],
+  Interaction: ['cursor', 'pointerEvents'],
 };
 
-const VISUAL_MODE_PROPERTIES_SET = new Set(
-  Object.values(VISUAL_MODE_PROPERTIES).flat()
-);
+const VISUAL_MODE_PROPERTIES_SET = new Set(Object.values(VISUAL_MODE_PROPERTIES).flat());
 
 /**
  * True if `prop` belongs to the always-visible visual-mode list.
@@ -718,71 +894,71 @@ const isMediaTag = (t: string) => t === 'img' || t === 'video';
  */
 export const VISUAL_MODE_RULES: Record<string, VisualModeRule> = {
   // Flex/Grid CONTAINER props — own display must be flex/grid.
-  flexDirection:       ctx => isFlexDisplay(ctx.display),
-  flexWrap:            ctx => isFlexDisplay(ctx.display),
-  justifyContent:      ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
-  alignItems:          ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
-  alignContent:        ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
-  gap:                 ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
-  rowGap:              ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
-  columnGap:           ctx => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
-  gridTemplateColumns: ctx => isGridDisplay(ctx.display),
-  gridTemplateRows:    ctx => isGridDisplay(ctx.display),
-  gridTemplateAreas:   ctx => isGridDisplay(ctx.display),
-  gridGap:             ctx => isGridDisplay(ctx.display),
-  gridAutoFlow:        ctx => isGridDisplay(ctx.display),
-  gridAutoColumns:     ctx => isGridDisplay(ctx.display),
-  gridAutoRows:        ctx => isGridDisplay(ctx.display),
-  justifyItems:        ctx => isGridDisplay(ctx.display),
-  placeItems:          ctx => isGridDisplay(ctx.display),
-  placeContent:        ctx => isGridDisplay(ctx.display),
+  flexDirection: (ctx) => isFlexDisplay(ctx.display),
+  flexWrap: (ctx) => isFlexDisplay(ctx.display),
+  justifyContent: (ctx) => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  alignItems: (ctx) => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  alignContent: (ctx) => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  gap: (ctx) => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  rowGap: (ctx) => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  columnGap: (ctx) => isFlexDisplay(ctx.display) || isGridDisplay(ctx.display),
+  gridTemplateColumns: (ctx) => isGridDisplay(ctx.display),
+  gridTemplateRows: (ctx) => isGridDisplay(ctx.display),
+  gridTemplateAreas: (ctx) => isGridDisplay(ctx.display),
+  gridGap: (ctx) => isGridDisplay(ctx.display),
+  gridAutoFlow: (ctx) => isGridDisplay(ctx.display),
+  gridAutoColumns: (ctx) => isGridDisplay(ctx.display),
+  gridAutoRows: (ctx) => isGridDisplay(ctx.display),
+  justifyItems: (ctx) => isGridDisplay(ctx.display),
+  placeItems: (ctx) => isGridDisplay(ctx.display),
+  placeContent: (ctx) => isGridDisplay(ctx.display),
 
   // Flex/Grid ITEM props — PARENT display must be flex/grid.
-  flex:        ctx => isFlexDisplay(ctx.parentDisplay),
-  flexFlow:    ctx => isFlexDisplay(ctx.parentDisplay),
-  flexGrow:    ctx => isFlexDisplay(ctx.parentDisplay),
-  flexShrink:  ctx => isFlexDisplay(ctx.parentDisplay),
-  flexBasis:   ctx => isFlexDisplay(ctx.parentDisplay),
-  alignSelf:   ctx => isFlexDisplay(ctx.parentDisplay) || isGridDisplay(ctx.parentDisplay),
-  justifySelf: ctx => isGridDisplay(ctx.parentDisplay),
-  placeSelf:   ctx => isGridDisplay(ctx.parentDisplay),
-  order:       ctx => isFlexDisplay(ctx.parentDisplay) || isGridDisplay(ctx.parentDisplay),
-  gridArea:    ctx => isGridDisplay(ctx.parentDisplay),
-  gridColumn:  ctx => isGridDisplay(ctx.parentDisplay),
-  gridRow:     ctx => isGridDisplay(ctx.parentDisplay),
+  flex: (ctx) => isFlexDisplay(ctx.parentDisplay),
+  flexFlow: (ctx) => isFlexDisplay(ctx.parentDisplay),
+  flexGrow: (ctx) => isFlexDisplay(ctx.parentDisplay),
+  flexShrink: (ctx) => isFlexDisplay(ctx.parentDisplay),
+  flexBasis: (ctx) => isFlexDisplay(ctx.parentDisplay),
+  alignSelf: (ctx) => isFlexDisplay(ctx.parentDisplay) || isGridDisplay(ctx.parentDisplay),
+  justifySelf: (ctx) => isGridDisplay(ctx.parentDisplay),
+  placeSelf: (ctx) => isGridDisplay(ctx.parentDisplay),
+  order: (ctx) => isFlexDisplay(ctx.parentDisplay) || isGridDisplay(ctx.parentDisplay),
+  gridArea: (ctx) => isGridDisplay(ctx.parentDisplay),
+  gridColumn: (ctx) => isGridDisplay(ctx.parentDisplay),
+  gridRow: (ctx) => isGridDisplay(ctx.parentDisplay),
 
   // Position-dependent inset properties.
-  top:    ctx => ctx.position !== 'static',
-  right:  ctx => ctx.position !== 'static',
-  bottom: ctx => ctx.position !== 'static',
-  left:   ctx => ctx.position !== 'static',
-  inset:  ctx => ctx.position !== 'static',
-  zIndex: ctx => ctx.position !== 'static',
+  top: (ctx) => ctx.position !== 'static',
+  right: (ctx) => ctx.position !== 'static',
+  bottom: (ctx) => ctx.position !== 'static',
+  left: (ctx) => ctx.position !== 'static',
+  inset: (ctx) => ctx.position !== 'static',
+  zIndex: (ctx) => ctx.position !== 'static',
 
   // Tag-based.
-  objectFit:         ctx => isMediaTag(ctx.tagName),
-  objectPosition:    ctx => isMediaTag(ctx.tagName),
-  listStyle:         ctx => isListTag(ctx.tagName),
-  listStyleType:     ctx => isListTag(ctx.tagName),
-  listStylePosition: ctx => isListTag(ctx.tagName),
+  objectFit: (ctx) => isMediaTag(ctx.tagName),
+  objectPosition: (ctx) => isMediaTag(ctx.tagName),
+  listStyle: (ctx) => isListTag(ctx.tagName),
+  listStyleType: (ctx) => isListTag(ctx.tagName),
+  listStylePosition: (ctx) => isListTag(ctx.tagName),
 
   // Padding/margin shorthand-vs-longhand auto-toggle.
   // When ANY longhand is set, hide shorthand; otherwise hide longhands.
-  padding:       ctx => !ctx.hasPaddingLonghand,
-  paddingTop:    ctx => ctx.hasPaddingLonghand,
-  paddingRight:  ctx => ctx.hasPaddingLonghand,
-  paddingBottom: ctx => ctx.hasPaddingLonghand,
-  paddingLeft:   ctx => ctx.hasPaddingLonghand,
-  margin:        ctx => !ctx.hasMarginLonghand,
-  marginTop:     ctx => ctx.hasMarginLonghand,
-  marginRight:   ctx => ctx.hasMarginLonghand,
-  marginBottom:  ctx => ctx.hasMarginLonghand,
-  marginLeft:    ctx => ctx.hasMarginLonghand,
+  padding: (ctx) => !ctx.hasPaddingLonghand,
+  paddingTop: (ctx) => ctx.hasPaddingLonghand,
+  paddingRight: (ctx) => ctx.hasPaddingLonghand,
+  paddingBottom: (ctx) => ctx.hasPaddingLonghand,
+  paddingLeft: (ctx) => ctx.hasPaddingLonghand,
+  margin: (ctx) => !ctx.hasMarginLonghand,
+  marginTop: (ctx) => ctx.hasMarginLonghand,
+  marginRight: (ctx) => ctx.hasMarginLonghand,
+  marginBottom: (ctx) => ctx.hasMarginLonghand,
+  marginLeft: (ctx) => ctx.hasMarginLonghand,
 
   // Background-image-only props — meaningless without a background image.
-  backgroundPosition: ctx => ctx.hasBackgroundImage,
-  backgroundSize:     ctx => ctx.hasBackgroundImage,
-  backgroundRepeat:   ctx => ctx.hasBackgroundImage,
+  backgroundPosition: (ctx) => ctx.hasBackgroundImage,
+  backgroundSize: (ctx) => ctx.hasBackgroundImage,
+  backgroundRepeat: (ctx) => ctx.hasBackgroundImage,
 };
 
 /**
@@ -806,15 +982,15 @@ function matchesAbbreviation(property: string, input: string): boolean {
   let propertyIndex = 0;
 
   for (let inputIndex = 0; inputIndex < input.length; inputIndex++) {
-    const inputChar = input[inputIndex];
+    const inputChar = input[inputIndex] ?? '';
     let found = false;
 
     // Search from current position to end of property for a match at a word boundary
     while (propertyIndex < property.length) {
-      const propChar = property[propertyIndex];
+      const propChar = property[propertyIndex] ?? '';
       // Word boundary = first character OR capital letter
-      const isWordBoundary = propertyIndex === 0 ||
-        (propChar === propChar.toUpperCase() && propChar !== propChar.toLowerCase());
+      const isWordBoundary =
+        propertyIndex === 0 || (propChar === propChar.toUpperCase() && propChar !== propChar.toLowerCase());
 
       if (isWordBoundary && inputChar.toLowerCase() === propChar.toLowerCase()) {
         // Match found at word boundary
@@ -864,28 +1040,23 @@ export function filterCSSProperties(input: string): string[] {
   }
 
   // First, try startsWith matching (exact prefix match)
-  const startsWithMatches = CSS_PROPERTIES.filter(prop =>
-    prop.toLowerCase().startsWith(normalizedInput.toLowerCase())
+  const startsWithMatches = CSS_PROPERTIES.filter((prop) =>
+    prop.toLowerCase().startsWith(normalizedInput.toLowerCase()),
   );
 
   // Then, try abbreviation/fuzzy matching
-  const abbreviationMatches = CSS_PROPERTIES.filter(prop =>
-    matchesAbbreviation(prop, normalizedInput) &&
-    !startsWithMatches.includes(prop) // Don't duplicate startsWith matches
+  const abbreviationMatches = CSS_PROPERTIES.filter(
+    (prop) => matchesAbbreviation(prop, normalizedInput) && !startsWithMatches.includes(prop), // Don't duplicate startsWith matches
   );
 
   // Sort each group by popularity, then combine: exact matches first, then fuzzy matches
-  const byPriority = (a: string, b: string) =>
-    getPropertyPriority(a) - getPropertyPriority(b);
+  const byPriority = (a: string, b: string) => getPropertyPriority(a) - getPropertyPriority(b);
 
-  const combined = [
-    ...startsWithMatches.sort(byPriority),
-    ...abbreviationMatches.sort(byPriority),
-  ];
+  const combined = [...startsWithMatches.sort(byPriority), ...abbreviationMatches.sort(byPriority)];
 
   const shortcut = PROPERTY_SHORTCUTS[normalizedInput.toLowerCase()];
   if (shortcut) {
-    return [shortcut, ...combined.filter(prop => prop !== shortcut)];
+    return [shortcut, ...combined.filter((prop) => prop !== shortcut)];
   }
 
   return combined;
@@ -920,9 +1091,7 @@ export function filterPropertyValues(propertyName: string, input: string): strin
   }
 
   // Filter values that contain the input (substring match)
-  return values.filter(value =>
-    value.toLowerCase().includes(normalizedInput)
-  );
+  return values.filter((value) => value.toLowerCase().includes(normalizedInput));
 }
 
 /**
@@ -940,13 +1109,28 @@ export function getPropertyType(propertyName: string): 'string' | 'select' | 'bo
  * normalizer must NOT append `px` to bare numbers for these.
  */
 export const UNITLESS_PROPERTIES: ReadonlySet<string> = new Set([
-  'fontWeight', 'lineHeight',
-  'opacity', 'fillOpacity', 'strokeOpacity', 'stopOpacity',
-  'zIndex', 'order',
-  'flexGrow', 'flexShrink', 'flex',
-  'columnCount', 'columns', 'tabSize', 'orphans', 'widows',
-  'gridRow', 'gridColumn', 'gridRowStart', 'gridRowEnd',
-  'gridColumnStart', 'gridColumnEnd',
+  'fontWeight',
+  'lineHeight',
+  'opacity',
+  'fillOpacity',
+  'strokeOpacity',
+  'stopOpacity',
+  'zIndex',
+  'order',
+  'flexGrow',
+  'flexShrink',
+  'flex',
+  'columnCount',
+  'columns',
+  'tabSize',
+  'orphans',
+  'widows',
+  'gridRow',
+  'gridColumn',
+  'gridRowStart',
+  'gridRowEnd',
+  'gridColumnStart',
+  'gridColumnEnd',
   'animationIterationCount',
   'aspectRatio',
   'scale',