@stylexjs/stylex 0.12.0 → 0.13.0

package/lib/cjs/stylex.js

@@ -0,0 +1,242 @@
+'use strict';
+
+var styleq = {};
+
+var hasRequiredStyleq;
+
+function requireStyleq () {
+	if (hasRequiredStyleq) return styleq;
+	hasRequiredStyleq = 1;
+
+	Object.defineProperty(styleq, "__esModule", {
+	  value: true
+	});
+	styleq.styleq = void 0;
+	var cache = new WeakMap();
+	var compiledKey = '$$css';
+	function createStyleq(options) {
+	  var disableCache;
+	  var disableMix;
+	  var transform;
+	  if (options != null) {
+	    disableCache = options.disableCache === true;
+	    disableMix = options.disableMix === true;
+	    transform = options.transform;
+	  }
+	  return function styleq() {
+	    var definedProperties = [];
+	    var className = '';
+	    var inlineStyle = null;
+	    var debugString = '';
+	    var nextCache = disableCache ? null : cache;
+	    var styles = new Array(arguments.length);
+	    for (var i = 0; i < arguments.length; i++) {
+	      styles[i] = arguments[i];
+	    }
+	    while (styles.length > 0) {
+	      var possibleStyle = styles.pop();
+	      if (possibleStyle == null || possibleStyle === false) {
+	        continue;
+	      }
+	      if (Array.isArray(possibleStyle)) {
+	        for (var _i = 0; _i < possibleStyle.length; _i++) {
+	          styles.push(possibleStyle[_i]);
+	        }
+	        continue;
+	      }
+	      var style = transform != null ? transform(possibleStyle) : possibleStyle;
+	      if (style.$$css != null) {
+	        var classNameChunk = '';
+	        if (nextCache != null && nextCache.has(style)) {
+	          var cacheEntry = nextCache.get(style);
+	          if (cacheEntry != null) {
+	            classNameChunk = cacheEntry[0];
+	            debugString = cacheEntry[2];
+	            definedProperties.push.apply(definedProperties, cacheEntry[1]);
+	            nextCache = cacheEntry[3];
+	          }
+	        } else {
+	          var definedPropertiesChunk = [];
+	          for (var prop in style) {
+	            var value = style[prop];
+	            if (prop === compiledKey) {
+	              var compiledKeyValue = style[prop];
+	              if (compiledKeyValue !== true) {
+	                debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
+	              }
+	              continue;
+	            }
+	            if (typeof value === 'string' || value === null) {
+	              if (!definedProperties.includes(prop)) {
+	                definedProperties.push(prop);
+	                if (nextCache != null) {
+	                  definedPropertiesChunk.push(prop);
+	                }
+	                if (typeof value === 'string') {
+	                  classNameChunk += classNameChunk ? ' ' + value : value;
+	                }
+	              }
+	            } else {
+	              console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+	            }
+	          }
+	          if (nextCache != null) {
+	            var weakMap = new WeakMap();
+	            nextCache.set(style, [classNameChunk, definedPropertiesChunk, debugString, weakMap]);
+	            nextCache = weakMap;
+	          }
+	        }
+	        if (classNameChunk) {
+	          className = className ? classNameChunk + ' ' + className : classNameChunk;
+	        }
+	      } else {
+	        if (disableMix) {
+	          if (inlineStyle == null) {
+	            inlineStyle = {};
+	          }
+	          inlineStyle = Object.assign({}, style, inlineStyle);
+	        } else {
+	          var subStyle = null;
+	          for (var _prop in style) {
+	            var _value = style[_prop];
+	            if (_value !== undefined) {
+	              if (!definedProperties.includes(_prop)) {
+	                if (_value != null) {
+	                  if (inlineStyle == null) {
+	                    inlineStyle = {};
+	                  }
+	                  if (subStyle == null) {
+	                    subStyle = {};
+	                  }
+	                  subStyle[_prop] = _value;
+	                }
+	                definedProperties.push(_prop);
+	                nextCache = null;
+	              }
+	            }
+	          }
+	          if (subStyle != null) {
+	            inlineStyle = Object.assign(subStyle, inlineStyle);
+	          }
+	        }
+	      }
+	    }
+	    var styleProps = [className, inlineStyle, debugString];
+	    return styleProps;
+	  };
+	}
+	var styleq$1 = styleq.styleq = createStyleq();
+	styleq$1.factory = createStyleq;
+	return styleq;
+}
+
+var styleqExports = /*@__PURE__*/ requireStyleq();
+
+const errorForFn = name => new Error(`Unexpected 'stylex.${name}' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.`);
+const errorForType = key => errorForFn(`types.${key}`);
+const create = function stylexCreate(_styles) {
+  throw errorForFn('create');
+};
+const createTheme = (_baseTokens, _overrides) => {
+  throw errorForFn('createTheme');
+};
+const defineConsts = function stylexDefineConsts(_styles) {
+  throw errorForFn('defineConsts');
+};
+const defineVars = function stylexDefineVars(_styles) {
+  throw errorForFn('defineVars');
+};
+const firstThatWorks = function () {
+  throw errorForFn('firstThatWorks');
+};
+const keyframes = _keyframes => {
+  throw errorForFn('keyframes');
+};
+const positionTry = _positionTry => {
+  throw errorForFn('positionTry');
+};
+function props() {
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+  const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
+  const result = {};
+  if (className != null && className !== '') {
+    result.className = className;
+  }
+  if (style != null && Object.keys(style).length > 0) {
+    result.style = style;
+  }
+  if (dataStyleSrc != null && dataStyleSrc !== '') {
+    result['data-style-src'] = dataStyleSrc;
+  }
+  return result;
+}
+const types = {
+  angle: _v => {
+    throw errorForType('angle');
+  },
+  color: _v => {
+    throw errorForType('color');
+  },
+  url: _v => {
+    throw errorForType('url');
+  },
+  image: _v => {
+    throw errorForType('image');
+  },
+  integer: _v => {
+    throw errorForType('integer');
+  },
+  lengthPercentage: _v => {
+    throw errorForType('lengthPercentage');
+  },
+  length: _v => {
+    throw errorForType('length');
+  },
+  percentage: _v => {
+    throw errorForType('percentage');
+  },
+  number: _v => {
+    throw errorForType('number');
+  },
+  resolution: _v => {
+    throw errorForType('resolution');
+  },
+  time: _v => {
+    throw errorForType('time');
+  },
+  transformFunction: _v => {
+    throw errorForType('transformFunction');
+  },
+  transformList: _v => {
+    throw errorForType('transformList');
+  }
+};
+function _legacyMerge() {
+  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    styles[_key2] = arguments[_key2];
+  }
+  const [className] = styleqExports.styleq(styles);
+  return className;
+}
+_legacyMerge.create = create;
+_legacyMerge.createTheme = createTheme;
+_legacyMerge.defineVars = defineVars;
+_legacyMerge.firstThatWorks = firstThatWorks;
+_legacyMerge.keyframes = keyframes;
+_legacyMerge.positionTry = positionTry;
+_legacyMerge.props = props;
+_legacyMerge.types = types;
+const legacyMerge = _legacyMerge;
+
+exports.create = create;
+exports.createTheme = createTheme;
+exports.defineConsts = defineConsts;
+exports.defineVars = defineVars;
+exports.firstThatWorks = firstThatWorks;
+exports.keyframes = keyframes;
+exports.legacyMerge = legacyMerge;
+exports.positionTry = positionTry;
+exports.props = props;
+exports.types = types;

package/lib/{stylex.js.flow → cjs/stylex.js.flow}

@@ -16,14 +16,16 @@ import type {
   StyleX$Create,
   StyleX$CreateTheme,
   StyleX$DefineVars,
+  StyleX$DefineConsts,
   StyleXArray,
   StyleXStyles,
   StyleXStylesWithout,
   Theme,
   VarGroup,
-} from './StyleXTypes';
-import type { ValueWithDefault } from './util-types';
-import * as Types from './VarTypes';
+  PositionTry,
+} from './types/StyleXTypes';
+import type { ValueWithDefault } from './types/StyleXUtils';
+import * as Types from './types/VarTypes';
 
 export type {
   StaticStyles,
@@ -35,22 +37,12 @@ export type {
   VarGroup,
 };
 
-declare export function attrs(
-  ...styles: $ReadOnlyArray<
-    StyleXArray<
-      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
-    >,
-  >
-): $ReadOnly<{
-  class?: string,
-  'data-style-src'?: string,
-  style?: string,
-}>;
-
 declare export const create: StyleX$Create;
 
 declare export const createTheme: StyleX$CreateTheme;
 
+declare export const defineConsts: StyleX$DefineConsts;
+
 declare export const defineVars: StyleX$DefineVars;
 
 declare export const firstThatWorks: <T: string | number>(
@@ -59,6 +51,8 @@ declare export const firstThatWorks: <T: string | number>(
 
 declare export const keyframes: (_keyframes: Keyframes) => string;
 
+declare export const positionTry: (_positionTry: PositionTry) => string;
+
 declare export function props(
   this: ?mixed,
   ...styles: $ReadOnlyArray<
@@ -112,17 +106,6 @@ declare export const types: {
 
 type IStyleX = {
   (...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
-  attrs: (
-    ...styles: $ReadOnlyArray<
-      StyleXArray<
-        ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
-      >,
-    >
-  ) => $ReadOnly<{
-    class?: string,
-    'data-style-src'?: string,
-    style?: string,
-  }>,
   create: StyleX$Create,
   createTheme: StyleX$CreateTheme,
   defineVars: StyleX$DefineVars,
@@ -130,6 +113,7 @@ type IStyleX = {
     ...v: $ReadOnlyArray<T>
   ) => $ReadOnlyArray<T>,
   keyframes: (keyframes: Keyframes) => string,
+  positionTry: (positionTry: PositionTry) => string,
   props: (
     this: ?mixed,
     ...styles: $ReadOnlyArray<

package/lib/{StyleXCSSTypes.d.ts → cjs/types/StyleXCSSTypes.d.ts}

@@ -569,6 +569,21 @@ type pointerEvents =
   | 'all'
   | 'inherit';
 type position = 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed';
+type positionArea =
+  | 'top'
+  | 'left'
+  | 'bottom'
+  | 'right'
+  | 'center'
+  | 'block-start'
+  | 'block-end'
+  | 'inline-start'
+  | 'inline-end'
+  | 'span-inline-start'
+  | 'span-inline-end'
+  | 'span-block-start'
+  | 'span-block-end';
+type positionVisibility = 'always' | 'anchors-visible' | 'no-overflow';
 type quotes = string | 'none';
 type resize = 'none' | 'both' | 'horizontal' | 'vertical';
 type rowGap = number | string;
@@ -954,6 +969,7 @@ export type CSSProperties = Readonly<{
   alignTracks?: all | string;
   justifyTracks?: all | string;
   masonryAutoFlow?: all | string;
+  anchorName?: all | string;
   animation?: all | string;
   animationComposition?: all | string;
   animationDelay?: all | OptionalArray<animationDelay>;
@@ -1324,6 +1340,12 @@ export type CSSProperties = Readonly<{
   perspectiveOrigin?: all | perspectiveOrigin;
   pointerEvents?: all | pointerEvents;
   position?: all | position;
+  positionAnchor?: all | string;
+  positionArea?: all | positionArea;
+  positionTry?: all | string;
+  positionTryFallbacks?: all | string;
+  positionTryOptions?: all | string;
+  positionVisibility?: all | positionVisibility;
   quotes?: all | quotes;
   resize?: all | resize;
   rest?: all | rest;

package/lib/{StyleXCSSTypes.js.flow → cjs/types/StyleXCSSTypes.js.flow}

@@ -575,6 +575,21 @@ type pointerEvents =
   | 'all'
   | 'inherit';
 type position = 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed';
+type positionArea =
+  | 'top'
+  | 'left'
+  | 'bottom'
+  | 'right'
+  | 'center'
+  | 'block-start'
+  | 'block-end'
+  | 'inline-start'
+  | 'inline-end'
+  | 'span-inline-start'
+  | 'span-inline-end'
+  | 'span-block-start'
+  | 'span-block-end';
+type positionVisibility = 'always' | 'anchors-visible' | 'no-overflow';
 type quotes = string | 'none';
 type resize = 'none' | 'both' | 'horizontal' | 'vertical';
 type rowGap = number | string;
@@ -982,6 +997,8 @@ export type CSSProperties = $ReadOnly<{
   justifyTracks?: all | string,
   masonryAutoFlow?: all | string,
 
+  anchorName?: all | string,
+
   // Not Allowed:
   // all?: all | all,
   animation?: all | string,
@@ -1392,7 +1409,15 @@ export type CSSProperties = $ReadOnly<{
   perspective?: all | perspective,
   perspectiveOrigin?: all | perspectiveOrigin,
   pointerEvents?: all | pointerEvents,
+
   position?: all | position,
+  positionAnchor?: all | string,
+  positionArea?: all | positionArea,
+  positionTry?: all | string,
+  positionTryFallbacks?: all | string,
+  positionTryOptions?: all | string,
+  positionVisibility?: all | positionVisibility,
+
   quotes?: all | quotes,
   resize?: all | resize,
   rest?: all | rest,

package/lib/{StyleXTypes.d.ts → cjs/types/StyleXTypes.d.ts}

@@ -91,6 +91,54 @@ export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
 // NOTE: `XStyle` has been deprecated in favor of `StaticStyles` and `StyleXStyles`.
 
 export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
+
+export type PositionTry = Readonly<{
+  // Anchor Positioning Properties
+  positionAnchor?: CSSProperties['positionAnchor'],
+  positionArea?: CSSProperties['positionArea'],
+  // inset Properties
+  top?: CSSProperties['top'],
+  right?: CSSProperties['right'],
+  bottom?: CSSProperties['bottom'],
+  left?: CSSProperties['left'],
+  inset?: CSSProperties['inset'],
+  insetBlock?: CSSProperties['insetBlock'],
+  insetBlockEnd?: CSSProperties['insetBlockEnd'],
+  insetBlockStart?: CSSProperties['insetBlockStart'],
+  insetInline?: CSSProperties['insetInline'],
+  insetInlineEnd?: CSSProperties['insetInlineEnd'],
+  insetInlineStart?: CSSProperties['insetInlineStart'],
+  // margin Properties
+  margin?: CSSProperties['margin'],
+  marginBlock?: CSSProperties['marginBlock'],
+  marginBlockEnd?: CSSProperties['marginBlockEnd'],
+  marginBlockStart?: CSSProperties['marginBlockStart'],
+  marginInline?: CSSProperties['marginInline'],
+  marginInlineEnd?: CSSProperties['marginInlineEnd'],
+  marginInlineStart?: CSSProperties['marginInlineStart'],
+  marginTop?: CSSProperties['marginTop'],
+  marginBottom?: CSSProperties['marginBottom'],
+  marginLeft?: CSSProperties['marginLeft'],
+  marginRight?: CSSProperties['marginRight'],
+  // size properties
+  width?: CSSProperties['width'],
+  height?: CSSProperties['height'],
+  minWidth?: CSSProperties['minWidth'],
+  minHeight?: CSSProperties['minHeight'],
+  maxWidth?: CSSProperties['maxWidth'],
+  maxHeight?: CSSProperties['maxHeight'],
+  blockSize?: CSSProperties['blockSize'],
+  inlineSize?: CSSProperties['inlineSize'],
+  minBlockSize?: CSSProperties['minBlockSize'],
+  minInlineSize?: CSSProperties['minInlineSize'],
+  maxBlockSize?: CSSProperties['maxBlockSize'],
+  maxInlineSize?: CSSProperties['maxInlineSize'],
+  // self alignment properties
+  alignSelf?: CSSProperties['alignSelf'],
+  justifySelf?: CSSProperties['justifySelf'],
+  placeSelf?: CSSProperties['placeSelf'],
+}>;
+
 export type LegacyThemeStyles = Readonly<{ [constantName: string]: string }>;
 
 type ComplexStyleValueType<T> =
@@ -185,11 +233,11 @@ export type VarGroup<
 
 export type TokensFromVarGroup<T extends VarGroup<{}>> = T['__tokens'];
 
-export type IDFromVarGroup<T extends VarGroup<unknown, unknown>> =
+export type IDFromVarGroup<T extends VarGroup<{}>> =
   T['__opaqueId'];
 
 type TTokens = Readonly<{
-  [key: string]: CSSType | string | { [key: string]: string };
+  [key: string]: CSSType<null | string | number> | string | { [key: string]: string };
 }>;
 
 type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
@@ -206,6 +254,13 @@ type NestedVarObject<T> =
       [key: `@${string}`]: NestedVarObject<T>;
     }>;
 
+export type StyleX$DefineConsts = <
+  DefaultTokens extends TTokens,
+  ID extends symbol = symbol,
+>(
+  tokens: DefaultTokens,
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
+
 export type StyleX$DefineVars = <
   DefaultTokens extends TTokens,
   ID extends symbol = symbol,
@@ -213,11 +268,11 @@ export type StyleX$DefineVars = <
   tokens: DefaultTokens,
 ) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
-declare class ThemeKey<out VG extends VarGroup> extends String {
+declare class ThemeKey<out VG extends VarGroup<{}>> extends String {
   private varGroup: VG;
 }
 export type Theme<
-  T extends VarGroup<unknown, symbol>,
+  T extends VarGroup<{}>,
   Tag extends symbol = symbol,
 > = Tag &
   Readonly<{
@@ -229,7 +284,7 @@ type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
 };
 
 export type StyleX$CreateTheme = <
-  TVars extends VarGroup<unknown, unknown>,
+  TVars extends VarGroup<{}>,
   ThemeID extends symbol = symbol,
 >(
   baseTokens: TVars,

package/lib/{StyleXTypes.js.flow → cjs/types/StyleXTypes.js.flow}

@@ -53,12 +53,59 @@ export type StyleXSingleStyle = false | ?NestedCSSPropTypes;
 export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
   false | ?$ReadOnly<{ ...T, $$css: true }>,
 >;
-export type XStyleWithout<+T: { +[string]: mixed }> = XStyle<
-  $ReadOnly<$Diff<NestedCSSPropTypes, $Exact<T>>>,
->;
+
+export type XStyleWithout<+T: { +[_K in keyof NestedCSSPropTypes]?: mixed }> =
+  XStyle<$ReadOnly<Omit<NestedCSSPropTypes, $Keys<T>>>>;
 
 export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
 
+export type PositionTry = $ReadOnly<{
+  // Anchor Positioning Properties
+  positionAnchor?: CSSProperties['positionAnchor'],
+  positionArea?: CSSProperties['positionArea'],
+  // inset Properties
+  top?: CSSProperties['top'],
+  right?: CSSProperties['right'],
+  bottom?: CSSProperties['bottom'],
+  left?: CSSProperties['left'],
+  inset?: CSSProperties['inset'],
+  insetBlock?: CSSProperties['insetBlock'],
+  insetBlockEnd?: CSSProperties['insetBlockEnd'],
+  insetBlockStart?: CSSProperties['insetBlockStart'],
+  insetInline?: CSSProperties['insetInline'],
+  insetInlineEnd?: CSSProperties['insetInlineEnd'],
+  insetInlineStart?: CSSProperties['insetInlineStart'],
+  // margin Properties
+  margin?: CSSProperties['margin'],
+  marginBlock?: CSSProperties['marginBlock'],
+  marginBlockEnd?: CSSProperties['marginBlockEnd'],
+  marginBlockStart?: CSSProperties['marginBlockStart'],
+  marginInline?: CSSProperties['marginInline'],
+  marginInlineEnd?: CSSProperties['marginInlineEnd'],
+  marginInlineStart?: CSSProperties['marginInlineStart'],
+  marginTop?: CSSProperties['marginTop'],
+  marginBottom?: CSSProperties['marginBottom'],
+  marginLeft?: CSSProperties['marginLeft'],
+  marginRight?: CSSProperties['marginRight'],
+  // size properties
+  width?: CSSProperties['width'],
+  height?: CSSProperties['height'],
+  minWidth?: CSSProperties['minWidth'],
+  minHeight?: CSSProperties['minHeight'],
+  maxWidth?: CSSProperties['maxWidth'],
+  maxHeight?: CSSProperties['maxHeight'],
+  blockSize?: CSSProperties['blockSize'],
+  inlineSize?: CSSProperties['inlineSize'],
+  minBlockSize?: CSSProperties['minBlockSize'],
+  minInlineSize?: CSSProperties['minInlineSize'],
+  maxBlockSize?: CSSProperties['maxBlockSize'],
+  maxInlineSize?: CSSProperties['maxInlineSize'],
+  // self alignment properties
+  alignSelf?: CSSProperties['alignSelf'],
+  justifySelf?: CSSProperties['justifySelf'],
+  placeSelf?: CSSProperties['placeSelf'],
+}>;
+
 export type LegacyThemeStyles = $ReadOnly<{
   [constantName: string]: string,
   ...
@@ -167,6 +214,10 @@ export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
   tokens: DefaultTokens,
 ) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
+export type StyleX$DefineConsts = <DefaultTokens: TTokens, ID: string = string>(
+  tokens: DefaultTokens,
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
+
 // opaque type ThemeKey<+_VG: VarGroup<{ +[string]: mixed }>>: string = string;
 declare export opaque type Theme<
   +T: VarGroup<{ +[string]: mixed }, string>,

package/lib/{VarTypes.d.ts → cjs/types/VarTypes.d.ts}

@@ -7,7 +7,7 @@
  *
  */
 
-import type { ValueWithDefault } from './util-types';
+import type { ValueWithDefault } from './StyleXUtils';
 export type CSSSyntax =
   | '*'
   | '<length>'
@@ -25,69 +25,70 @@ export type CSSSyntax =
   | '<custom-ident>'
   | '<transform-list>';
 type CSSSyntaxType = CSSSyntax;
-interface ICSSType<_T extends string | number> {
+type InnerValue = null | string | number;
+interface ICSSType<_T extends InnerValue> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Angle<T extends string | 0> implements ICSSType<T> {
+export declare class Angle<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Color<T extends string> implements ICSSType<T> {
+export declare class Color<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Url<T extends string> implements ICSSType<T> {
+export declare class Url<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Image<T extends string> implements ICSSType<T> {
+export declare class Image<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Integer<T extends string | number> implements ICSSType<T> {
+export declare class Integer<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class LengthPercentage<T extends string | number>
+export declare class LengthPercentage<T extends InnerValue>
   implements ICSSType<T>
 {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Length<T extends string | number> implements ICSSType<T> {
+export declare class Length<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Percentage<T extends string | number>
-  implements ICSSType<T>
-{
+export declare class Percentage<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Num<T extends string | number> implements ICSSType<T> {
+export declare class Num<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Resolution<T extends string> implements ICSSType<T> {
+export declare class Resolution<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class Time<T extends string | 0> implements ICSSType<T> {
+export declare class Time<T extends InnerValue> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class TransformFunction<T extends string>
+export declare class TransformFunction<T extends InnerValue>
   implements ICSSType<T>
 {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export declare class TransformList<T extends string> implements ICSSType<T> {
+export declare class TransformList<T extends InnerValue>
+  implements ICSSType<T>
+{
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export type CSSType<T extends null | string | number> =
+export type CSSType<T extends InnerValue> =
   | Angle<T>
   | Color<T>
   | Url<T>