Create appearence and margins tests.

packages/style-value-parser/src/properties/__tests__/appearance.test.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+import { Appearance } from '../appearance';
+describe('Test CSS property: `appearance`', () => {
+  test('CSS Basic User Interface Module Level 4 values', () => {
+    expect(Appearance.parse.parseToEnd('auto')).toEqual(new Appearance('auto'));
+    expect(Appearance.parse.parseToEnd('none')).toEqual(new Appearance('none'));
+    expect(Appearance.parse.parseToEnd('menulist-button')).toEqual(
+      new Appearance('menulist-button'),
+    );
+    expect(Appearance.parse.parseToEnd('textfield')).toEqual(
+      new Appearance('textfield'),
+    );
+  });
+  test('CSS wide keyword values', () => {
+    expect(Appearance.parse.parseToEnd('inherit')).toEqual(
+      new Appearance('inherit'),
+    );
+    expect(Appearance.parse.parseToEnd('initial')).toEqual(
+      new Appearance('initial'),
+    );
+    expect(Appearance.parse.parseToEnd('revert')).toEqual(
+      new Appearance('revert'),
+    );
+    expect(Appearance.parse.parseToEnd('unset')).toEqual(
+      new Appearance('auto'),
+    );
+  });
+});

packages/style-value-parser/src/properties/__tests__/margins.test.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+import { Percentage } from '../../css-types/common-types';
+import { Ch, Em, In, Px, Rem, Vh, Vw } from '../../css-types/length';
+import {
+  MarginDir,
+  marginBlock,
+  marginBlockEnd,
+  marginBlockStart,
+  marginBottom,
+  marginInline,
+  marginInlineEnd,
+  marginInlineStart,
+  marginLeft,
+  marginRight,
+  marginTop,
+} from '../margins';
+describe('Test CSS property: `margin`', () => {
+  test('Test all margin CSS shorthand properties', () => {
+    expect(marginTop.parse.parseToEnd('25px')).toEqual(
+      new MarginDir(new Px(25)),
+    );
+    expect(marginLeft.parse.parseToEnd('5%')).toEqual(
+      new MarginDir(new Percentage(5)),
+    );
+    expect(marginRight.parse.parseToEnd('5em')).toEqual(
+      new MarginDir(new Em(5)),
+    );
+    expect(marginBottom.parse.parseToEnd('5vh')).toEqual(
+      new MarginDir(new Vh(5)),
+    );
+    expect(marginBlock.parse.parseToEnd('5in')).toEqual(
+      new MarginDir(new In(5)),
+    );
+    expect(marginBlockEnd.parse.parseToEnd('5vw')).toEqual(
+      new MarginDir(new Vw(5)),
+    );
+    expect(marginBlockStart.parse.parseToEnd('5ch')).toEqual(
+      new MarginDir(new Ch(5)),
+    );
+    expect(marginInline.parse.parseToEnd('5%')).toEqual(
+      new MarginDir(new Percentage(5)),
+    );
+    expect(marginInlineEnd.parse.parseToEnd('5px')).toEqual(
+      new MarginDir(new Px(5)),
+    );
+    expect(marginInlineStart.parse.parseToEnd('5rem')).toEqual(
+      new MarginDir(new Rem(5)),
+    );
+  });
+
+  test('CSS wide keyword values', () => {
+    expect(marginTop.parse.parseToEnd('inherit')).toEqual(
+      new MarginDir('inherit'),
+    );
+    expect(marginLeft.parse.parseToEnd('initial')).toEqual(
+      new MarginDir('initial'),
+    );
+    expect(marginRight.parse.parseToEnd('revert')).toEqual(
+      new MarginDir('revert'),
+    );
+    expect(marginBottom.parse.parseToEnd('unset')).toEqual(
+      new MarginDir('unset'),
+    );
+  });
+});

packages/style-value-parser/src/properties/appearance.js

@@ -11,7 +11,7 @@ import type { FromParser } from '../core';
 
 import { Parser } from '../core';
 import { cssWideKeywords } from '../css-types/common-types';
-import { CSSVariable } from '../css-types/css-variable';
+// import { CSSVariable } from '../css-types/css-variable';
 
 /**
  * MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
@@ -22,8 +22,8 @@ export class Appearance {
     | 'none'
     | 'auto'
     | 'menulist-button'
-    | 'textfield'
-    | CSSVariable<Appearance>;
+    | 'textfield';
+  // | CSSVariable<Appearance>;
 
   constructor(value: this['value']) {
     this.value = value;
@@ -44,7 +44,7 @@ export class Appearance {
       Parser.string('auto'),
       Parser.string('menulist-button'),
       Parser.string('textfield'),
-      CSSVariable.parse(Appearance.parse),
+      // CSSVariable.parse(Appearance.parse),
     ).map((v) => new Appearance(v));
   }
 }

packages/style-value-parser/src/properties/margins.js

@@ -12,13 +12,13 @@ import type { LengthPercentage } from '../css-types/length-percentage';
 
 import { Parser } from '../core';
 import { cssWideKeywords } from '../css-types/common-types';
-import { CSSVariable } from '../css-types/css-variable';
+// import { CSSVariable } from '../css-types/css-variable';
 import { lengthPercentage } from '../css-types/length-percentage';
 
 export class MarginDir {
   +value:
     | LengthPercentage
-    | CSSVariable<MarginDir>
+    // | CSSVariable<MarginDir>
     | FromParser<typeof cssWideKeywords>;
 
   constructor(value: this['value']) {
@@ -37,7 +37,7 @@ export class MarginDir {
     return Parser.oneOf(
       cssWideKeywords,
       lengthPercentage,
-      CSSVariable.parse(MarginDir.parse),
+      // CSSVariable.parse(MarginDir.parse),
     ).map((v) => new MarginDir(v));
   }
 }