@stylexjs/shared 0.5.0 → 0.6.0

package/lib/types/index.js.flow

@@ -15,15 +15,23 @@
 // We want on type that defines CSS Types
 // Option 2: Do a union type and make
 
-// interface ICSSType {
+// interface CSSType {
 //   toString(): string;
 // }
 
-type ValueWithDefault<+T> =
-  | T
+type NestedWithNumbers =
+  | number
+  | string
   | $ReadOnly<{
-      default: T,
-      [string]: ValueWithDefault<T>,
+      default: NestedWithNumbers,
+      [string]: NestedWithNumbers,
+    }>;
+
+type ValueWithDefault =
+  | string
+  | $ReadOnly<{
+      default: ValueWithDefault,
+      [string]: ValueWithDefault,
     }>;
 
 type CSSSyntax =
@@ -43,51 +51,56 @@ type CSSSyntax =
   | '<custom-ident>'
   | '<transform-list>';
 
-type CSSSyntaxType = CSSSyntax | $ReadOnlyArray<CSSSyntax>;
-
-declare export class CSSType {}
+type CSSSyntaxType = CSSSyntax;
 
-export interface ICSSType<+T: string | number> {
-  +value: ValueWithDefault<T>;
+declare class BaseCSSType {
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault): void;
+}
+export interface CSSType<+_T: string | number = string | number> {
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
 }
 
+declare export const isCSSType: (
+  value: mixed,
+) => value is CSSType<string | number>;
+
 type AnguleValue = string;
 declare export class Angle<+T: AnguleValue>
-  extends CSSType
-  implements ICSSType<T>
+  extends BaseCSSType
+  implements CSSType<T>
 {
-  +value: ValueWithDefault<T>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
   static +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
   static create<T: AnguleValue = AnguleValue>(
-    value: ValueWithDefault<T>,
+    value: ValueWithDefault,
   ): Angle<T>;
 }
 declare export const angle: $FlowFixMe;
 
 type ColorValue = string;
 declare export class Color<+T: ColorValue>
-  extends CSSType
-  implements ICSSType<T>
+  extends BaseCSSType
+  implements CSSType<T>
 {
-  +value: ValueWithDefault<T>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
-  static create<T: ColorValue = ColorValue>(
-    value: ValueWithDefault<T>,
-  ): Color<T>;
+  static create<T: ColorValue = ColorValue>(value: ValueWithDefault): Color<T>;
 }
 declare export const color: $FlowFixMe;
 
 type URLValue = string;
 
-declare export class Url<+T: URLValue> extends CSSType implements ICSSType<T> {
-  +value: ValueWithDefault<T>;
+declare export class Url<+T: URLValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
-  static create<T: URLValue = URLValue>(value: ValueWithDefault<T>): Url<T>;
+  static create<T: URLValue = URLValue>(value: ValueWithDefault): Url<T>;
 }
 declare export const url: $FlowFixMe;
 
@@ -95,74 +108,68 @@ type ImageValue = string;
 
 declare export class Image<+T: ImageValue>
   extends Url<T>
-  implements ICSSType<T>
+  implements CSSType<T>
 {
-  +value: ValueWithDefault<T>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
-  static create<T: ImageValue = ImageValue>(
-    value: ValueWithDefault<T>,
-  ): Image<T>;
+  constructor(value: ValueWithDefault): void;
+  static create<T: ImageValue = ImageValue>(value: ValueWithDefault): Image<T>;
 }
 declare export const image: $FlowFixMe;
 
 type IntegerValue = number;
 
 declare export class Integer<+T: IntegerValue>
-  extends CSSType
-  implements ICSSType<T>
+  extends BaseCSSType
+  implements CSSType<T>
 {
-  +value: ValueWithDefault<T>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
   static create<T: IntegerValue = IntegerValue>(value: T): Integer<T>;
 }
 declare export const integer: $FlowFixMe;
 
 type LengthPercentageValue = string;
 
-declare export class LengthPercentage<+T: LengthPercentageValue>
-  extends CSSType
-  implements ICSSType<string>
+declare export class LengthPercentage<+_T: LengthPercentageValue>
+  extends BaseCSSType
+  implements CSSType<string>
 {
-  +value: ValueWithDefault<T>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
-  static createLength<T: LengthPercentageValue | number>(
-    value: ValueWithDefault<T>,
+  static createLength<_T: LengthPercentageValue | number>(
+    value: ValueWithDefault,
   ): LengthPercentage<string>;
-  static createPercentage<T: LengthPercentageValue | number>(
-    value: ValueWithDefault<T>,
+  static createPercentage<_T: LengthPercentageValue | number>(
+    value: ValueWithDefault,
   ): LengthPercentage<string>;
 }
 declare export const lengthPercentage: $FlowFixMe;
 
 type LengthValue = number | string;
 
-declare export class Length<+T: LengthValue>
+declare export class Length<+_T: LengthValue>
   extends LengthPercentage<string>
-  implements ICSSType<string>
+  implements CSSType<string>
 {
-  +value: ValueWithDefault<string>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
   static create<T: LengthValue = LengthValue>(
-    value: ValueWithDefault<T>,
+    value: NestedWithNumbers,
   ): Length<T>;
 }
 declare export const length: $FlowFixMe;
 
 type PercentageValue = string | number;
 
-declare export class Percentage<+T: PercentageValue>
+declare export class Percentage<+_T: PercentageValue>
   extends LengthPercentage<string>
-  implements ICSSType<string>
+  implements CSSType<string>
 {
-  +value: ValueWithDefault<string>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
   static create<T: PercentageValue = PercentageValue>(
-    value: ValueWithDefault<T>,
+    value: NestedWithNumbers,
   ): Percentage<T>;
 }
 declare export const percentage: $FlowFixMe;
@@ -170,29 +177,25 @@ declare export const percentage: $FlowFixMe;
 type NumberValue = number;
 
 declare export class Num<+T: NumberValue>
-  extends CSSType
-  implements ICSSType<T>
+  extends BaseCSSType
+  implements CSSType<T>
 {
-  +value: ValueWithDefault<T>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
-  static create<T: NumberValue = NumberValue>(
-    value: ValueWithDefault<T>,
-  ): Num<T>;
+  static create<T: NumberValue = NumberValue>(value: NestedWithNumbers): Num<T>;
 }
 declare export const number: $FlowFixMe;
 
 type ResolutionValue = string | 0;
 
 declare export class Resolution<+T: ResolutionValue>
-  extends CSSType
-  implements ICSSType<T>
+  extends BaseCSSType
+  implements CSSType<T>
 {
-  +value: ValueWithDefault<T>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
   static create<T: ResolutionValue = ResolutionValue>(
-    value: ValueWithDefault<T>,
+    value: ValueWithDefault,
   ): Resolution<T>;
 }
 declare export const resolution: $FlowFixMe;
@@ -200,27 +203,25 @@ declare export const resolution: $FlowFixMe;
 type TimeValue = string | 0;
 
 declare export class Time<+T: TimeValue>
-  extends CSSType
-  implements ICSSType<T>
+  extends BaseCSSType
+  implements CSSType<T>
 {
-  +value: ValueWithDefault<T>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
-  static create<T: TimeValue = TimeValue>(value: ValueWithDefault<T>): Time<T>;
+  static create<T: TimeValue = TimeValue>(value: ValueWithDefault): Time<T>;
 }
 declare export const time: $FlowFixMe;
 
 type TransformFunctionValue = string;
 
 declare export class TransformFunction<+T: TransformFunctionValue>
-  extends CSSType
-  implements ICSSType<T>
+  extends BaseCSSType
+  implements CSSType<T>
 {
-  +value: ValueWithDefault<T>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
   static create<T: TransformFunctionValue = TransformFunctionValue>(
-    value: ValueWithDefault<T>,
+    value: ValueWithDefault,
   ): TransformFunction<T>;
 }
 declare export const transformFunction: $FlowFixMe;
@@ -228,14 +229,13 @@ declare export const transformFunction: $FlowFixMe;
 type TransformListValue = string;
 
 declare export class TransformList<T: TransformListValue>
-  extends CSSType
-  implements ICSSType<T>
+  extends BaseCSSType
+  implements CSSType<T>
 {
-  +value: ValueWithDefault<T>;
+  +value: ValueWithDefault;
   +syntax: CSSSyntaxType;
-  constructor(value: ValueWithDefault<T>): void;
   static create<T: TransformListValue = TransformListValue>(
-    value: ValueWithDefault<T>,
+    value: ValueWithDefault,
   ): TransformList<T>;
 }
 declare export const transformList: $FlowFixMe;

package/lib/utils/normalize-value.js

@@ -9,12 +9,11 @@ var _leadingZero = _interopRequireDefault(require("./normalizers/leading-zero"))
 var _quotes = _interopRequireDefault(require("./normalizers/quotes"));
 var _timings = _interopRequireDefault(require("./normalizers/timings"));
 var _whitespace = _interopRequireDefault(require("./normalizers/whitespace"));
-var _zeroDimensions = _interopRequireDefault(require("./normalizers/zero-dimensions"));
 var _detectUnclosedFns = _interopRequireDefault(require("./normalizers/detect-unclosed-fns"));
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 var _convertCamelCaseValues = _interopRequireDefault(require("./normalizers/convert-camel-case-values"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
+const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
 function normalizeValue(value, key, _ref) {
   let {
     useRemForFontSize

package/lib/utils/normalizers/zero-dimensions.d.ts

@@ -8,8 +8,8 @@
  */
 
 /**
- * Remove units in zero values, except when required: in angles and timings,
- * in which case make them consistent 0deg and 0s.
+ * Remove units in zero values, except when required: in angles, timings, fractions, and percentages,
+ * in which case make them consistent 0deg, 0s, 0fr, and 0%.
  */
 
 declare function normalizeZeroDimensions(

package/lib/utils/normalizers/zero-dimensions.js

@@ -8,6 +8,8 @@ var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser")
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const angles = ['deg', 'grad', 'turn', 'rad'];
 const timings = ['ms', 's'];
+const fraction = 'fr';
+const percentage = '%';
 function normalizeZeroDimensions(ast, _) {
   let endFunction = 0;
   ast.walk(node => {
@@ -28,6 +30,10 @@ function normalizeZeroDimensions(ast, _) {
       node.value = '0deg';
     } else if (timings.indexOf(dimension.unit) !== -1) {
       node.value = '0s';
+    } else if (dimension.unit === fraction) {
+      node.value = '0fr';
+    } else if (dimension.unit === percentage) {
+      node.value = '0%';
     } else if (!endFunction) {
       node.value = '0';
     }

package/lib/utils/normalizers/zero-dimensions.js.flow

@@ -8,8 +8,8 @@
  */
 
 /**
- * Remove units in zero values, except when required: in angles and timings,
- * in which case make them consistent 0deg and 0s.
+ * Remove units in zero values, except when required: in angles, timings, fractions, and percentages,
+ * in which case make them consistent 0deg, 0s, 0fr, and 0%.
  */
 
 declare export default function normalizeZeroDimensions(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "main": "lib/index.js",
   "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.5.0"
+    "@stylexjs/scripts": "0.6.0"
   },
   "jest": {
     "snapshotFormat": {