meno-core 1.0.53 → 1.1.0

package/lib/shared/cssNamedColors.ts

@@ -6,40 +6,162 @@
 
 export const CSS_NAMED_COLORS: ReadonlySet<string> = new Set([
   // CSS Level 4 named colors
-  'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure',
-  'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood',
-  'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan',
-  'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki',
-  'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon',
-  'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet',
-  'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue',
-  'firebrick', 'floralwhite', 'forestgreen', 'fuchsia',
-  'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey',
-  'honeydew', 'hotpink',
-  'indianred', 'indigo', 'ivory',
+  'aliceblue',
+  'antiquewhite',
+  'aqua',
+  'aquamarine',
+  'azure',
+  'beige',
+  'bisque',
+  'black',
+  'blanchedalmond',
+  'blue',
+  'blueviolet',
+  'brown',
+  'burlywood',
+  'cadetblue',
+  'chartreuse',
+  'chocolate',
+  'coral',
+  'cornflowerblue',
+  'cornsilk',
+  'crimson',
+  'cyan',
+  'darkblue',
+  'darkcyan',
+  'darkgoldenrod',
+  'darkgray',
+  'darkgreen',
+  'darkgrey',
+  'darkkhaki',
+  'darkmagenta',
+  'darkolivegreen',
+  'darkorange',
+  'darkorchid',
+  'darkred',
+  'darksalmon',
+  'darkseagreen',
+  'darkslateblue',
+  'darkslategray',
+  'darkslategrey',
+  'darkturquoise',
+  'darkviolet',
+  'deeppink',
+  'deepskyblue',
+  'dimgray',
+  'dimgrey',
+  'dodgerblue',
+  'firebrick',
+  'floralwhite',
+  'forestgreen',
+  'fuchsia',
+  'gainsboro',
+  'ghostwhite',
+  'gold',
+  'goldenrod',
+  'gray',
+  'green',
+  'greenyellow',
+  'grey',
+  'honeydew',
+  'hotpink',
+  'indianred',
+  'indigo',
+  'ivory',
   'khaki',
-  'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan',
-  'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon',
-  'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow',
-  'lime', 'limegreen', 'linen',
-  'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple',
-  'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred',
-  'midnightblue', 'mintcream', 'mistyrose', 'moccasin',
-  'navajowhite', 'navy',
-  'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid',
-  'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff',
-  'peru', 'pink', 'plum', 'powderblue', 'purple',
-  'rebeccapurple', 'red', 'rosybrown', 'royalblue',
-  'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue',
-  'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue',
-  'tan', 'teal', 'thistle', 'tomato', 'turquoise',
+  'lavender',
+  'lavenderblush',
+  'lawngreen',
+  'lemonchiffon',
+  'lightblue',
+  'lightcoral',
+  'lightcyan',
+  'lightgoldenrodyellow',
+  'lightgray',
+  'lightgreen',
+  'lightgrey',
+  'lightpink',
+  'lightsalmon',
+  'lightseagreen',
+  'lightskyblue',
+  'lightslategray',
+  'lightslategrey',
+  'lightsteelblue',
+  'lightyellow',
+  'lime',
+  'limegreen',
+  'linen',
+  'magenta',
+  'maroon',
+  'mediumaquamarine',
+  'mediumblue',
+  'mediumorchid',
+  'mediumpurple',
+  'mediumseagreen',
+  'mediumslateblue',
+  'mediumspringgreen',
+  'mediumturquoise',
+  'mediumvioletred',
+  'midnightblue',
+  'mintcream',
+  'mistyrose',
+  'moccasin',
+  'navajowhite',
+  'navy',
+  'oldlace',
+  'olive',
+  'olivedrab',
+  'orange',
+  'orangered',
+  'orchid',
+  'palegoldenrod',
+  'palegreen',
+  'paleturquoise',
+  'palevioletred',
+  'papayawhip',
+  'peachpuff',
+  'peru',
+  'pink',
+  'plum',
+  'powderblue',
+  'purple',
+  'rebeccapurple',
+  'red',
+  'rosybrown',
+  'royalblue',
+  'saddlebrown',
+  'salmon',
+  'sandybrown',
+  'seagreen',
+  'seashell',
+  'sienna',
+  'silver',
+  'skyblue',
+  'slateblue',
+  'slategray',
+  'slategrey',
+  'snow',
+  'springgreen',
+  'steelblue',
+  'tan',
+  'teal',
+  'thistle',
+  'tomato',
+  'turquoise',
   'violet',
-  'wheat', 'white', 'whitesmoke',
-  'yellow', 'yellowgreen',
+  'wheat',
+  'white',
+  'whitesmoke',
+  'yellow',
+  'yellowgreen',
   // CSS color keywords
-  'transparent', 'currentcolor',
+  'transparent',
+  'currentcolor',
   // CSS-wide keywords (should never be wrapped in var())
-  'inherit', 'initial', 'unset', 'revert',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
 ]);
 
 export function isCssNamedColor(value: string): boolean {

package/lib/shared/cssProperties.test.ts

@@ -25,8 +25,7 @@ const baseCtx: VisualModeRuleContext = {
   hasMarginLonghand: false,
   hasBackgroundImage: false,
 };
-const ctx = (overrides: Partial<VisualModeRuleContext> = {}): VisualModeRuleContext =>
-  ({ ...baseCtx, ...overrides });
+const ctx = (overrides: Partial<VisualModeRuleContext> = {}): VisualModeRuleContext => ({ ...baseCtx, ...overrides });
 
 describe('cssProperties', () => {
   describe('CSS_PROPERTIES', () => {
@@ -46,13 +45,13 @@ describe('cssProperties', () => {
   describe('CSS_PROPERTIES_DEFINITION', () => {
     test('contains display property with values', () => {
       expect(CSS_PROPERTIES_DEFINITION.display).toBeDefined();
-      expect(CSS_PROPERTIES_DEFINITION.display.values).toContain('flex');
-      expect(CSS_PROPERTIES_DEFINITION.display.type).toBe('select');
+      expect(CSS_PROPERTIES_DEFINITION.display!.values).toContain('flex');
+      expect(CSS_PROPERTIES_DEFINITION.display!.type).toBe('select');
     });
 
     test('contains position property', () => {
       expect(CSS_PROPERTIES_DEFINITION.position).toBeDefined();
-      expect(CSS_PROPERTIES_DEFINITION.position.values).toContain('relative');
+      expect(CSS_PROPERTIES_DEFINITION.position!.values).toContain('relative');
     });
 
     test('contains flexbox properties', () => {
@@ -64,12 +63,12 @@ describe('cssProperties', () => {
     test('contains dimension properties', () => {
       expect(CSS_PROPERTIES_DEFINITION.width).toBeDefined();
       expect(CSS_PROPERTIES_DEFINITION.height).toBeDefined();
-      expect(CSS_PROPERTIES_DEFINITION.width.type).toBe('string');
+      expect(CSS_PROPERTIES_DEFINITION.width!.type).toBe('string');
     });
 
     test('contains cursor property with values', () => {
-      expect(CSS_PROPERTIES_DEFINITION.cursor.values).toContain('pointer');
-      expect(CSS_PROPERTIES_DEFINITION.cursor.values).toContain('default');
+      expect(CSS_PROPERTIES_DEFINITION.cursor!.values).toContain('pointer');
+      expect(CSS_PROPERTIES_DEFINITION.cursor!.values).toContain('default');
     });
   });
 
@@ -81,13 +80,13 @@ describe('cssProperties', () => {
 
     test('filters properties by exact prefix match', () => {
       const result = filterCSSProperties('flex');
-      expect(result.every(prop => prop.toLowerCase().startsWith('flex'))).toBe(true);
+      expect(result.every((prop) => prop.toLowerCase().startsWith('flex'))).toBe(true);
     });
 
     test('filters properties case-insensitively', () => {
       const result = filterCSSProperties('FLEX');
       expect(result.length).toBeGreaterThan(0);
-      expect(result.every(prop => prop.toLowerCase().startsWith('flex'))).toBe(true);
+      expect(result.every((prop) => prop.toLowerCase().startsWith('flex'))).toBe(true);
     });
 
     test('supports camelCase abbreviation matching', () => {
@@ -98,7 +97,7 @@ describe('cssProperties', () => {
 
     test('prioritizes startsWith matches over abbreviation matches', () => {
       const result = filterCSSProperties('b');
-      const startsWithB = result.filter(p => p.toLowerCase().startsWith('b'));
+      const startsWithB = result.filter((p) => p.toLowerCase().startsWith('b'));
       expect(startsWithB.length).toBeGreaterThan(0);
       // startsWith matches should come first
       expect(result.indexOf('border')).toBeLessThan(result.indexOf('backgroundColor') || Infinity);
@@ -111,7 +110,7 @@ describe('cssProperties', () => {
 
     test('handles single character input', () => {
       const result = filterCSSProperties('p');
-      expect(result.some(prop => prop.toLowerCase().startsWith('p'))).toBe(true);
+      expect(result.some((prop) => prop.toLowerCase().startsWith('p'))).toBe(true);
     });
 
     test('trims whitespace from input', () => {
@@ -300,9 +299,9 @@ describe('cssProperties', () => {
 
   describe('VISUAL_MODE_PROPERTIES', () => {
     test('contains common Webflow-style groups', () => {
-      expect(VISUAL_MODE_PROPERTIES['Layout']).toContain('display');
-      expect(VISUAL_MODE_PROPERTIES['Spacing']).toContain('padding');
-      expect(VISUAL_MODE_PROPERTIES['Typography']).toContain('fontSize');
+      expect(VISUAL_MODE_PROPERTIES.Layout).toContain('display');
+      expect(VISUAL_MODE_PROPERTIES.Spacing).toContain('padding');
+      expect(VISUAL_MODE_PROPERTIES.Typography).toContain('fontSize');
     });
 
     test('every group name maps to a known CSS_PROPERTY_GROUPS group', () => {
@@ -336,121 +335,121 @@ describe('cssProperties', () => {
 
   describe('VISUAL_MODE_RULES — flex/grid container props', () => {
     test('flexDirection visible only when display is flex/inline-flex', () => {
-      expect(VISUAL_MODE_RULES.flexDirection(ctx({ display: 'flex' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.flexDirection(ctx({ display: 'inline-flex' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.flexDirection(ctx({ display: 'block' }))).toBe(false);
-      expect(VISUAL_MODE_RULES.flexDirection(ctx({ display: 'grid' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.flexDirection!(ctx({ display: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.flexDirection!(ctx({ display: 'inline-flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.flexDirection!(ctx({ display: 'block' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.flexDirection!(ctx({ display: 'grid' }))).toBe(false);
     });
 
     test('justifyContent visible for flex AND grid', () => {
-      expect(VISUAL_MODE_RULES.justifyContent(ctx({ display: 'flex' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.justifyContent(ctx({ display: 'grid' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.justifyContent(ctx({ display: 'block' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.justifyContent!(ctx({ display: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.justifyContent!(ctx({ display: 'grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.justifyContent!(ctx({ display: 'block' }))).toBe(false);
     });
 
     test('gridTemplateColumns visible only for grid/inline-grid', () => {
-      expect(VISUAL_MODE_RULES.gridTemplateColumns(ctx({ display: 'grid' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.gridTemplateColumns(ctx({ display: 'inline-grid' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.gridTemplateColumns(ctx({ display: 'flex' }))).toBe(false);
-      expect(VISUAL_MODE_RULES.gridTemplateColumns(ctx({ display: 'block' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.gridTemplateColumns!(ctx({ display: 'grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gridTemplateColumns!(ctx({ display: 'inline-grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gridTemplateColumns!(ctx({ display: 'flex' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.gridTemplateColumns!(ctx({ display: 'block' }))).toBe(false);
     });
 
     test('gap visible for both flex and grid containers', () => {
-      expect(VISUAL_MODE_RULES.gap(ctx({ display: 'flex' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.gap(ctx({ display: 'grid' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.gap(ctx({ display: 'block' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.gap!(ctx({ display: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gap!(ctx({ display: 'grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gap!(ctx({ display: 'block' }))).toBe(false);
     });
   });
 
   describe('VISUAL_MODE_RULES — flex/grid item props (parent display)', () => {
     test('flexGrow visible only when parent is flex', () => {
-      expect(VISUAL_MODE_RULES.flexGrow(ctx({ parentDisplay: 'flex' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.flexGrow(ctx({ parentDisplay: 'inline-flex' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.flexGrow(ctx({ parentDisplay: 'block' }))).toBe(false);
-      expect(VISUAL_MODE_RULES.flexGrow(ctx({ parentDisplay: 'grid' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.flexGrow!(ctx({ parentDisplay: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.flexGrow!(ctx({ parentDisplay: 'inline-flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.flexGrow!(ctx({ parentDisplay: 'block' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.flexGrow!(ctx({ parentDisplay: 'grid' }))).toBe(false);
     });
 
     test('gridArea visible only when parent is grid', () => {
-      expect(VISUAL_MODE_RULES.gridArea(ctx({ parentDisplay: 'grid' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.gridArea(ctx({ parentDisplay: 'inline-grid' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.gridArea(ctx({ parentDisplay: 'flex' }))).toBe(false);
-      expect(VISUAL_MODE_RULES.gridArea(ctx({ parentDisplay: 'block' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.gridArea!(ctx({ parentDisplay: 'grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gridArea!(ctx({ parentDisplay: 'inline-grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.gridArea!(ctx({ parentDisplay: 'flex' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.gridArea!(ctx({ parentDisplay: 'block' }))).toBe(false);
     });
 
     test('alignSelf visible when parent is flex OR grid', () => {
-      expect(VISUAL_MODE_RULES.alignSelf(ctx({ parentDisplay: 'flex' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.alignSelf(ctx({ parentDisplay: 'grid' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.alignSelf(ctx({ parentDisplay: 'block' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.alignSelf!(ctx({ parentDisplay: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.alignSelf!(ctx({ parentDisplay: 'grid' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.alignSelf!(ctx({ parentDisplay: 'block' }))).toBe(false);
     });
 
     test('item rules ignore own display — only parent display matters', () => {
       // Element has display:block but parent is flex → flexGrow still visible.
-      expect(VISUAL_MODE_RULES.flexGrow(ctx({ display: 'block', parentDisplay: 'flex' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.flexGrow!(ctx({ display: 'block', parentDisplay: 'flex' }))).toBe(true);
       // Element has display:flex but parent is block → flexGrow hidden.
-      expect(VISUAL_MODE_RULES.flexGrow(ctx({ display: 'flex', parentDisplay: 'block' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.flexGrow!(ctx({ display: 'flex', parentDisplay: 'block' }))).toBe(false);
     });
   });
 
   describe('VISUAL_MODE_RULES — position-dependent', () => {
     test('top/right/bottom/left/zIndex hidden when position is static', () => {
       const c = ctx({ position: 'static' });
-      expect(VISUAL_MODE_RULES.top(c)).toBe(false);
-      expect(VISUAL_MODE_RULES.right(c)).toBe(false);
-      expect(VISUAL_MODE_RULES.bottom(c)).toBe(false);
-      expect(VISUAL_MODE_RULES.left(c)).toBe(false);
-      expect(VISUAL_MODE_RULES.zIndex(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.top!(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.right!(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.bottom!(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.left!(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.zIndex!(c)).toBe(false);
     });
 
     test('top/right/bottom/left/zIndex visible when position is non-static', () => {
       for (const position of ['relative', 'absolute', 'fixed', 'sticky']) {
         const c = ctx({ position });
-        expect(VISUAL_MODE_RULES.top(c)).toBe(true);
-        expect(VISUAL_MODE_RULES.zIndex(c)).toBe(true);
+        expect(VISUAL_MODE_RULES.top!(c)).toBe(true);
+        expect(VISUAL_MODE_RULES.zIndex!(c)).toBe(true);
       }
     });
   });
 
   describe('VISUAL_MODE_RULES — tag-based', () => {
     test('objectFit visible only for img/video', () => {
-      expect(VISUAL_MODE_RULES.objectFit(ctx({ tagName: 'img' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.objectFit(ctx({ tagName: 'video' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.objectFit(ctx({ tagName: 'div' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.objectFit!(ctx({ tagName: 'img' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.objectFit!(ctx({ tagName: 'video' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.objectFit!(ctx({ tagName: 'div' }))).toBe(false);
     });
 
     test('listStyle visible only for ul/ol/li', () => {
-      expect(VISUAL_MODE_RULES.listStyle(ctx({ tagName: 'ul' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.listStyle(ctx({ tagName: 'ol' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.listStyle(ctx({ tagName: 'li' }))).toBe(true);
-      expect(VISUAL_MODE_RULES.listStyle(ctx({ tagName: 'div' }))).toBe(false);
+      expect(VISUAL_MODE_RULES.listStyle!(ctx({ tagName: 'ul' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.listStyle!(ctx({ tagName: 'ol' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.listStyle!(ctx({ tagName: 'li' }))).toBe(true);
+      expect(VISUAL_MODE_RULES.listStyle!(ctx({ tagName: 'div' }))).toBe(false);
     });
   });
 
   describe('VISUAL_MODE_RULES — padding/margin shorthand-vs-longhand toggle', () => {
     test('padding shown when no longhand set; longhands hidden', () => {
       const c = ctx({ hasPaddingLonghand: false });
-      expect(VISUAL_MODE_RULES.padding(c)).toBe(true);
-      expect(VISUAL_MODE_RULES.paddingTop(c)).toBe(false);
-      expect(VISUAL_MODE_RULES.paddingRight(c)).toBe(false);
-      expect(VISUAL_MODE_RULES.paddingBottom(c)).toBe(false);
-      expect(VISUAL_MODE_RULES.paddingLeft(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.padding!(c)).toBe(true);
+      expect(VISUAL_MODE_RULES.paddingTop!(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.paddingRight!(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.paddingBottom!(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.paddingLeft!(c)).toBe(false);
     });
 
     test('padding hidden when any longhand set; longhands shown', () => {
       const c = ctx({ hasPaddingLonghand: true });
-      expect(VISUAL_MODE_RULES.padding(c)).toBe(false);
-      expect(VISUAL_MODE_RULES.paddingTop(c)).toBe(true);
-      expect(VISUAL_MODE_RULES.paddingRight(c)).toBe(true);
-      expect(VISUAL_MODE_RULES.paddingBottom(c)).toBe(true);
-      expect(VISUAL_MODE_RULES.paddingLeft(c)).toBe(true);
+      expect(VISUAL_MODE_RULES.padding!(c)).toBe(false);
+      expect(VISUAL_MODE_RULES.paddingTop!(c)).toBe(true);
+      expect(VISUAL_MODE_RULES.paddingRight!(c)).toBe(true);
+      expect(VISUAL_MODE_RULES.paddingBottom!(c)).toBe(true);
+      expect(VISUAL_MODE_RULES.paddingLeft!(c)).toBe(true);
     });
 
     test('margin mirrors padding behavior', () => {
       const noLong = ctx({ hasMarginLonghand: false });
-      expect(VISUAL_MODE_RULES.margin(noLong)).toBe(true);
-      expect(VISUAL_MODE_RULES.marginTop(noLong)).toBe(false);
+      expect(VISUAL_MODE_RULES.margin!(noLong)).toBe(true);
+      expect(VISUAL_MODE_RULES.marginTop!(noLong)).toBe(false);
       const withLong = ctx({ hasMarginLonghand: true });
-      expect(VISUAL_MODE_RULES.margin(withLong)).toBe(false);
-      expect(VISUAL_MODE_RULES.marginTop(withLong)).toBe(true);
+      expect(VISUAL_MODE_RULES.margin!(withLong)).toBe(false);
+      expect(VISUAL_MODE_RULES.marginTop!(withLong)).toBe(true);
     });
   });