Skip to content

Commit 5286731

Browse files
segunadebayosegunadebayo
committedFeb 6, 2025·
feat: support new css properties
·
@pandacss/types@0.53.3@pandacss/astro-plugin-studio@0.53.0
1 parent 1d057e1 commit 5286731

23 files changed

+1302
-881
lines changed
 

‎.changeset/rare-ways-reflect.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
'@pandacss/is-valid-prop': minor
3+
'@pandacss/generator': minor
4+
'@pandacss/types': minor
5+
---
6+
7+
Add support for recent baseline and experimental css properties:
8+
9+
- **Size interpolation:** fieldSizing, interpolateSize
10+
- **Text rendering:** textWrapMode, textWrapStyle and textSpacingTrim
11+
- **[Experimental] Anchor positioning:** anchorName, anchorScope, positionAnchor, positionArea, positionTry,
12+
positionTryFallback, positionTryOrder, positionVisibility

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"tsup": "8.0.2",
5151
"tsx": "4.7.1",
5252
"typescript": "5.6.2",
53-
"vite-tsconfig-paths": "4.3.1",
53+
"vite-tsconfig-paths": "5.1.4",
5454
"vitest": "1.5.0"
5555
},
5656
"devDependencies": {

‎packages/config/src/merge-config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export function mergeConfigs(configs: ExtendableConfig[]) {
8989
globalCss: mergeExtensions(reversed.map((config) => config.globalCss ?? {})),
9090
globalVars: mergeExtensions(reversed.map((config) => config.globalVars ?? {})),
9191
globalFontface: mergeExtensions(reversed.map((config) => config.globalFontface ?? {})),
92+
globalPositionTry: mergeExtensions(reversed.map((config) => config.globalPositionTry ?? {})),
9293
staticCss: mergeExtensions(reversed.map((config) => config.staticCss ?? {})),
9394
themes: mergeExtensions(reversed.map((config) => config.themes ?? {})),
9495
hooks: mergeHooks(pluginHooks),

‎packages/core/__tests__/global-position-try.test.ts

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { GlobalPositionTry } from '../src/global-position-try'
2+
3+
describe('global position try', () => {
4+
test('dash ident', () => {
5+
const pos = new GlobalPositionTry({
6+
globalPositionTry: {
7+
'--bottom-scrollable': {
8+
alignSelf: 'stretch',
9+
},
10+
},
11+
})
12+
13+
expect(pos.toString()).toMatchInlineSnapshot(`
14+
"@position-try --bottom-scrollable {
15+
align-self: stretch;
16+
17+
}"
18+
`)
19+
})
20+
21+
test('without dash ident', () => {
22+
const pos = new GlobalPositionTry({
23+
globalPositionTry: {
24+
'bottom-scrollable': {
25+
positionArea: 'block-start span-inline-end',
26+
alignSelf: 'stretch',
27+
},
28+
},
29+
})
30+
31+
expect(pos.toString()).toMatchInlineSnapshot(`
32+
"@position-try --bottom-scrollable {
33+
position-area: block-start span-inline-end;
34+
align-self: stretch;
35+
36+
}"
37+
`)
38+
})
39+
})

‎packages/core/src/context.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import type {
1818
} from '@pandacss/types'
1919
import { Conditions } from './conditions'
2020
import { FileEngine } from './file'
21+
import { GlobalFontface } from './global-fontface'
22+
import { GlobalPositionTry } from './global-position-try'
2123
import { GlobalVars } from './global-vars'
2224
import { HooksApi } from './hooks-api'
2325
import { ImportMap } from './import-map'
@@ -34,7 +36,6 @@ import { StyleEncoder } from './style-encoder'
3436
import { Stylesheet } from './stylesheet'
3537
import type { ParserOptions, StylesheetContext } from './types'
3638
import { Utility } from './utility'
37-
import { GlobalFontface } from './global-fontface'
3839

3940
const defaults = (config: UserConfig): UserConfig => ({
4041
cssVarRoot: ':where(:root, :host)',
@@ -71,6 +72,7 @@ export class Context {
7172

7273
globalVars: GlobalVars
7374
globalFontface: GlobalFontface
75+
globalPositionTry: GlobalPositionTry
7476

7577
encoder: StyleEncoder
7678
decoder: StyleDecoder
@@ -189,6 +191,10 @@ export class Context {
189191
globalFontface: this.config.globalFontface,
190192
})
191193

194+
this.globalPositionTry = new GlobalPositionTry({
195+
globalPositionTry: this.config.globalPositionTry,
196+
})
197+
192198
this.messages = getMessages({
193199
jsx: this.jsx,
194200
config: this.config,
@@ -343,6 +349,7 @@ export class Context {
343349
helpers: patternFns,
344350
globalVars: this.globalVars,
345351
globalFontface: this.globalFontface,
352+
globalPositionTry: this.globalPositionTry,
346353
} satisfies Omit<StylesheetContext, 'layers'>
347354
}
348355

‎packages/core/src/global-position-try.ts

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import type { FontfaceRule, GlobalPositionTry as GlobalPositionTryDefinition } from '@pandacss/types'
2+
import { stringify } from './stringify'
3+
4+
interface GlobalFontfaceOptions {
5+
globalPositionTry?: GlobalPositionTryDefinition
6+
}
7+
8+
export class GlobalPositionTry {
9+
names: string[]
10+
11+
constructor(private opts: GlobalFontfaceOptions) {
12+
this.names = Object.keys(opts.globalPositionTry ?? {})
13+
}
14+
15+
isEmpty() {
16+
return this.names.length === 0
17+
}
18+
19+
toString() {
20+
return stringifyGlobalPositionTry(this.opts.globalPositionTry ?? {})
21+
}
22+
}
23+
24+
const stringifyGlobalPositionTry = (dfns: GlobalPositionTryDefinition) => {
25+
if (!dfns) return ''
26+
27+
const lines: string[] = []
28+
29+
Object.entries(dfns).forEach(([key, value]) => {
30+
const _value = Array.isArray(value) ? value : [value]
31+
_value.forEach((v) => {
32+
lines.push(stringifyPositionTry(key, v))
33+
})
34+
})
35+
36+
return lines.join('\n\n')
37+
}
38+
39+
const ident = (key: string) => (key.startsWith('--') ? key : `--${key}`)
40+
41+
function stringifyPositionTry(key: string, config: FontfaceRule) {
42+
return `@position-try ${ident(key)} {
43+
${stringify(config)}
44+
}`
45+
}

‎packages/core/src/stylesheet.ts

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export class Stylesheet {
6262
let css = stringify(result)
6363
css += this.context.globalVars.toString()
6464
css += this.context.globalFontface.toString()
65+
css += this.context.globalPositionTry.toString()
6566

6667
if (this.context.hooks['cssgen:done']) {
6768
css = this.context.hooks['cssgen:done']({ artifact: 'global', content: css }) ?? css

‎packages/core/src/types.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,15 @@ export interface TransformResult {
2929
export interface StylesheetContext
3030
extends Pick<
3131
Context,
32-
'utility' | 'conditions' | 'encoder' | 'decoder' | 'isValidProperty' | 'hooks' | 'globalVars' | 'globalFontface'
32+
| 'utility'
33+
| 'conditions'
34+
| 'encoder'
35+
| 'decoder'
36+
| 'isValidProperty'
37+
| 'hooks'
38+
| 'globalVars'
39+
| 'globalFontface'
40+
| 'globalPositionTry'
3341
> {
3442
layers: Layers
3543
helpers: PatternHelpers

‎packages/fixture/src/config.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,10 @@ const textStyles = {
6060
},
6161
}
6262

63-
export const fixturePreset: Omit<PresetCore, 'globalCss' | 'staticCss' | 'globalVars' | 'globalFontface'> = {
63+
export const fixturePreset: Omit<
64+
PresetCore,
65+
'globalCss' | 'staticCss' | 'globalVars' | 'globalFontface' | 'globalPositionTry'
66+
> = {
6467
...presetBase,
6568
conditions,
6669
theme: {

‎packages/generator/__tests__/generate-style-props.test.ts

+470-422
Large diffs are not rendered by default.

‎packages/generator/src/artifacts/generated/is-valid-prop.mjs.json

+1-1
Large diffs are not rendered by default.

‎packages/generator/src/artifacts/generated/system-types.d.ts.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"content": "import type { ConditionalValue, Nested } from './conditions'\nimport type { AtRule, PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n [name: string]: {\n [time: string]: CssProperties\n }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ninterface GenericProperties {\n [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Omit<Nested<SystemProperties & CssVarProperties>, 'base'>\n\nexport interface GlobalStyleObject {\n [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n [selector: string]: SystemStyleObject | undefined\n extend?: GlobalStyleObject | undefined\n}\n\n/* -----------------------------------------------------------------------------\n * Composition (text styles, layer styles)\n * -----------------------------------------------------------------------------*/\n\ntype FilterStyleObject<P extends string> = {\n [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Font face\n * -----------------------------------------------------------------------------*/\n\nexport type GlobalFontfaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>\n\nexport type FontfaceRule = Omit<GlobalFontfaceRule, 'fontFamily'>\n\nexport interface GlobalFontface {\n [name: string]: FontfaceRule | FontfaceRule[]\n}\n\nexport interface ExtendableGlobalFontface {\n [name: string]: FontfaceRule | FontfaceRule[] | GlobalFontface | undefined\n extend?: GlobalFontface | undefined\n}\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n css?: SystemStyleObject | SystemStyleObject[]\n}\n\nexport type JsxStyleProps = SystemStyleObject & WithCss\n\nexport interface PatchedHTMLProps {\n htmlWidth?: string | number\n htmlHeight?: string | number\n htmlTranslate?: 'yes' | 'no' | undefined\n htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n WithHTMLProps<T>,\n P\n>\n"
2+
"content": "import type { ConditionalValue, Nested } from './conditions'\nimport type { AtRule, Globals, PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\ntype DashedIdent = `--${string}`\n\ntype StringToMultiple<T extends string> = T | `${T}, ${T}`\n\nexport type PositionAreaAxis =\n | 'left'\n | 'center'\n | 'right'\n | 'x-start'\n | 'x-end'\n | 'span-x-start'\n | 'span-x-end'\n | 'x-self-start'\n | 'x-self-end'\n | 'span-x-self-start'\n | 'span-x-self-end'\n | 'span-all'\n | 'top'\n | 'bottom'\n | 'span-top'\n | 'span-bottom'\n | 'y-start'\n | 'y-end'\n | 'span-y-start'\n | 'span-y-end'\n | 'y-self-start'\n | 'y-self-end'\n | 'span-y-self-start'\n | 'span-y-self-end'\n | 'block-start'\n | 'block-end'\n | 'span-block-start'\n | 'span-block-end'\n | 'inline-start'\n | 'inline-end'\n | 'span-inline-start'\n | 'span-inline-end'\n | 'self-block-start'\n | 'self-block-end'\n | 'span-self-block-start'\n | 'span-self-block-end'\n | 'self-inline-start'\n | 'self-inline-end'\n | 'span-self-inline-start'\n | 'span-self-inline-end'\n | 'start'\n | 'end'\n | 'span-start'\n | 'span-end'\n | 'self-start'\n | 'self-end'\n | 'span-self-start'\n | 'span-self-end'\n\ntype PositionTry =\n | 'normal'\n | 'flip-block'\n | 'flip-inline'\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'block-start'\n | 'block-end'\n | 'inline-start'\n | 'inline-end'\n | DashedIdent\n\nexport interface ModernCssProperties {\n anchorName?: Globals | 'none' | DashedIdent | StringToMultiple<DashedIdent>\n anchorScope?: Globals | 'none' | 'all' | DashedIdent | StringToMultiple<DashedIdent>\n fieldSizing?: Globals | 'fixed' | 'content'\n interpolateSize?: Globals | 'allow-keywords' | 'numeric-only'\n positionAnchor?: Globals | 'auto' | DashedIdent\n positionArea?: Globals | 'auto' | PositionAreaAxis | `${PositionAreaAxis} ${PositionAreaAxis}` | String\n positionTry?: Globals | StringToMultiple<PositionTry> | String\n positionTryFallback?: Globals | 'none' | StringToMultiple<PositionTry> | String\n positionTryOrder?: Globals | 'normal' | 'most-width' | 'most-height' | 'most-block-size' | 'most-inline-size'\n positionVisibility?: Globals | 'always' | 'anchors-visible' | 'no-overflow'\n textWrapMode?: Globals | 'wrap' | 'nowrap'\n textSpacingTrim?: Globals | 'normal' | 'space-all' | 'space-first' | 'trim-start'\n textWrapStyle?: Globals | 'auto' | 'balance' | 'pretty' | 'stable'\n}\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties, ModernCssProperties {}\n\nexport interface CssKeyframes {\n [name: string]: {\n [time: string]: CssProperties\n }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ninterface GenericProperties {\n [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Omit<Nested<SystemProperties & CssVarProperties>, 'base'>\n\nexport interface GlobalStyleObject {\n [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n [selector: string]: SystemStyleObject | undefined\n extend?: GlobalStyleObject | undefined\n}\n\n/* -----------------------------------------------------------------------------\n * Composition (text styles, layer styles)\n * -----------------------------------------------------------------------------*/\n\ntype FilterStyleObject<P extends string> = {\n [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Font face\n * -----------------------------------------------------------------------------*/\n\nexport type GlobalFontfaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>\n\nexport type FontfaceRule = Omit<GlobalFontfaceRule, 'fontFamily'>\n\nexport interface GlobalFontface {\n [name: string]: FontfaceRule | FontfaceRule[]\n}\n\nexport interface ExtendableGlobalFontface {\n [name: string]: FontfaceRule | FontfaceRule[] | GlobalFontface | undefined\n extend?: GlobalFontface | undefined\n}\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n css?: SystemStyleObject | SystemStyleObject[]\n}\n\nexport type JsxStyleProps = SystemStyleObject & WithCss\n\nexport interface PatchedHTMLProps {\n htmlWidth?: string | number\n htmlHeight?: string | number\n htmlTranslate?: 'yes' | 'no' | undefined\n htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n WithHTMLProps<T>,\n P\n>\n"
33
}

‎packages/is-valid-prop/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,6 @@
3838
"dist"
3939
],
4040
"devDependencies": {
41-
"mdn-data": "2.4.2"
41+
"mdn-data": "^2.15.0"
4242
}
4343
}

‎packages/is-valid-prop/src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const userGeneratedStr = ''
22
const userGenerated = userGeneratedStr.split(',')
33
const cssPropertiesStr =
4-
'WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom,alignmentBaseline,baselineShift,clipRule,colorInterpolation,colorRendering,dominantBaseline,fill,fillOpacity,fillRule,floodColor,floodOpacity,glyphOrientationVertical,lightingColor,marker,markerEnd,markerMid,markerStart,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,textAnchor,vectorEffect'
4+
'WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical'
55

66
const allCssProperties = cssPropertiesStr.split(',').concat(userGenerated)
77

‎packages/studio/styled-system/jsx/is-valid-prop.mjs

+1-1
Large diffs are not rendered by default.

‎packages/studio/styled-system/types/style-props.d.ts

+225-201
Large diffs are not rendered by default.

‎packages/studio/styled-system/types/system-types.d.ts

+86-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable */
22
import type { ConditionalValue, Nested } from './conditions';
3-
import type { AtRule, PropertiesFallback } from './csstype';
3+
import type { AtRule, Globals, PropertiesFallback } from './csstype';
44
import type { SystemProperties, CssVarProperties } from './style-props';
55

66
type String = string & {}
@@ -22,9 +22,93 @@ export type Assign<T, U> = {
2222
* Native css properties
2323
* -----------------------------------------------------------------------------*/
2424

25+
type DashedIdent = `--${string}`
26+
27+
type StringToMultiple<T extends string> = T | `${T}, ${T}`
28+
29+
export type PositionAreaAxis =
30+
| 'left'
31+
| 'center'
32+
| 'right'
33+
| 'x-start'
34+
| 'x-end'
35+
| 'span-x-start'
36+
| 'span-x-end'
37+
| 'x-self-start'
38+
| 'x-self-end'
39+
| 'span-x-self-start'
40+
| 'span-x-self-end'
41+
| 'span-all'
42+
| 'top'
43+
| 'bottom'
44+
| 'span-top'
45+
| 'span-bottom'
46+
| 'y-start'
47+
| 'y-end'
48+
| 'span-y-start'
49+
| 'span-y-end'
50+
| 'y-self-start'
51+
| 'y-self-end'
52+
| 'span-y-self-start'
53+
| 'span-y-self-end'
54+
| 'block-start'
55+
| 'block-end'
56+
| 'span-block-start'
57+
| 'span-block-end'
58+
| 'inline-start'
59+
| 'inline-end'
60+
| 'span-inline-start'
61+
| 'span-inline-end'
62+
| 'self-block-start'
63+
| 'self-block-end'
64+
| 'span-self-block-start'
65+
| 'span-self-block-end'
66+
| 'self-inline-start'
67+
| 'self-inline-end'
68+
| 'span-self-inline-start'
69+
| 'span-self-inline-end'
70+
| 'start'
71+
| 'end'
72+
| 'span-start'
73+
| 'span-end'
74+
| 'self-start'
75+
| 'self-end'
76+
| 'span-self-start'
77+
| 'span-self-end'
78+
79+
type PositionTry =
80+
| 'normal'
81+
| 'flip-block'
82+
| 'flip-inline'
83+
| 'top'
84+
| 'bottom'
85+
| 'left'
86+
| 'right'
87+
| 'block-start'
88+
| 'block-end'
89+
| 'inline-start'
90+
| 'inline-end'
91+
| DashedIdent
92+
93+
export interface ModernCssProperties {
94+
anchorName?: Globals | 'none' | DashedIdent | StringToMultiple<DashedIdent>
95+
anchorScope?: Globals | 'none' | 'all' | DashedIdent | StringToMultiple<DashedIdent>
96+
fieldSizing?: Globals | 'fixed' | 'content'
97+
interpolateSize?: Globals | 'allow-keywords' | 'numeric-only'
98+
positionAnchor?: Globals | 'auto' | DashedIdent
99+
positionArea?: Globals | 'auto' | PositionAreaAxis | `${PositionAreaAxis} ${PositionAreaAxis}` | String
100+
positionTry?: Globals | StringToMultiple<PositionTry> | String
101+
positionTryFallback?: Globals | 'none' | StringToMultiple<PositionTry> | String
102+
positionTryOrder?: Globals | 'normal' | 'most-width' | 'most-height' | 'most-block-size' | 'most-inline-size'
103+
positionVisibility?: Globals | 'always' | 'anchors-visible' | 'no-overflow'
104+
textWrapMode?: Globals | 'wrap' | 'nowrap'
105+
textSpacingTrim?: Globals | 'normal' | 'space-all' | 'space-first' | 'trim-start'
106+
textWrapStyle?: Globals | 'auto' | 'balance' | 'pretty' | 'stable'
107+
}
108+
25109
export type CssProperty = keyof PropertiesFallback
26110

27-
export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}
111+
export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties, ModernCssProperties {}
28112

29113
export interface CssKeyframes {
30114
[name: string]: {

‎packages/types/src/config.ts

+18
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import type {
99
ExtendableGlobalStyleObject,
1010
GlobalFontface,
1111
GlobalStyleObject,
12+
SystemStyleObject,
1213
} from './system-types'
1314
import type { ExtendableTheme, Theme } from './theme'
1415
import type { ExtendableUtilityConfig, UtilityConfig } from './utility'
@@ -61,6 +62,10 @@ export interface PresetCore {
6162
* The global fontface for your project.
6263
*/
6364
globalFontface?: GlobalFontface
65+
/**
66+
* The global custom position try fallback option
67+
*/
68+
globalPositionTry?: GlobalPositionTry
6469
/**
6570
* Used to generate css utility classes for your project.
6671
*/
@@ -135,6 +140,15 @@ interface ExtendableGlobalVars {
135140
extend?: GlobalVarsDefinition
136141
}
137142

143+
export interface GlobalPositionTry {
144+
[key: string]: SystemStyleObject
145+
}
146+
147+
interface ExtendableGlobalPositionTry {
148+
[key: string]: SystemStyleObject | GlobalPositionTry | undefined
149+
extend?: GlobalPositionTry | undefined
150+
}
151+
138152
export interface ThemeVariant extends Pick<Theme, 'tokens' | 'semanticTokens'> {}
139153

140154
export interface ThemeVariantsMap {
@@ -160,6 +174,10 @@ export interface ExtendableOptions {
160174
* The global fontface for your project.
161175
*/
162176
globalFontface?: ExtendableGlobalFontface
177+
/**
178+
* The global custom position try fallback option
179+
*/
180+
globalPositionTry?: ExtendableGlobalPositionTry
163181
/**
164182
* Used to generate css utility classes for your project.
165183
*/

‎packages/types/src/system-types.ts

+86-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { ConditionalValue, Nested } from './conditions'
2-
import type { AtRule, PropertiesFallback } from './csstype'
2+
import type { AtRule, Globals, PropertiesFallback } from './csstype'
33
import type { SystemProperties, CssVarProperties } from './style-props'
44

55
type String = string & {}
@@ -21,9 +21,93 @@ export type Assign<T, U> = {
2121
* Native css properties
2222
* -----------------------------------------------------------------------------*/
2323

24+
type DashedIdent = `--${string}`
25+
26+
type StringToMultiple<T extends string> = T | `${T}, ${T}`
27+
28+
export type PositionAreaAxis =
29+
| 'left'
30+
| 'center'
31+
| 'right'
32+
| 'x-start'
33+
| 'x-end'
34+
| 'span-x-start'
35+
| 'span-x-end'
36+
| 'x-self-start'
37+
| 'x-self-end'
38+
| 'span-x-self-start'
39+
| 'span-x-self-end'
40+
| 'span-all'
41+
| 'top'
42+
| 'bottom'
43+
| 'span-top'
44+
| 'span-bottom'
45+
| 'y-start'
46+
| 'y-end'
47+
| 'span-y-start'
48+
| 'span-y-end'
49+
| 'y-self-start'
50+
| 'y-self-end'
51+
| 'span-y-self-start'
52+
| 'span-y-self-end'
53+
| 'block-start'
54+
| 'block-end'
55+
| 'span-block-start'
56+
| 'span-block-end'
57+
| 'inline-start'
58+
| 'inline-end'
59+
| 'span-inline-start'
60+
| 'span-inline-end'
61+
| 'self-block-start'
62+
| 'self-block-end'
63+
| 'span-self-block-start'
64+
| 'span-self-block-end'
65+
| 'self-inline-start'
66+
| 'self-inline-end'
67+
| 'span-self-inline-start'
68+
| 'span-self-inline-end'
69+
| 'start'
70+
| 'end'
71+
| 'span-start'
72+
| 'span-end'
73+
| 'self-start'
74+
| 'self-end'
75+
| 'span-self-start'
76+
| 'span-self-end'
77+
78+
type PositionTry =
79+
| 'normal'
80+
| 'flip-block'
81+
| 'flip-inline'
82+
| 'top'
83+
| 'bottom'
84+
| 'left'
85+
| 'right'
86+
| 'block-start'
87+
| 'block-end'
88+
| 'inline-start'
89+
| 'inline-end'
90+
| DashedIdent
91+
92+
export interface ModernCssProperties {
93+
anchorName?: Globals | 'none' | DashedIdent | StringToMultiple<DashedIdent>
94+
anchorScope?: Globals | 'none' | 'all' | DashedIdent | StringToMultiple<DashedIdent>
95+
fieldSizing?: Globals | 'fixed' | 'content'
96+
interpolateSize?: Globals | 'allow-keywords' | 'numeric-only'
97+
positionAnchor?: Globals | 'auto' | DashedIdent
98+
positionArea?: Globals | 'auto' | PositionAreaAxis | `${PositionAreaAxis} ${PositionAreaAxis}` | String
99+
positionTry?: Globals | StringToMultiple<PositionTry> | String
100+
positionTryFallback?: Globals | 'none' | StringToMultiple<PositionTry> | String
101+
positionTryOrder?: Globals | 'normal' | 'most-width' | 'most-height' | 'most-block-size' | 'most-inline-size'
102+
positionVisibility?: Globals | 'always' | 'anchors-visible' | 'no-overflow'
103+
textWrapMode?: Globals | 'wrap' | 'nowrap'
104+
textSpacingTrim?: Globals | 'normal' | 'space-all' | 'space-first' | 'trim-start'
105+
textWrapStyle?: Globals | 'auto' | 'balance' | 'pretty' | 'stable'
106+
}
107+
24108
export type CssProperty = keyof PropertiesFallback
25109

26-
export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}
110+
export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties, ModernCssProperties {}
27111

28112
export interface CssKeyframes {
29113
[name: string]: {

‎pnpm-lock.yaml

+287-242
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sandbox/preact-ts/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@pandacss/dev": "workspace:*",
1818
"@preact/preset-vite": "2.10.1",
1919
"typescript": "5.6.2",
20-
"vite": "5.4.11"
20+
"vite": "5.4.11",
21+
"vite-tsconfig-paths": "5.1.4"
2122
}
2223
}

‎sandbox/preact-ts/vite.config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { defineConfig } from 'vite'
22
import preact from '@preact/preset-vite'
3+
import tsconfigPaths from 'vite-tsconfig-paths'
34

45
// https://vitejs.dev/config/
56
export default defineConfig({
6-
plugins: [preact()],
7+
plugins: [tsconfigPaths(), preact()],
78
resolve: {
89
conditions: ['source'],
910
},

‎sandbox/qwik-ts/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,6 @@
2828
"typescript": "5.6.2",
2929
"undici": "6.18.2",
3030
"vite": "5.4.11",
31-
"vite-tsconfig-paths": "4.3.1"
31+
"vite-tsconfig-paths": "5.1.4"
3232
}
3333
}

0 commit comments

Comments
 (0)
Please sign in to comment.