diff --git a/.changepacks/changepack_log_csstype_direct_types.json b/.changepacks/changepack_log_csstype_direct_types.json new file mode 100644 index 00000000..35f8d3a6 --- /dev/null +++ b/.changepacks/changepack_log_csstype_direct_types.json @@ -0,0 +1,7 @@ +{ + "changes": { + "packages/react/package.json": "Patch" + }, + "note": "Use csstype-extra properties directly to restore missing timeline trigger props and remove stale CSS type generation checks", + "date": "2026-09-14T00:00:00.000Z" +} diff --git a/bun.lock b/bun.lock index 307aa756..7319a2db 100644 --- a/bun.lock +++ b/bun.lock @@ -2083,7 +2083,7 @@ "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="], - "csstype-extra": ["csstype-extra@0.1.35", "", { "peerDependencies": { "typescript": "^5" } }, "sha512-pEJ+ZP1nE0TT5E5XXRuNBiU44O2CCwgm1zd0ogXOX/We8GxX++T7KhThrQaSO2V2Yvdmh2OsqBWLH0+OQTUXKA=="], + "csstype-extra": ["csstype-extra@0.1.36", "", { "peerDependencies": { "typescript": "^5" } }, "sha512-hQUmhSCQYZ7mgOvVdGOSd3e03uP5L5mRS5QGBIJIXM+x8PsrMWMHWbds6T8YM04L4NobLKwe84b6Jw9DRYrQPQ=="], "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" }, "peerDependencies": { "supports-color": "*" }, "optionalPeers": ["supports-color"] }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="], diff --git a/packages/react/package.json b/packages/react/package.json index bcbf7d19..f8b29524 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -19,10 +19,9 @@ "version": "1.0.41", "type": "module", "scripts": { - "generate:css-types": "bun scripts/generate-css-properties.ts", "lint": "eslint && bun ../../node_modules/@typescript/native/bin/tsc --noEmit && bun run test:types", "build": "bun run test:types && bun ../../node_modules/@typescript/native/bin/tsc && vite build", - "test:types": "bun scripts/generate-css-properties.ts --check && bun ../../node_modules/@typescript/native/bin/tsc --ignoreConfig --noEmit --strict --jsx react-jsx --moduleResolution bundler --module esnext --target esnext --types bun --skipLibCheck type-tests/custom-shorthand.ts" + "test:types": "bun ../../node_modules/@typescript/native/bin/tsc --ignoreConfig --noEmit --strict --jsx react-jsx --moduleResolution bundler --module esnext --target esnext --types bun --skipLibCheck type-tests/custom-shorthand.ts" }, "publishConfig": { "access": "public" diff --git a/packages/react/scripts/generate-css-properties.ts b/packages/react/scripts/generate-css-properties.ts deleted file mode 100644 index f8349de6..00000000 --- a/packages/react/scripts/generate-css-properties.ts +++ /dev/null @@ -1,64 +0,0 @@ -const packageDir = new URL('../', import.meta.url) -const sourceUrl = new URL( - 'node_modules/csstype-extra/src/index.d.ts', - packageDir, -) -const outputUrl = new URL( - 'src/types/props/generated-css-properties.ts', - packageDir, -) - -const source = await Bun.file(sourceUrl).text() -const propertiesEnd = source.indexOf('export type AtRules') -if (propertiesEnd === -1) { - throw new Error('Unable to find the end of csstype-extra properties') -} - -const declarations = new Map() -for (const match of source - .slice(0, propertiesEnd) - .matchAll( - /^ {2}([A-Za-z][A-Za-z0-9]*)\?: (Property\.[A-Za-z0-9]+ \| undefined)$/gm, - )) { - const [, name, value] = match - const previous = declarations.get(name) - if (previous && previous !== value) { - throw new Error(`Conflicting declarations for ${name}`) - } - declarations.set(name, value) -} - -if (declarations.size < 600) { - throw new Error( - `Expected at least 600 CSS properties, found ${declarations.size}`, - ) -} - -const lines = [ - '// Generated by scripts/generate-css-properties.ts. Do not edit directly.', - "import type { Property } from 'csstype-extra'", - '', - "import type { ResponsiveValue } from '../responsive-value'", - '', - 'export interface DevupCssProperties {', - ...[...declarations].map(([name, value]) => { - const declaration = ` ${name}?: ResponsiveValue<${value}>` - return declaration.length > 80 - ? ` ${name}?: ResponsiveValue<\n ${value}\n >` - : declaration - }), - '}', - '', -] - -const output = lines.join('\n') -if (Bun.argv.includes('--check')) { - const current = await Bun.file(outputUrl).text() - if (current !== output) { - throw new Error( - 'Generated CSS properties are stale. Run bun run generate:css-types.', - ) - } -} else { - await Bun.write(outputUrl, output) -} diff --git a/packages/react/src/types/props/css-properties.ts b/packages/react/src/types/props/css-properties.ts new file mode 100644 index 00000000..3796749b --- /dev/null +++ b/packages/react/src/types/props/css-properties.ts @@ -0,0 +1,9 @@ +import type { Properties } from 'csstype-extra' + +import type { ResponsiveValue } from '../responsive-value' + +type Responsive = { [K in keyof T]?: ResponsiveValue } + +// Keep an interface boundary so consumers can reuse cached type relationships. +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +export interface DevupCssProperties extends Responsive {} diff --git a/packages/react/src/types/props/generated-css-properties.ts b/packages/react/src/types/props/generated-css-properties.ts deleted file mode 100644 index e6c0dcf2..00000000 --- a/packages/react/src/types/props/generated-css-properties.ts +++ /dev/null @@ -1,966 +0,0 @@ -// Generated by scripts/generate-css-properties.ts. Do not edit directly. -import type { Property } from 'csstype-extra' - -import type { ResponsiveValue } from '../responsive-value' - -export interface DevupCssProperties { - accentColor?: ResponsiveValue - alignContent?: ResponsiveValue - alignItems?: ResponsiveValue - alignSelf?: ResponsiveValue - alignTracks?: ResponsiveValue - alignmentBaseline?: ResponsiveValue - all?: ResponsiveValue - anchorName?: ResponsiveValue - anchorScope?: ResponsiveValue - animationComposition?: ResponsiveValue< - Property.AnimationComposition | undefined - > - animationDelay?: ResponsiveValue - animationDirection?: ResponsiveValue - animationDuration?: ResponsiveValue - animationFillMode?: ResponsiveValue - animationIterationCount?: ResponsiveValue< - Property.AnimationIterationCount | undefined - > - animationName?: ResponsiveValue - animationPlayState?: ResponsiveValue - animationRangeEnd?: ResponsiveValue - animationRangeStart?: ResponsiveValue< - Property.AnimationRangeStart | undefined - > - animationTimeline?: ResponsiveValue - animationTimingFunction?: ResponsiveValue< - Property.AnimationTimingFunction | undefined - > - animationTrigger?: ResponsiveValue - appearance?: ResponsiveValue - aspectRatio?: ResponsiveValue - backdropFilter?: ResponsiveValue - backfaceVisibility?: ResponsiveValue - backgroundAttachment?: ResponsiveValue< - Property.BackgroundAttachment | undefined - > - backgroundBlendMode?: ResponsiveValue< - Property.BackgroundBlendMode | undefined - > - backgroundClip?: ResponsiveValue - backgroundColor?: ResponsiveValue - backgroundImage?: ResponsiveValue - backgroundOrigin?: ResponsiveValue - backgroundPositionX?: ResponsiveValue< - Property.BackgroundPositionX | undefined - > - backgroundPositionY?: ResponsiveValue< - Property.BackgroundPositionY | undefined - > - backgroundRepeat?: ResponsiveValue - backgroundSize?: ResponsiveValue - baselineShift?: ResponsiveValue - baselineSource?: ResponsiveValue - blockSize?: ResponsiveValue - borderBlockEndColor?: ResponsiveValue< - Property.BorderBlockEndColor | undefined - > - borderBlockEndStyle?: ResponsiveValue< - Property.BorderBlockEndStyle | undefined - > - borderBlockEndWidth?: ResponsiveValue< - Property.BorderBlockEndWidth | undefined - > - borderBlockStartColor?: ResponsiveValue< - Property.BorderBlockStartColor | undefined - > - borderBlockStartStyle?: ResponsiveValue< - Property.BorderBlockStartStyle | undefined - > - borderBlockStartWidth?: ResponsiveValue< - Property.BorderBlockStartWidth | undefined - > - borderBottomColor?: ResponsiveValue - borderBottomLeftRadius?: ResponsiveValue< - Property.BorderBottomLeftRadius | undefined - > - borderBottomRightRadius?: ResponsiveValue< - Property.BorderBottomRightRadius | undefined - > - borderBottomStyle?: ResponsiveValue - borderBottomWidth?: ResponsiveValue - borderCollapse?: ResponsiveValue - borderEndEndRadius?: ResponsiveValue - borderEndStartRadius?: ResponsiveValue< - Property.BorderEndStartRadius | undefined - > - borderImageOutset?: ResponsiveValue - borderImageRepeat?: ResponsiveValue - borderImageSlice?: ResponsiveValue - borderImageSource?: ResponsiveValue - borderImageWidth?: ResponsiveValue - borderInlineEndColor?: ResponsiveValue< - Property.BorderInlineEndColor | undefined - > - borderInlineEndStyle?: ResponsiveValue< - Property.BorderInlineEndStyle | undefined - > - borderInlineEndWidth?: ResponsiveValue< - Property.BorderInlineEndWidth | undefined - > - borderInlineStartColor?: ResponsiveValue< - Property.BorderInlineStartColor | undefined - > - borderInlineStartStyle?: ResponsiveValue< - Property.BorderInlineStartStyle | undefined - > - borderInlineStartWidth?: ResponsiveValue< - Property.BorderInlineStartWidth | undefined - > - borderLeftColor?: ResponsiveValue - borderLeftStyle?: ResponsiveValue - borderLeftWidth?: ResponsiveValue - borderRightColor?: ResponsiveValue - borderRightStyle?: ResponsiveValue - borderRightWidth?: ResponsiveValue - borderShape?: ResponsiveValue - borderSpacing?: ResponsiveValue - borderStartEndRadius?: ResponsiveValue< - Property.BorderStartEndRadius | undefined - > - borderStartStartRadius?: ResponsiveValue< - Property.BorderStartStartRadius | undefined - > - borderTopColor?: ResponsiveValue - borderTopLeftRadius?: ResponsiveValue< - Property.BorderTopLeftRadius | undefined - > - borderTopRightRadius?: ResponsiveValue< - Property.BorderTopRightRadius | undefined - > - borderTopStyle?: ResponsiveValue - borderTopWidth?: ResponsiveValue - bottom?: ResponsiveValue - WebkitBoxAlign?: ResponsiveValue - MozBoxAlign?: ResponsiveValue - boxAlign?: ResponsiveValue - boxDecorationBreak?: ResponsiveValue - WebkitBoxDirection?: ResponsiveValue - MozBoxDirection?: ResponsiveValue - boxDirection?: ResponsiveValue - WebkitBoxFlex?: ResponsiveValue - MozBoxFlex?: ResponsiveValue - boxFlex?: ResponsiveValue - WebkitBoxFlexGroup?: ResponsiveValue - MozBoxFlexGroup?: ResponsiveValue - boxFlexGroup?: ResponsiveValue - WebkitBoxLines?: ResponsiveValue - MozBoxLines?: ResponsiveValue - boxLines?: ResponsiveValue - WebkitBoxOrdinalGroup?: ResponsiveValue< - Property.WebkitBoxOrdinalGroup | undefined - > - MozBoxOrdinalGroup?: ResponsiveValue - boxOrdinalGroup?: ResponsiveValue - WebkitBoxOrient?: ResponsiveValue - MozBoxOrient?: ResponsiveValue - boxOrient?: ResponsiveValue - WebkitBoxPack?: ResponsiveValue - MozBoxPack?: ResponsiveValue - boxPack?: ResponsiveValue - boxShadow?: ResponsiveValue - boxSizing?: ResponsiveValue - breakAfter?: ResponsiveValue - breakBefore?: ResponsiveValue - breakInside?: ResponsiveValue - captionSide?: ResponsiveValue - caretAnimation?: ResponsiveValue - caretColor?: ResponsiveValue - caretShape?: ResponsiveValue - clear?: ResponsiveValue - clip?: ResponsiveValue - clipPath?: ResponsiveValue - clipRule?: ResponsiveValue - color?: ResponsiveValue - colorInterpolationFilters?: ResponsiveValue< - Property.ColorInterpolationFilters | undefined - > - colorScheme?: ResponsiveValue - columnCount?: ResponsiveValue - columnFill?: ResponsiveValue - columnGap?: ResponsiveValue - columnHeight?: ResponsiveValue - columnRuleColor?: ResponsiveValue - columnRuleStyle?: ResponsiveValue - columnRuleWidth?: ResponsiveValue - columnSpan?: ResponsiveValue - columnWidth?: ResponsiveValue - columnWrap?: ResponsiveValue - contain?: ResponsiveValue - containIntrinsicBlockSize?: ResponsiveValue< - Property.ContainIntrinsicBlockSize | undefined - > - containIntrinsicHeight?: ResponsiveValue< - Property.ContainIntrinsicHeight | undefined - > - containIntrinsicInlineSize?: ResponsiveValue< - Property.ContainIntrinsicInlineSize | undefined - > - containIntrinsicWidth?: ResponsiveValue< - Property.ContainIntrinsicWidth | undefined - > - containerName?: ResponsiveValue - containerType?: ResponsiveValue - content?: ResponsiveValue - contentVisibility?: ResponsiveValue - cornerBottomLeftShape?: ResponsiveValue< - Property.CornerBottomLeftShape | undefined - > - cornerBottomRightShape?: ResponsiveValue< - Property.CornerBottomRightShape | undefined - > - cornerEndEndShape?: ResponsiveValue - cornerEndStartShape?: ResponsiveValue< - Property.CornerEndStartShape | undefined - > - cornerStartStartShape?: ResponsiveValue< - Property.CornerStartStartShape | undefined - > - cornerStartEndShape?: ResponsiveValue< - Property.CornerStartEndShape | undefined - > - cornerTopLeftShape?: ResponsiveValue - cornerTopRightShape?: ResponsiveValue< - Property.CornerTopRightShape | undefined - > - counterIncrement?: ResponsiveValue - counterReset?: ResponsiveValue - counterSet?: ResponsiveValue - cursor?: ResponsiveValue - cx?: ResponsiveValue - cy?: ResponsiveValue - d?: ResponsiveValue - direction?: ResponsiveValue - display?: ResponsiveValue - dominantBaseline?: ResponsiveValue - dynamicRangeLimit?: ResponsiveValue - emptyCells?: ResponsiveValue - fieldSizing?: ResponsiveValue - fill?: ResponsiveValue - fillOpacity?: ResponsiveValue - fillRule?: ResponsiveValue - filter?: ResponsiveValue - flexBasis?: ResponsiveValue - flexDirection?: ResponsiveValue - flexGrow?: ResponsiveValue - flexLineCount?: ResponsiveValue - flexShrink?: ResponsiveValue - flexWrap?: ResponsiveValue - float?: ResponsiveValue - floodColor?: ResponsiveValue - floodOpacity?: ResponsiveValue - fontFamily?: ResponsiveValue - fontFeatureSettings?: ResponsiveValue< - Property.FontFeatureSettings | undefined - > - fontKerning?: ResponsiveValue - fontLanguageOverride?: ResponsiveValue< - Property.FontLanguageOverride | undefined - > - fontOpticalSizing?: ResponsiveValue - fontPalette?: ResponsiveValue - fontSize?: ResponsiveValue - fontSizeAdjust?: ResponsiveValue - fontSmooth?: ResponsiveValue - fontStretch?: ResponsiveValue - fontStyle?: ResponsiveValue - fontSynthesis?: ResponsiveValue - fontSynthesisPosition?: ResponsiveValue< - Property.FontSynthesisPosition | undefined - > - fontSynthesisSmallCaps?: ResponsiveValue< - Property.FontSynthesisSmallCaps | undefined - > - fontSynthesisStyle?: ResponsiveValue - fontSynthesisWeight?: ResponsiveValue< - Property.FontSynthesisWeight | undefined - > - fontVariant?: ResponsiveValue - fontVariantAlternates?: ResponsiveValue< - Property.FontVariantAlternates | undefined - > - fontVariantCaps?: ResponsiveValue - fontVariantEastAsian?: ResponsiveValue< - Property.FontVariantEastAsian | undefined - > - fontVariantEmoji?: ResponsiveValue - fontVariantLigatures?: ResponsiveValue< - Property.FontVariantLigatures | undefined - > - fontVariantNumeric?: ResponsiveValue - fontVariantPosition?: ResponsiveValue< - Property.FontVariantPosition | undefined - > - fontVariationSettings?: ResponsiveValue< - Property.FontVariationSettings | undefined - > - fontWeight?: ResponsiveValue - fontWidth?: ResponsiveValue - forcedColorAdjust?: ResponsiveValue - frameSizing?: ResponsiveValue - gridAutoColumns?: ResponsiveValue - gridAutoFlow?: ResponsiveValue - gridAutoRows?: ResponsiveValue - gridColumnEnd?: ResponsiveValue - gridColumnGap?: ResponsiveValue - gridColumnStart?: ResponsiveValue - gridRowEnd?: ResponsiveValue - gridRowGap?: ResponsiveValue - gridRowStart?: ResponsiveValue - gridTemplateAreas?: ResponsiveValue - gridTemplateColumns?: ResponsiveValue< - Property.GridTemplateColumns | undefined - > - gridTemplateRows?: ResponsiveValue - hangingPunctuation?: ResponsiveValue - height?: ResponsiveValue - hyphenateCharacter?: ResponsiveValue - hyphenateLimitChars?: ResponsiveValue< - Property.HyphenateLimitChars | undefined - > - hyphens?: ResponsiveValue - imageOrientation?: ResponsiveValue - imageRendering?: ResponsiveValue - imageResolution?: ResponsiveValue - imeMode?: ResponsiveValue - initialLetter?: ResponsiveValue - initialLetterAlign?: ResponsiveValue - inlineSize?: ResponsiveValue - insetBlockEnd?: ResponsiveValue - insetBlockStart?: ResponsiveValue - insetInlineEnd?: ResponsiveValue - insetInlineStart?: ResponsiveValue - interpolateSize?: ResponsiveValue - isolation?: ResponsiveValue - interactivity?: ResponsiveValue - interestDelayEnd?: ResponsiveValue - interestDelayStart?: ResponsiveValue - justifyContent?: ResponsiveValue - justifyItems?: ResponsiveValue - justifySelf?: ResponsiveValue - justifyTracks?: ResponsiveValue - left?: ResponsiveValue - letterSpacing?: ResponsiveValue - lightingColor?: ResponsiveValue - lineBreak?: ResponsiveValue - lineClamp?: ResponsiveValue - lineHeight?: ResponsiveValue - lineHeightStep?: ResponsiveValue - linkParameters?: ResponsiveValue - listStyleImage?: ResponsiveValue - listStylePosition?: ResponsiveValue - listStyleType?: ResponsiveValue - marginBlockEnd?: ResponsiveValue - marginBlockStart?: ResponsiveValue - marginBottom?: ResponsiveValue - marginInlineEnd?: ResponsiveValue - marginInlineStart?: ResponsiveValue - marginLeft?: ResponsiveValue - marginRight?: ResponsiveValue - marginTop?: ResponsiveValue - marginTrim?: ResponsiveValue - marker?: ResponsiveValue - markerEnd?: ResponsiveValue - markerMid?: ResponsiveValue - markerStart?: ResponsiveValue - maskBorderMode?: ResponsiveValue - maskBorderOutset?: ResponsiveValue - maskBorderRepeat?: ResponsiveValue - maskBorderSlice?: ResponsiveValue - maskBorderSource?: ResponsiveValue - maskBorderWidth?: ResponsiveValue - maskClip?: ResponsiveValue - maskComposite?: ResponsiveValue - maskImage?: ResponsiveValue - maskMode?: ResponsiveValue - maskOrigin?: ResponsiveValue - maskPosition?: ResponsiveValue - maskRepeat?: ResponsiveValue - maskSize?: ResponsiveValue - maskType?: ResponsiveValue - masonryAutoFlow?: ResponsiveValue - mathDepth?: ResponsiveValue - mathShift?: ResponsiveValue - mathStyle?: ResponsiveValue - maxBlockSize?: ResponsiveValue - maxHeight?: ResponsiveValue - maxInlineSize?: ResponsiveValue - maxLines?: ResponsiveValue - maxWidth?: ResponsiveValue - minBlockSize?: ResponsiveValue - minHeight?: ResponsiveValue - minInlineSize?: ResponsiveValue - minWidth?: ResponsiveValue - mixBlendMode?: ResponsiveValue - objectFit?: ResponsiveValue - objectPosition?: ResponsiveValue - objectViewBox?: ResponsiveValue - offsetAnchor?: ResponsiveValue - offsetDistance?: ResponsiveValue - offsetPath?: ResponsiveValue - offsetPosition?: ResponsiveValue - offsetRotate?: ResponsiveValue - opacity?: ResponsiveValue - order?: ResponsiveValue - orphans?: ResponsiveValue - outlineColor?: ResponsiveValue - outlineOffset?: ResponsiveValue - outlineStyle?: ResponsiveValue - outlineWidth?: ResponsiveValue - overflowAnchor?: ResponsiveValue - overflowBlock?: ResponsiveValue - MozOverflowClipBox?: ResponsiveValue - overflowClipBox?: ResponsiveValue - overflowClipMargin?: ResponsiveValue - overflowInline?: ResponsiveValue - overflowWrap?: ResponsiveValue - overflowX?: ResponsiveValue - overflowY?: ResponsiveValue - overlay?: ResponsiveValue - overscrollBehaviorBlock?: ResponsiveValue< - Property.OverscrollBehaviorBlock | undefined - > - overscrollBehaviorInline?: ResponsiveValue< - Property.OverscrollBehaviorInline | undefined - > - overscrollBehaviorX?: ResponsiveValue< - Property.OverscrollBehaviorX | undefined - > - overscrollBehaviorY?: ResponsiveValue< - Property.OverscrollBehaviorY | undefined - > - paddingBlockEnd?: ResponsiveValue - paddingBlockStart?: ResponsiveValue - paddingBottom?: ResponsiveValue - paddingInlineEnd?: ResponsiveValue - paddingInlineStart?: ResponsiveValue - paddingLeft?: ResponsiveValue - paddingRight?: ResponsiveValue - paddingTop?: ResponsiveValue - page?: ResponsiveValue - pageBreakAfter?: ResponsiveValue - pageBreakBefore?: ResponsiveValue - pageBreakInside?: ResponsiveValue - paintOrder?: ResponsiveValue - pathLength?: ResponsiveValue - perspective?: ResponsiveValue - perspectiveOrigin?: ResponsiveValue - pointerEvents?: ResponsiveValue - position?: ResponsiveValue - positionAnchor?: ResponsiveValue - positionArea?: ResponsiveValue - positionTryFallbacks?: ResponsiveValue< - Property.PositionTryFallbacks | undefined - > - positionTryOrder?: ResponsiveValue - positionVisibility?: ResponsiveValue - printColorAdjust?: ResponsiveValue - quotes?: ResponsiveValue - r?: ResponsiveValue - readingFlow?: ResponsiveValue - readingOrder?: ResponsiveValue - resize?: ResponsiveValue - right?: ResponsiveValue - rotate?: ResponsiveValue - rowGap?: ResponsiveValue - rubyAlign?: ResponsiveValue - rubyMerge?: ResponsiveValue - rubyOverhang?: ResponsiveValue - rubyPosition?: ResponsiveValue - rx?: ResponsiveValue - ry?: ResponsiveValue - scale?: ResponsiveValue - scrollBehavior?: ResponsiveValue - scrollInitialTarget?: ResponsiveValue< - Property.ScrollInitialTarget | undefined - > - scrollMarginBlockEnd?: ResponsiveValue< - Property.ScrollMarginBlockEnd | undefined - > - scrollMarginBlockStart?: ResponsiveValue< - Property.ScrollMarginBlockStart | undefined - > - scrollMarginBottom?: ResponsiveValue - scrollMarginInlineEnd?: ResponsiveValue< - Property.ScrollMarginInlineEnd | undefined - > - scrollMarginInlineStart?: ResponsiveValue< - Property.ScrollMarginInlineStart | undefined - > - scrollMarginLeft?: ResponsiveValue - scrollMarginRight?: ResponsiveValue - scrollMarginTop?: ResponsiveValue - scrollMarkerGroup?: ResponsiveValue - scrollPaddingBlockEnd?: ResponsiveValue< - Property.ScrollPaddingBlockEnd | undefined - > - scrollPaddingBlockStart?: ResponsiveValue< - Property.ScrollPaddingBlockStart | undefined - > - scrollPaddingBottom?: ResponsiveValue< - Property.ScrollPaddingBottom | undefined - > - scrollPaddingInlineEnd?: ResponsiveValue< - Property.ScrollPaddingInlineEnd | undefined - > - scrollPaddingInlineStart?: ResponsiveValue< - Property.ScrollPaddingInlineStart | undefined - > - scrollPaddingLeft?: ResponsiveValue - scrollPaddingRight?: ResponsiveValue - scrollPaddingTop?: ResponsiveValue - scrollSnapAlign?: ResponsiveValue - scrollSnapCoordinate?: ResponsiveValue< - Property.ScrollSnapCoordinate | undefined - > - scrollSnapDestination?: ResponsiveValue< - Property.ScrollSnapDestination | undefined - > - scrollSnapPointsX?: ResponsiveValue - scrollSnapPointsY?: ResponsiveValue - scrollSnapStop?: ResponsiveValue - scrollSnapType?: ResponsiveValue - scrollSnapTypeX?: ResponsiveValue - scrollSnapTypeY?: ResponsiveValue - scrollTargetGroup?: ResponsiveValue - scrollTimelineAxis?: ResponsiveValue - scrollTimelineName?: ResponsiveValue - scrollbarColor?: ResponsiveValue - scrollbarGutter?: ResponsiveValue - scrollbarWidth?: ResponsiveValue - shapeImageThreshold?: ResponsiveValue< - Property.ShapeImageThreshold | undefined - > - shapeMargin?: ResponsiveValue - shapeOutside?: ResponsiveValue - shapeRendering?: ResponsiveValue - speakAs?: ResponsiveValue - stopColor?: ResponsiveValue - stopOpacity?: ResponsiveValue - stroke?: ResponsiveValue - strokeColor?: ResponsiveValue - strokeDasharray?: ResponsiveValue - strokeDashoffset?: ResponsiveValue - strokeLinecap?: ResponsiveValue - strokeLinejoin?: ResponsiveValue - strokeMiterlimit?: ResponsiveValue - strokeOpacity?: ResponsiveValue - strokeWidth?: ResponsiveValue - tabSize?: ResponsiveValue - tableLayout?: ResponsiveValue - textAlign?: ResponsiveValue - textAlignLast?: ResponsiveValue - textAnchor?: ResponsiveValue - textAutospace?: ResponsiveValue - textBox?: ResponsiveValue - textBoxEdge?: ResponsiveValue - textBoxTrim?: ResponsiveValue - textCombineUpright?: ResponsiveValue - textDecorationColor?: ResponsiveValue< - Property.TextDecorationColor | undefined - > - textDecorationInset?: ResponsiveValue< - Property.TextDecorationInset | undefined - > - textDecorationLine?: ResponsiveValue - textDecorationSkip?: ResponsiveValue - textDecorationSkipInk?: ResponsiveValue< - Property.TextDecorationSkipInk | undefined - > - textDecorationStyle?: ResponsiveValue< - Property.TextDecorationStyle | undefined - > - textDecorationThickness?: ResponsiveValue< - Property.TextDecorationThickness | undefined - > - textEmphasisColor?: ResponsiveValue - textEmphasisPosition?: ResponsiveValue< - Property.TextEmphasisPosition | undefined - > - textEmphasisStyle?: ResponsiveValue - textFit?: ResponsiveValue - textIndent?: ResponsiveValue - textJustify?: ResponsiveValue - textOrientation?: ResponsiveValue - textOverflow?: ResponsiveValue - textRendering?: ResponsiveValue - textShadow?: ResponsiveValue - textSizeAdjust?: ResponsiveValue - textSpacingTrim?: ResponsiveValue - textTransform?: ResponsiveValue - textUnderlineOffset?: ResponsiveValue< - Property.TextUnderlineOffset | undefined - > - textUnderlinePosition?: ResponsiveValue< - Property.TextUnderlinePosition | undefined - > - textWrapMode?: ResponsiveValue - textWrapStyle?: ResponsiveValue - timelineScope?: ResponsiveValue - timelineTriggerName?: ResponsiveValue< - Property.TimelineTriggerName | undefined - > - timelineTriggerSource?: ResponsiveValue< - Property.TimelineTriggerSource | undefined - > - top?: ResponsiveValue - touchAction?: ResponsiveValue - transform?: ResponsiveValue - transformBox?: ResponsiveValue - transformOrigin?: ResponsiveValue - transformStyle?: ResponsiveValue - transitionBehavior?: ResponsiveValue - transitionDelay?: ResponsiveValue - transitionDuration?: ResponsiveValue - transitionProperty?: ResponsiveValue - transitionTimingFunction?: ResponsiveValue< - Property.TransitionTimingFunction | undefined - > - translate?: ResponsiveValue - triggerScope?: ResponsiveValue - unicodeBidi?: ResponsiveValue - userSelect?: ResponsiveValue - vectorEffect?: ResponsiveValue - verticalAlign?: ResponsiveValue - viewTimelineAxis?: ResponsiveValue - viewTimelineInset?: ResponsiveValue - viewTimelineName?: ResponsiveValue - viewTransitionClass?: ResponsiveValue< - Property.ViewTransitionClass | undefined - > - viewTransitionName?: ResponsiveValue - viewTransitionScope?: ResponsiveValue< - Property.ViewTransitionScope | undefined - > - visibility?: ResponsiveValue - whiteSpace?: ResponsiveValue - whiteSpaceCollapse?: ResponsiveValue - widows?: ResponsiveValue - width?: ResponsiveValue - willChange?: ResponsiveValue - wordBreak?: ResponsiveValue - wordSpacing?: ResponsiveValue - wordWrap?: ResponsiveValue - writingMode?: ResponsiveValue - x?: ResponsiveValue - y?: ResponsiveValue - zIndex?: ResponsiveValue - zoom?: ResponsiveValue - animation?: ResponsiveValue - animationRange?: ResponsiveValue - background?: ResponsiveValue - backgroundPosition?: ResponsiveValue - border?: ResponsiveValue - borderBlock?: ResponsiveValue - borderBlockColor?: ResponsiveValue - borderBlockEnd?: ResponsiveValue - borderBlockStart?: ResponsiveValue - borderBlockStyle?: ResponsiveValue - borderBlockWidth?: ResponsiveValue - borderBottom?: ResponsiveValue - borderColor?: ResponsiveValue - borderImage?: ResponsiveValue - borderInline?: ResponsiveValue - borderInlineColor?: ResponsiveValue - borderInlineEnd?: ResponsiveValue - borderInlineStart?: ResponsiveValue - borderInlineStyle?: ResponsiveValue - borderInlineWidth?: ResponsiveValue - borderLeft?: ResponsiveValue - borderRadius?: ResponsiveValue - borderRight?: ResponsiveValue - borderStyle?: ResponsiveValue - borderTop?: ResponsiveValue - borderWidth?: ResponsiveValue - caret?: ResponsiveValue - columnRule?: ResponsiveValue - columns?: ResponsiveValue - containIntrinsicSize?: ResponsiveValue< - Property.ContainIntrinsicSize | undefined - > - container?: ResponsiveValue - cornerBlockEndShape?: ResponsiveValue< - Property.CornerBlockEndShape | undefined - > - cornerBlockStartShape?: ResponsiveValue< - Property.CornerBlockStartShape | undefined - > - cornerBottomShape?: ResponsiveValue - cornerInlineEndShape?: ResponsiveValue< - Property.CornerInlineEndShape | undefined - > - cornerInlineStartShape?: ResponsiveValue< - Property.CornerInlineStartShape | undefined - > - cornerLeftShape?: ResponsiveValue - cornerRightShape?: ResponsiveValue - cornerShape?: ResponsiveValue - cornerTopShape?: ResponsiveValue - flex?: ResponsiveValue - flexFlow?: ResponsiveValue - font?: ResponsiveValue - gap?: ResponsiveValue - grid?: ResponsiveValue - gridArea?: ResponsiveValue - gridColumn?: ResponsiveValue - gridGap?: ResponsiveValue - gridRow?: ResponsiveValue - gridTemplate?: ResponsiveValue - inset?: ResponsiveValue - insetBlock?: ResponsiveValue - insetInline?: ResponsiveValue - interestDelay?: ResponsiveValue - listStyle?: ResponsiveValue - margin?: ResponsiveValue - marginBlock?: ResponsiveValue - marginInline?: ResponsiveValue - mask?: ResponsiveValue - maskBorder?: ResponsiveValue - offset?: ResponsiveValue - outline?: ResponsiveValue - overflow?: ResponsiveValue - overscrollBehavior?: ResponsiveValue - padding?: ResponsiveValue - paddingBlock?: ResponsiveValue - paddingInline?: ResponsiveValue - placeContent?: ResponsiveValue - placeItems?: ResponsiveValue - placeSelf?: ResponsiveValue - positionTry?: ResponsiveValue - scrollMargin?: ResponsiveValue - scrollMarginBlock?: ResponsiveValue - scrollMarginInline?: ResponsiveValue - scrollPadding?: ResponsiveValue - scrollPaddingBlock?: ResponsiveValue - scrollPaddingInline?: ResponsiveValue< - Property.ScrollPaddingInline | undefined - > - scrollTimeline?: ResponsiveValue - textDecoration?: ResponsiveValue - textEmphasis?: ResponsiveValue - textWrap?: ResponsiveValue - timelineTrigger?: ResponsiveValue - timelineTriggerActiveRange?: ResponsiveValue< - Property.TimelineTriggerActiveRange | undefined - > - transition?: ResponsiveValue - viewTimeline?: ResponsiveValue - msAccelerator?: ResponsiveValue - msBlockProgression?: ResponsiveValue - msContentZoomChaining?: ResponsiveValue< - Property.MsContentZoomChaining | undefined - > - msContentZoomLimitMax?: ResponsiveValue< - Property.MsContentZoomLimitMax | undefined - > - msContentZoomLimitMin?: ResponsiveValue< - Property.MsContentZoomLimitMin | undefined - > - msContentZoomSnapPoints?: ResponsiveValue< - Property.MsContentZoomSnapPoints | undefined - > - msContentZoomSnapType?: ResponsiveValue< - Property.MsContentZoomSnapType | undefined - > - msContentZooming?: ResponsiveValue - msFilter?: ResponsiveValue - msFlowFrom?: ResponsiveValue - msFlowInto?: ResponsiveValue - msGridColumns?: ResponsiveValue - msGridRows?: ResponsiveValue - msHighContrastAdjust?: ResponsiveValue< - Property.MsHighContrastAdjust | undefined - > - msHyphenateLimitChars?: ResponsiveValue< - Property.MsHyphenateLimitChars | undefined - > - msHyphenateLimitLines?: ResponsiveValue< - Property.MsHyphenateLimitLines | undefined - > - msHyphenateLimitZone?: ResponsiveValue< - Property.MsHyphenateLimitZone | undefined - > - msImeAlign?: ResponsiveValue - msOverflowStyle?: ResponsiveValue - msScrollChaining?: ResponsiveValue - msScrollLimitXMax?: ResponsiveValue - msScrollLimitXMin?: ResponsiveValue - msScrollLimitYMax?: ResponsiveValue - msScrollLimitYMin?: ResponsiveValue - msScrollRails?: ResponsiveValue - msScrollSnapPointsX?: ResponsiveValue< - Property.MsScrollSnapPointsX | undefined - > - msScrollSnapPointsY?: ResponsiveValue< - Property.MsScrollSnapPointsY | undefined - > - msScrollSnapType?: ResponsiveValue - msScrollTranslation?: ResponsiveValue< - Property.MsScrollTranslation | undefined - > - msScrollbar3dlightColor?: ResponsiveValue< - Property.MsScrollbar3dlightColor | undefined - > - msScrollbarArrowColor?: ResponsiveValue< - Property.MsScrollbarArrowColor | undefined - > - msScrollbarBaseColor?: ResponsiveValue< - Property.MsScrollbarBaseColor | undefined - > - msScrollbarDarkshadowColor?: ResponsiveValue< - Property.MsScrollbarDarkshadowColor | undefined - > - msScrollbarFaceColor?: ResponsiveValue< - Property.MsScrollbarFaceColor | undefined - > - msScrollbarHighlightColor?: ResponsiveValue< - Property.MsScrollbarHighlightColor | undefined - > - msScrollbarShadowColor?: ResponsiveValue< - Property.MsScrollbarShadowColor | undefined - > - msScrollbarTrackColor?: ResponsiveValue< - Property.MsScrollbarTrackColor | undefined - > - msTextAutospace?: ResponsiveValue - msTouchSelect?: ResponsiveValue - msUserSelect?: ResponsiveValue - msWrapFlow?: ResponsiveValue - msWrapMargin?: ResponsiveValue - msWrapThrough?: ResponsiveValue - MozAppearance?: ResponsiveValue - MozBinding?: ResponsiveValue - MozBorderBottomColors?: ResponsiveValue< - Property.MozBorderBottomColors | undefined - > - MozBorderLeftColors?: ResponsiveValue< - Property.MozBorderLeftColors | undefined - > - MozBorderRightColors?: ResponsiveValue< - Property.MozBorderRightColors | undefined - > - MozBorderTopColors?: ResponsiveValue - MozContextProperties?: ResponsiveValue< - Property.MozContextProperties | undefined - > - MozFloatEdge?: ResponsiveValue - MozForceBrokenImageIcon?: ResponsiveValue< - Property.MozForceBrokenImageIcon | undefined - > - MozOrient?: ResponsiveValue - MozOutlineRadiusBottomleft?: ResponsiveValue< - Property.MozOutlineRadiusBottomleft | undefined - > - MozOutlineRadiusBottomright?: ResponsiveValue< - Property.MozOutlineRadiusBottomright | undefined - > - MozOutlineRadiusTopleft?: ResponsiveValue< - Property.MozOutlineRadiusTopleft | undefined - > - MozOutlineRadiusTopright?: ResponsiveValue< - Property.MozOutlineRadiusTopright | undefined - > - MozStackSizing?: ResponsiveValue - MozTextBlink?: ResponsiveValue - MozUserFocus?: ResponsiveValue - MozUserInput?: ResponsiveValue - MozUserModify?: ResponsiveValue - MozWindowDragging?: ResponsiveValue - MozWindowShadow?: ResponsiveValue - WebkitAppearance?: ResponsiveValue - WebkitBorderAfterColor?: ResponsiveValue< - Property.WebkitBorderAfterColor | undefined - > - WebkitBorderAfterStyle?: ResponsiveValue< - Property.WebkitBorderAfterStyle | undefined - > - WebkitBorderAfterWidth?: ResponsiveValue< - Property.WebkitBorderAfterWidth | undefined - > - WebkitBorderBeforeColor?: ResponsiveValue< - Property.WebkitBorderBeforeColor | undefined - > - WebkitBorderBeforeStyle?: ResponsiveValue< - Property.WebkitBorderBeforeStyle | undefined - > - WebkitBorderBeforeWidth?: ResponsiveValue< - Property.WebkitBorderBeforeWidth | undefined - > - WebkitBorderEndColor?: ResponsiveValue< - Property.WebkitBorderEndColor | undefined - > - WebkitBorderEndStyle?: ResponsiveValue< - Property.WebkitBorderEndStyle | undefined - > - WebkitBorderEndWidth?: ResponsiveValue< - Property.WebkitBorderEndWidth | undefined - > - WebkitBorderStartColor?: ResponsiveValue< - Property.WebkitBorderStartColor | undefined - > - WebkitBorderStartStyle?: ResponsiveValue< - Property.WebkitBorderStartStyle | undefined - > - WebkitBorderStartWidth?: ResponsiveValue< - Property.WebkitBorderStartWidth | undefined - > - WebkitBoxReflect?: ResponsiveValue - WebkitLineClamp?: ResponsiveValue - WebkitMaskAttachment?: ResponsiveValue< - Property.WebkitMaskAttachment | undefined - > - WebkitMaskClip?: ResponsiveValue - WebkitMaskComposite?: ResponsiveValue< - Property.WebkitMaskComposite | undefined - > - WebkitMaskImage?: ResponsiveValue - WebkitMaskOrigin?: ResponsiveValue - WebkitMaskPosition?: ResponsiveValue - WebkitMaskPositionX?: ResponsiveValue< - Property.WebkitMaskPositionX | undefined - > - WebkitMaskPositionY?: ResponsiveValue< - Property.WebkitMaskPositionY | undefined - > - WebkitMaskRepeat?: ResponsiveValue - WebkitMaskRepeatX?: ResponsiveValue - WebkitMaskRepeatY?: ResponsiveValue - WebkitMaskSize?: ResponsiveValue - WebkitOverflowScrolling?: ResponsiveValue< - Property.WebkitOverflowScrolling | undefined - > - WebkitTapHighlightColor?: ResponsiveValue< - Property.WebkitTapHighlightColor | undefined - > - WebkitTextFillColor?: ResponsiveValue< - Property.WebkitTextFillColor | undefined - > - WebkitTextStrokeColor?: ResponsiveValue< - Property.WebkitTextStrokeColor | undefined - > - WebkitTextStrokeWidth?: ResponsiveValue< - Property.WebkitTextStrokeWidth | undefined - > - WebkitTouchCallout?: ResponsiveValue - WebkitUserModify?: ResponsiveValue - WebkitUserSelect?: ResponsiveValue - msContentZoomLimit?: ResponsiveValue - msContentZoomSnap?: ResponsiveValue - msScrollLimit?: ResponsiveValue - msScrollSnapX?: ResponsiveValue - msScrollSnapY?: ResponsiveValue - MozOutlineRadius?: ResponsiveValue - WebkitBorderAfter?: ResponsiveValue - WebkitBorderBefore?: ResponsiveValue - WebkitBorderEnd?: ResponsiveValue - WebkitBorderStart?: ResponsiveValue - WebkitMask?: ResponsiveValue - WebkitTextStroke?: ResponsiveValue -} diff --git a/packages/react/src/types/props/index.ts b/packages/react/src/types/props/index.ts index d587e279..bb716888 100644 --- a/packages/react/src/types/props/index.ts +++ b/packages/react/src/types/props/index.ts @@ -4,8 +4,8 @@ import type { DevupUiBackgroundProps } from './background' import type { DevupUiBorderProps } from './border' import type { DevupUiBoxModelProps } from './box-model' import type { DevupUiBoxSizingProps } from './box-sizing' +import type { DevupCssProperties } from './css-properties' import type { DevupUiFlexProps } from './flex' -import type { DevupCssProperties } from './generated-css-properties' import type { DevupUiImageProps } from './image' import type { DevupUiMaskProps } from './mask' import type { DevupUiMotionPathProps } from './motion-path' diff --git a/packages/react/type-tests/custom-shorthand.ts b/packages/react/type-tests/custom-shorthand.ts index ca2b00ed..dbc65e9d 100644 --- a/packages/react/type-tests/custom-shorthand.ts +++ b/packages/react/type-tests/custom-shorthand.ts @@ -8,7 +8,7 @@ import type { DevupDefaultComponentMergedProps, DevupElementTypeProps, } from '../src/types/props' -import type { DevupCssProperties } from '../src/types/props/generated-css-properties' +import type { DevupCssProperties } from '../src/types/props/css-properties' import type { ResponsiveValue } from '../src/types/responsive-value' // Mirrors the module augmentation emitted to /theme.d.ts. @@ -55,6 +55,14 @@ Box({ }) Box({ props: { id: 'box' } }) + +// Multiline declarations in csstype-extra must remain available as CSS props. +Box({ timelineTriggerActivationRange: 'normal' }) +Box({ timelineTriggerActivationRangeEnd: ['normal', null, 'auto'] }) +Box({ timelineTriggerActivationRangeStart: 'normal' }) +Box({ timelineTriggerActiveRangeEnd: 'auto' }) +Box({ timelineTriggerActiveRangeStart: 'normal' }) + Box({ onClick(event) { return event.currentTarget.dataset @@ -100,7 +108,7 @@ type _CustomPropsStayEquivalent = Assert> type OriginalCssProperties = { [K in keyof Properties]?: ResponsiveValue } -type _GeneratedCssPropsStayEquivalent = Assert< +type _CssPropsStayEquivalent = Assert< DevupCssProperties extends OriginalCssProperties ? OriginalCssProperties extends DevupCssProperties ? true