@tamagui/helpers 3.0.0-beta.924.1 → 3.0.0

package/src/validStyleProps.ts

@@ -1,4 +1,5 @@
 import { isAndroid } from '@tamagui/constants'
+import { cssStyleProps, cssStylePropsUnitless } from './cssStyleProps'
 import {
   nonAnimatableWebTextProps,
   nonAnimatableWebViewProps,
@@ -12,56 +13,67 @@ export const cssShorthandLonghands = toObj(
   'borderWidth borderStyle borderColor borderTopWidth borderTopStyle borderTopColor borderRightWidth borderRightStyle borderRightColor borderBottomWidth borderBottomStyle borderBottomColor borderLeftWidth borderLeftStyle borderLeftColor outlineWidth outlineStyle outlineColor outlineOffset'
 )
 
-const textColors = toObj('color textDecorationColor textShadowColor')
+const cssTextColors = toObj('color textDecorationColor')
+const textColors = toObj(cssTextColors, 'textShadowColor')
 
 const inputColors = toObj(
   'placeholderTextColor selectionColor cursorColor selectionHandleColor'
 )
 
 const nonAnimatableViewProps = toObj(
-  'alignContent alignItems alignSelf backfaceVisibility borderCurve borderStyle borderBlockStyle borderBlockEndStyle borderBlockStartStyle borderInlineStyle borderInlineEndStyle borderInlineStartStyle boxSizing cursor direction display flexDirection flexWrap isolation justifyContent mixBlendMode outlineStyle overflow pointerEvents position visibility'
+  'alignContent alignItems alignSelf backfaceVisibility borderCurve borderStyle boxSizing cursor direction display flexDirection flexWrap isolation justifyContent mixBlendMode outlineStyle overflow pointerEvents position visibility'
 )
 
 const nonAnimatableFontProps = toObj('fontFamily fontStyle fontVariant textTransform')
 
-const nonAnimatableTextOnlyProps = toObj(
-  'textAlign textDecorationLine textDecorationStyle userSelect writingDirection'
+const cssTextAlignmentProps = toObj(
+  'textAlign textDecorationLine textDecorationStyle userSelect'
 )
 
-const nonAnimatableUnitlessProps = toObj(
-  'WebkitLineClamp lineClamp gridTemplateColumns gridTemplateAreas'
+const nonAnimatableTextOnlyProps = toObj(cssTextAlignmentProps, 'writingDirection')
+
+const nonAnimatableUnitlessProps = toObj('WebkitLineClamp lineClamp')
+
+const webOnlyUnitlessProps = toObj(
+  'animationIterationCount borderImageOutset borderImageSlice borderImageWidth columnCount flexOrder flexPositive flexNegative order orphans tabSize widows zoom scaleZ'
 )
 
+/**
+ * CSS Grid layout props. Web-only by default — Yoga (React Native's layout
+ * engine) has no stable CSS Grid support (see facebook/yoga#1865).
+ *
+ * To enable on native with an experimental Yoga build, set the
+ * `TAMAGUI_CSS_GRID` environment variable to `"1"`.
+ */
+const cssGridProps = toObj(
+  'gridTemplateColumns gridTemplateAreas gridRow gridRowEnd gridRowGap gridRowStart gridColumn gridColumnEnd gridColumnGap gridColumnStart'
+)
+
+const enableCSSGrid =
+  process.env.TAMAGUI_TARGET === 'web' || process.env.TAMAGUI_CSS_GRID === '1'
+
 export const nonAnimatableStyleProps = toObj(
   nonAnimatableViewProps,
   nonAnimatableFontProps,
   nonAnimatableTextOnlyProps,
-  nonAnimatableUnitlessProps,
+  process.env.TAMAGUI_TARGET === 'web' ? nonAnimatableUnitlessProps : undefined,
+  enableCSSGrid ? cssGridProps : undefined,
   process.env.TAMAGUI_TARGET === 'web' ? nonAnimatableWebViewProps : undefined,
   process.env.TAMAGUI_TARGET === 'web' ? nonAnimatableWebTextProps : undefined
 )
 
 export const stylePropsUnitless = toObj(
-  nonAnimatableUnitlessProps,
-  'animationIterationCount aspectRatio borderImageOutset borderImageSlice borderImageWidth columnCount flex flexGrow flexOrder flexPositive flexShrink flexNegative fontWeight gridRow gridRowEnd gridRowGap gridRowStart gridColumn gridColumnEnd gridColumnGap gridColumnStart opacity order orphans tabSize widows zIndex zoom scale scaleX scaleY scaleZ shadowOpacity'
+  process.env.TAMAGUI_TARGET === 'web' ? cssStylePropsUnitless : undefined,
+  process.env.TAMAGUI_TARGET === 'web' ? nonAnimatableUnitlessProps : undefined,
+  process.env.TAMAGUI_TARGET === 'web' ? webOnlyUnitlessProps : undefined,
+  enableCSSGrid ? cssGridProps : undefined,
+  'aspectRatio flex flexGrow flexShrink fontWeight opacity zIndex scale scaleX scaleY shadowOpacity'
 )
 
 export const stylePropsTransform = toObj(
   'x y scale perspective scaleX scaleY skewX skewY matrix rotate rotateY rotateX rotateZ'
 )
 
-export const stylePropsView = toObj(
-  nonAnimatableViewProps,
-  'borderBottomWidth borderLeftWidth borderRightWidth borderBlockWidth borderBlockEndWidth borderBlockStartWidth borderInlineWidth borderInlineEndWidth borderInlineStartWidth borderTopWidth borderWidth transform transformOrigin borderEndWidth borderStartWidth bottom end flexBasis gap columnGap rowGap left margin marginBlock marginBlockEnd marginBlockStart marginInline marginInlineStart marginInlineEnd marginBottom marginEnd marginHorizontal marginLeft marginRight marginStart marginTop marginVertical padding paddingBottom paddingInline paddingBlock paddingBlockEnd paddingBlockStart paddingInlineEnd paddingInlineStart paddingEnd paddingHorizontal paddingLeft paddingRight paddingStart paddingTop paddingVertical right start top inset insetBlock insetBlockEnd insetBlockStart insetInline insetInlineEnd insetInlineStart shadowOffset backgroundColor borderColor borderBlockStartColor borderBlockEndColor borderBlockColor borderBottomColor borderInlineColor borderInlineStartColor borderInlineEndColor borderTopColor borderLeftColor borderRightColor borderEndColor borderStartColor shadowColor outlineColor',
-  process.env.TAMAGUI_TARGET === 'web' ? 'caretColor' : undefined,
-  'borderRadius borderTopLeftRadius borderTopRightRadius borderBottomLeftRadius borderBottomRightRadius borderTopStartRadius borderTopEndRadius borderBottomStartRadius borderBottomEndRadius borderStartStartRadius borderStartEndRadius borderEndStartRadius borderEndEndRadius width height minWidth minHeight maxWidth maxHeight blockSize minBlockSize maxBlockSize inlineSize minInlineSize maxInlineSize shadowRadius',
-  stylePropsTransform,
-  stylePropsUnitless,
-  isAndroid ? { elevationAndroid: true } : undefined,
-  'boxShadow border borderBlock borderInline filter background backgroundImage experimental_backgroundImage outline outlineOffset outlineWidth',
-  process.env.TAMAGUI_TARGET === 'web' ? webOnlyStylePropsView : undefined
-)
-
 const stylePropsFont = toObj(
   nonAnimatableFontProps,
   'fontSize fontWeight letterSpacing lineHeight'
@@ -71,14 +83,49 @@ export const stylePropsTextOnly = toObj(
   stylePropsFont,
   nonAnimatableTextOnlyProps,
   textColors,
-  'textShadow textShadowOffset textShadowRadius textDecoration font verticalAlign',
+  'textShadow textShadowOffset textShadowRadius textDecoration verticalAlign',
+  process.env.TAMAGUI_TARGET === 'web' ? 'font' : undefined,
   process.env.TAMAGUI_TARGET === 'web' ? webOnlyStylePropsText : undefined
 )
 
+export const stylePropsView = toObj(
+  nonAnimatableViewProps,
+  'borderBottomWidth borderLeftWidth borderRightWidth borderBlockWidth borderBlockEndWidth borderBlockStartWidth borderInlineWidth borderInlineEndWidth borderInlineStartWidth borderTopWidth borderWidth transform transformOrigin borderEndWidth borderStartWidth bottom end flexBasis gap columnGap rowGap left margin marginBlock marginBlockEnd marginBlockStart marginInline marginInlineStart marginInlineEnd marginBottom marginEnd marginHorizontal marginLeft marginRight marginStart marginTop marginVertical padding paddingBottom paddingInline paddingBlock paddingBlockEnd paddingBlockStart paddingInlineEnd paddingInlineStart paddingEnd paddingHorizontal paddingLeft paddingRight paddingStart paddingTop paddingVertical right start top inset insetBlock insetBlockEnd insetBlockStart insetInline insetInlineEnd insetInlineStart shadowOffset backgroundColor borderColor borderBlockStartColor borderBlockEndColor borderBlockColor borderBottomColor borderInlineColor borderInlineStartColor borderInlineEndColor borderTopColor borderLeftColor borderRightColor borderEndColor borderStartColor shadowColor outlineColor',
+  process.env.TAMAGUI_TARGET === 'web' ? 'caretColor' : undefined,
+  'borderRadius borderTopLeftRadius borderTopRightRadius borderBottomLeftRadius borderBottomRightRadius borderTopStartRadius borderTopEndRadius borderBottomStartRadius borderBottomEndRadius borderStartStartRadius borderStartEndRadius borderEndStartRadius borderEndEndRadius width height minWidth minHeight maxWidth maxHeight blockSize minBlockSize maxBlockSize inlineSize minInlineSize maxInlineSize shadowRadius',
+  stylePropsTransform,
+  stylePropsUnitless,
+  isAndroid ? { elevationAndroid: true } : undefined,
+  'boxShadow border borderBlock borderInline filter background backgroundImage experimental_backgroundImage outline outlineOffset outlineWidth',
+  // svg paint: react-native-svg reads these from style, as css does
+  'fill stroke strokeWidth',
+  process.env.TAMAGUI_TARGET === 'web' ? webOnlyStylePropsView : undefined,
+  process.env.TAMAGUI_TARGET === 'web' ? cssStyleProps : undefined,
+  process.env.TAMAGUI_TARGET === 'web'
+    ? toObj(
+        stylePropsFont,
+        cssTextColors,
+        cssTextAlignmentProps,
+        nonAnimatableWebTextProps,
+        'textShadow textDecoration verticalAlign font'
+      )
+    : undefined
+)
+
 export const stylePropsText = toObj(stylePropsView, stylePropsTextOnly)
 
 export const stylePropsInput = toObj(stylePropsText, inputColors)
 
-export const stylePropsAll = stylePropsInput
+// native recognizes css names so unsupported styles cannot become host props.
+export const stylePropsAll = toObj(
+  stylePropsInput,
+  cssStyleProps,
+  cssGridProps,
+  webOnlyStylePropsView,
+  nonAnimatableWebTextProps,
+  'font',
+  nonAnimatableUnitlessProps,
+  webOnlyUnitlessProps
+)
 
 export const validStyles = stylePropsView

package/src/webOnlyStyleProps.ts

@@ -2,20 +2,20 @@
 
 import { toStylePropsObject as toObj } from './toStylePropsObject'
 
-export const nonAnimatableWebViewProps = toObj(
-  'backgroundAttachment backgroundBlendMode backgroundClip backgroundOrigin backgroundRepeat borderBottomStyle borderLeftStyle borderRightStyle borderTopStyle contain containerType containerName content float maskBorderMode maskBorderRepeat maskClip maskComposite maskMode maskOrigin maskRepeat maskType objectFit overflowBlock overflowInline overflowX overflowY scrollbarWidth textWrap touchAction transformStyle willChange'
+export const nonAnimatableWebViewProps = /* @__PURE__ */ toObj(
+  'backgroundAttachment backgroundBlendMode backgroundClip backgroundOrigin backgroundRepeat borderBlockStyle borderBlockEndStyle borderBlockStartStyle borderInlineStyle borderInlineEndStyle borderInlineStartStyle borderBottomStyle borderLeftStyle borderRightStyle borderTopStyle contain containerType containerName content float maskBorderMode maskBorderRepeat maskClip maskComposite maskMode maskOrigin maskRepeat maskType objectFit overflowBlock overflowInline overflowX overflowY scrollbarWidth textWrap touchAction transformStyle willChange'
 )
 
-export const nonAnimatableWebTextProps = toObj(
+export const nonAnimatableWebTextProps = /* @__PURE__ */ toObj(
   'whiteSpace wordWrap textOverflow WebkitBoxOrient'
 )
 
-export const webOnlyStylePropsView = toObj(
+export const webOnlyStylePropsView = /* @__PURE__ */ toObj(
   nonAnimatableWebViewProps,
   'transition transitionProperty transitionDuration transitionTimingFunction transitionDelay transitionBehavior backdropFilter WebkitBackdropFilter borderTop borderRight borderBottom borderLeft backgroundPosition backgroundSize borderImage caretColor clipPath mask maskBorder maskBorderOutset maskBorderSlice maskBorderSource maskBorderWidth maskImage maskPosition maskSize objectPosition textEmphasis userSelect overflowWrap wordWrap resize'
 )
 
-export const webOnlyStylePropsText = toObj(
+export const webOnlyStylePropsText = /* @__PURE__ */ toObj(
   nonAnimatableWebTextProps,
   'textDecorationDistance WebkitLineClamp'
 )

package/types/cssStyleProps.d.ts

@@ -0,0 +1,371 @@
+export declare const cssStyleProps: {
+    readonly accentColor: true;
+    readonly alignmentBaseline: true;
+    readonly alignTracks: true;
+    readonly all: true;
+    readonly anchorName: true;
+    readonly anchorScope: true;
+    readonly animation: true;
+    readonly animationComposition: true;
+    readonly animationDelay: true;
+    readonly animationDirection: true;
+    readonly animationDuration: true;
+    readonly animationFillMode: true;
+    readonly animationName: true;
+    readonly animationPlayState: true;
+    readonly animationRange: true;
+    readonly animationRangeEnd: true;
+    readonly animationRangeStart: true;
+    readonly animationTimeline: true;
+    readonly animationTimingFunction: true;
+    readonly appearance: true;
+    readonly backgroundPositionX: true;
+    readonly backgroundPositionY: true;
+    readonly baselineShift: true;
+    readonly borderBlockEnd: true;
+    readonly borderBlockStart: true;
+    readonly borderCollapse: true;
+    readonly borderImageRepeat: true;
+    readonly borderImageSource: true;
+    readonly borderInlineEnd: true;
+    readonly borderInlineStart: true;
+    readonly borderSpacing: true;
+    readonly boxAlign: true;
+    readonly boxDecorationBreak: true;
+    readonly boxDirection: true;
+    readonly boxFlex: true;
+    readonly boxFlexGroup: true;
+    readonly boxLines: true;
+    readonly boxOrdinalGroup: true;
+    readonly boxOrient: true;
+    readonly boxPack: true;
+    readonly breakAfter: true;
+    readonly breakBefore: true;
+    readonly breakInside: true;
+    readonly captionSide: true;
+    readonly caret: true;
+    readonly caretShape: true;
+    readonly clear: true;
+    readonly clip: true;
+    readonly clipRule: true;
+    readonly colorAdjust: true;
+    readonly colorInterpolation: true;
+    readonly colorInterpolationFilters: true;
+    readonly colorRendering: true;
+    readonly colorScheme: true;
+    readonly columnFill: true;
+    readonly columnRule: true;
+    readonly columnRuleColor: true;
+    readonly columnRuleStyle: true;
+    readonly columnRuleWidth: true;
+    readonly columns: true;
+    readonly columnSpan: true;
+    readonly columnWidth: true;
+    readonly container: true;
+    readonly containIntrinsicBlockSize: true;
+    readonly containIntrinsicHeight: true;
+    readonly containIntrinsicInlineSize: true;
+    readonly containIntrinsicSize: true;
+    readonly containIntrinsicWidth: true;
+    readonly contentVisibility: true;
+    readonly counterIncrement: true;
+    readonly counterReset: true;
+    readonly counterSet: true;
+    readonly cx: true;
+    readonly cy: true;
+    readonly d: true;
+    readonly dominantBaseline: true;
+    readonly emptyCells: true;
+    readonly fieldSizing: true;
+    readonly fill: true;
+    readonly fillOpacity: true;
+    readonly fillRule: true;
+    readonly flexFlow: true;
+    readonly floodColor: true;
+    readonly floodOpacity: true;
+    readonly fontFeatureSettings: true;
+    readonly fontKerning: true;
+    readonly fontLanguageOverride: true;
+    readonly fontOpticalSizing: true;
+    readonly fontPalette: true;
+    readonly fontSizeAdjust: true;
+    readonly fontSmooth: true;
+    readonly fontStretch: true;
+    readonly fontSynthesis: true;
+    readonly fontSynthesisPosition: true;
+    readonly fontSynthesisSmallCaps: true;
+    readonly fontSynthesisStyle: true;
+    readonly fontSynthesisWeight: true;
+    readonly fontVariantAlternates: true;
+    readonly fontVariantCaps: true;
+    readonly fontVariantEastAsian: true;
+    readonly fontVariantEmoji: true;
+    readonly fontVariantLigatures: true;
+    readonly fontVariantNumeric: true;
+    readonly fontVariantPosition: true;
+    readonly fontVariationSettings: true;
+    readonly fontWidth: true;
+    readonly forcedColorAdjust: true;
+    readonly glyphOrientationVertical: true;
+    readonly grid: true;
+    readonly gridArea: true;
+    readonly gridAutoColumns: true;
+    readonly gridAutoFlow: true;
+    readonly gridAutoRows: true;
+    readonly gridGap: true;
+    readonly gridTemplate: true;
+    readonly gridTemplateRows: true;
+    readonly hangingPunctuation: true;
+    readonly hyphenateCharacter: true;
+    readonly hyphenateLimitChars: true;
+    readonly hyphens: true;
+    readonly imageOrientation: true;
+    readonly imageRendering: true;
+    readonly imageResolution: true;
+    readonly imeMode: true;
+    readonly initialLetter: true;
+    readonly initialLetterAlign: true;
+    readonly insetArea: true;
+    readonly interpolateSize: true;
+    readonly justifyItems: true;
+    readonly justifySelf: true;
+    readonly justifyTracks: true;
+    readonly KhtmlBoxAlign: true;
+    readonly KhtmlBoxDirection: true;
+    readonly KhtmlBoxFlex: true;
+    readonly KhtmlBoxFlexGroup: true;
+    readonly KhtmlBoxLines: true;
+    readonly KhtmlBoxOrdinalGroup: true;
+    readonly KhtmlBoxOrient: true;
+    readonly KhtmlBoxPack: true;
+    readonly KhtmlLineBreak: true;
+    readonly KhtmlOpacity: true;
+    readonly KhtmlUserSelect: true;
+    readonly lightingColor: true;
+    readonly lineBreak: true;
+    readonly lineHeightStep: true;
+    readonly listStyle: true;
+    readonly listStyleImage: true;
+    readonly listStylePosition: true;
+    readonly listStyleType: true;
+    readonly marginTrim: true;
+    readonly marker: true;
+    readonly markerEnd: true;
+    readonly markerMid: true;
+    readonly markerStart: true;
+    readonly masonryAutoFlow: true;
+    readonly mathDepth: true;
+    readonly mathShift: true;
+    readonly mathStyle: true;
+    readonly maxLines: true;
+    readonly motion: true;
+    readonly motionDistance: true;
+    readonly motionPath: true;
+    readonly motionRotation: true;
+    readonly OAnimation: true;
+    readonly OAnimationDelay: true;
+    readonly OAnimationDirection: true;
+    readonly OAnimationDuration: true;
+    readonly OAnimationFillMode: true;
+    readonly OAnimationIterationCount: true;
+    readonly OAnimationName: true;
+    readonly OAnimationPlayState: true;
+    readonly OAnimationTimingFunction: true;
+    readonly OBackgroundSize: true;
+    readonly objectViewBox: true;
+    readonly OBorderImage: true;
+    readonly offset: true;
+    readonly offsetAnchor: true;
+    readonly offsetBlock: true;
+    readonly offsetBlockEnd: true;
+    readonly offsetBlockStart: true;
+    readonly offsetDistance: true;
+    readonly offsetInline: true;
+    readonly offsetInlineEnd: true;
+    readonly offsetInlineStart: true;
+    readonly offsetPath: true;
+    readonly offsetPosition: true;
+    readonly offsetRotate: true;
+    readonly offsetRotation: true;
+    readonly OObjectFit: true;
+    readonly OObjectPosition: true;
+    readonly OTabSize: true;
+    readonly OTextOverflow: true;
+    readonly OTransform: true;
+    readonly OTransformOrigin: true;
+    readonly OTransition: true;
+    readonly OTransitionDelay: true;
+    readonly OTransitionDuration: true;
+    readonly OTransitionProperty: true;
+    readonly OTransitionTimingFunction: true;
+    readonly overflowAnchor: true;
+    readonly overflowClipBox: true;
+    readonly overflowClipMargin: true;
+    readonly overlay: true;
+    readonly overscrollBehavior: true;
+    readonly overscrollBehaviorBlock: true;
+    readonly overscrollBehaviorInline: true;
+    readonly overscrollBehaviorX: true;
+    readonly overscrollBehaviorY: true;
+    readonly page: true;
+    readonly pageBreakAfter: true;
+    readonly pageBreakBefore: true;
+    readonly pageBreakInside: true;
+    readonly paintOrder: true;
+    readonly perspectiveOrigin: true;
+    readonly placeContent: true;
+    readonly placeItems: true;
+    readonly placeSelf: true;
+    readonly positionAnchor: true;
+    readonly positionArea: true;
+    readonly positionTry: true;
+    readonly positionTryFallbacks: true;
+    readonly positionTryOptions: true;
+    readonly positionTryOrder: true;
+    readonly positionVisibility: true;
+    readonly printColorAdjust: true;
+    readonly quotes: true;
+    readonly r: true;
+    readonly rubyAlign: true;
+    readonly rubyMerge: true;
+    readonly rubyOverhang: true;
+    readonly rubyPosition: true;
+    readonly rx: true;
+    readonly ry: true;
+    readonly scrollbarColor: true;
+    readonly scrollbarGutter: true;
+    readonly scrollBehavior: true;
+    readonly scrollInitialTarget: true;
+    readonly scrollMargin: true;
+    readonly scrollMarginBlock: true;
+    readonly scrollMarginBlockEnd: true;
+    readonly scrollMarginBlockStart: true;
+    readonly scrollMarginBottom: true;
+    readonly scrollMarginInline: true;
+    readonly scrollMarginInlineEnd: true;
+    readonly scrollMarginInlineStart: true;
+    readonly scrollMarginLeft: true;
+    readonly scrollMarginRight: true;
+    readonly scrollMarginTop: true;
+    readonly scrollPadding: true;
+    readonly scrollPaddingBlock: true;
+    readonly scrollPaddingBlockEnd: true;
+    readonly scrollPaddingBlockStart: true;
+    readonly scrollPaddingBottom: true;
+    readonly scrollPaddingInline: true;
+    readonly scrollPaddingInlineEnd: true;
+    readonly scrollPaddingInlineStart: true;
+    readonly scrollPaddingLeft: true;
+    readonly scrollPaddingRight: true;
+    readonly scrollPaddingTop: true;
+    readonly scrollSnapAlign: true;
+    readonly scrollSnapCoordinate: true;
+    readonly scrollSnapDestination: true;
+    readonly scrollSnapMargin: true;
+    readonly scrollSnapMarginBottom: true;
+    readonly scrollSnapMarginLeft: true;
+    readonly scrollSnapMarginRight: true;
+    readonly scrollSnapMarginTop: true;
+    readonly scrollSnapPointsX: true;
+    readonly scrollSnapPointsY: true;
+    readonly scrollSnapStop: true;
+    readonly scrollSnapType: true;
+    readonly scrollSnapTypeX: true;
+    readonly scrollSnapTypeY: true;
+    readonly scrollTimeline: true;
+    readonly scrollTimelineAxis: true;
+    readonly scrollTimelineName: true;
+    readonly shapeImageThreshold: true;
+    readonly shapeMargin: true;
+    readonly shapeOutside: true;
+    readonly shapeRendering: true;
+    readonly speakAs: true;
+    readonly stopColor: true;
+    readonly stopOpacity: true;
+    readonly stroke: true;
+    readonly strokeColor: true;
+    readonly strokeDasharray: true;
+    readonly strokeDashoffset: true;
+    readonly strokeLinecap: true;
+    readonly strokeLinejoin: true;
+    readonly strokeMiterlimit: true;
+    readonly strokeOpacity: true;
+    readonly strokeWidth: true;
+    readonly tableLayout: true;
+    readonly textAlignLast: true;
+    readonly textAnchor: true;
+    readonly textAutospace: true;
+    readonly textBox: true;
+    readonly textBoxEdge: true;
+    readonly textBoxTrim: true;
+    readonly textCombineUpright: true;
+    readonly textDecorationSkip: true;
+    readonly textDecorationSkipInk: true;
+    readonly textDecorationThickness: true;
+    readonly textEmphasisColor: true;
+    readonly textEmphasisPosition: true;
+    readonly textEmphasisStyle: true;
+    readonly textIndent: true;
+    readonly textJustify: true;
+    readonly textOrientation: true;
+    readonly textRendering: true;
+    readonly textSizeAdjust: true;
+    readonly textSpacingTrim: true;
+    readonly textUnderlineOffset: true;
+    readonly textUnderlinePosition: true;
+    readonly textWrapMode: true;
+    readonly textWrapStyle: true;
+    readonly timelineScope: true;
+    readonly transformBox: true;
+    readonly translate: true;
+    readonly unicodeBidi: true;
+    readonly vectorEffect: true;
+    readonly viewTimeline: true;
+    readonly viewTimelineAxis: true;
+    readonly viewTimelineInset: true;
+    readonly viewTimelineName: true;
+    readonly viewTransitionClass: true;
+    readonly viewTransitionName: true;
+    readonly whiteSpaceCollapse: true;
+    readonly wordBreak: true;
+    readonly wordSpacing: true;
+    readonly writingMode: true;
+};
+export declare const cssStylePropsUnitless: {
+    readonly animation: true;
+    readonly borderImage: true;
+    readonly boxFlex: true;
+    readonly boxFlexGroup: true;
+    readonly boxOrdinalGroup: true;
+    readonly columns: true;
+    readonly fillOpacity: true;
+    readonly floodOpacity: true;
+    readonly fontSizeAdjust: true;
+    readonly glyphOrientationVertical: true;
+    readonly gridArea: true;
+    readonly hyphenateLimitChars: true;
+    readonly initialLetter: true;
+    readonly KhtmlBoxFlex: true;
+    readonly KhtmlBoxFlexGroup: true;
+    readonly KhtmlBoxOrdinalGroup: true;
+    readonly KhtmlOpacity: true;
+    readonly lineHeight: true;
+    readonly maskBorder: true;
+    readonly maskBorderOutset: true;
+    readonly maskBorderSlice: true;
+    readonly maskBorderWidth: true;
+    readonly mathDepth: true;
+    readonly maxLines: true;
+    readonly OAnimation: true;
+    readonly OAnimationIterationCount: true;
+    readonly OBorderImage: true;
+    readonly OTabSize: true;
+    readonly shapeImageThreshold: true;
+    readonly stopOpacity: true;
+    readonly strokeDasharray: true;
+    readonly strokeDashoffset: true;
+    readonly strokeMiterlimit: true;
+    readonly strokeOpacity: true;
+    readonly strokeWidth: true;
+};
+//# sourceMappingURL=cssStyleProps.d.ts.map

package/types/cssStyleProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssStyleProps.d.ts","sourceRoot":"","sources":["../src/cssStyleProps.ts"],"names":[],"mappings":"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"}

package/types/themeClassNames.d.ts

@@ -1,11 +1,3 @@
-/**
- * The theme classes a `<Theme>` span carries for a resolved theme name.
- *
- * Every level of a compound name gets its own class so CSS variables inherit
- * through the whole chain ("red_surface1" is `t_red t_red_surface1`). The zero
- * compiler emits these directly, so this has to be the only implementation:
- * a compiled span that spells its classes differently would resolve different
- * variables than the runtime does for the same authored tree.
- */
-export declare function getThemeClassNames(name: string, isRoot?: boolean): string;
+export declare function getThemeScheme(name: string): 'light' | 'dark' | undefined;
+export declare function getThemeClassNames(name: string, isRoot?: boolean, schemeAuthored?: boolean): string;
 //# sourceMappingURL=themeClassNames.d.ts.map

package/types/themeClassNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeClassNames.d.ts","sourceRoot":"","sources":["../src/themeClassNames.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,UAAQ,GAAG,MAAM,CAgBvE"}
+{"version":3,"file":"themeClassNames.d.ts","sourceRoot":"","sources":["../src/themeClassNames.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAEzE;AAID,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,OAAO,EAChB,cAAc,CAAC,EAAE,OAAO,GACvB,MAAM,CAaR"}