feat: support new css properties

Author: segunadebayo

.changeset/rare-ways-reflect.md

@@ -0,0 +1,12 @@
+---
+'@pandacss/is-valid-prop': minor
+'@pandacss/generator': minor
+'@pandacss/types': minor
+---
+
+Add support for recent baseline and experimental css properties:
+
+- **Size interpolation:** fieldSizing, interpolateSize
+- **Text rendering:** textWrapMode, textWrapStyle and textSpacingTrim
+- **[Experimental] Anchor positioning:** anchorName, anchorScope, positionAnchor, positionArea, positionTry,
+  positionTryFallback, positionTryOrder, positionVisibility

package.json

@@ -50,7 +50,7 @@
     "tsup": "8.0.2",
     "tsx": "4.7.1",
     "typescript": "5.6.2",
-    "vite-tsconfig-paths": "4.3.1",
+    "vite-tsconfig-paths": "5.1.4",
     "vitest": "1.5.0"
   },
   "devDependencies": {

packages/config/src/merge-config.ts

@@ -89,6 +89,7 @@ export function mergeConfigs(configs: ExtendableConfig[]) {
       globalCss: mergeExtensions(reversed.map((config) => config.globalCss ?? {})),
       globalVars: mergeExtensions(reversed.map((config) => config.globalVars ?? {})),
       globalFontface: mergeExtensions(reversed.map((config) => config.globalFontface ?? {})),
+      globalPositionTry: mergeExtensions(reversed.map((config) => config.globalPositionTry ?? {})),
       staticCss: mergeExtensions(reversed.map((config) => config.staticCss ?? {})),
       themes: mergeExtensions(reversed.map((config) => config.themes ?? {})),
       hooks: mergeHooks(pluginHooks),

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

@@ -0,0 +1,39 @@
+import { GlobalPositionTry } from '../src/global-position-try'
+
+describe('global position try', () => {
+  test('dash ident', () => {
+    const pos = new GlobalPositionTry({
+      globalPositionTry: {
+        '--bottom-scrollable': {
+          alignSelf: 'stretch',
+        },
+      },
+    })
+
+    expect(pos.toString()).toMatchInlineSnapshot(`
+      "@position-try --bottom-scrollable {
+        align-self: stretch;
+
+      }"
+    `)
+  })
+
+  test('without dash ident', () => {
+    const pos = new GlobalPositionTry({
+      globalPositionTry: {
+        'bottom-scrollable': {
+          positionArea: 'block-start span-inline-end',
+          alignSelf: 'stretch',
+        },
+      },
+    })
+
+    expect(pos.toString()).toMatchInlineSnapshot(`
+      "@position-try --bottom-scrollable {
+        position-area: block-start span-inline-end;
+      align-self: stretch;
+
+      }"
+    `)
+  })
+})

packages/core/src/context.ts

@@ -18,6 +18,8 @@ import type {
 } from '@pandacss/types'
 import { Conditions } from './conditions'
 import { FileEngine } from './file'
+import { GlobalFontface } from './global-fontface'
+import { GlobalPositionTry } from './global-position-try'
 import { GlobalVars } from './global-vars'
 import { HooksApi } from './hooks-api'
 import { ImportMap } from './import-map'
@@ -34,7 +36,6 @@ import { StyleEncoder } from './style-encoder'
 import { Stylesheet } from './stylesheet'
 import type { ParserOptions, StylesheetContext } from './types'
 import { Utility } from './utility'
-import { GlobalFontface } from './global-fontface'
 
 const defaults = (config: UserConfig): UserConfig => ({
   cssVarRoot: ':where(:root, :host)',
@@ -71,6 +72,7 @@ export class Context {
 
   globalVars: GlobalVars
   globalFontface: GlobalFontface
+  globalPositionTry: GlobalPositionTry
 
   encoder: StyleEncoder
   decoder: StyleDecoder
@@ -189,6 +191,10 @@ export class Context {
       globalFontface: this.config.globalFontface,
     })
 
+    this.globalPositionTry = new GlobalPositionTry({
+      globalPositionTry: this.config.globalPositionTry,
+    })
+
     this.messages = getMessages({
       jsx: this.jsx,
       config: this.config,
@@ -343,6 +349,7 @@ export class Context {
       helpers: patternFns,
       globalVars: this.globalVars,
       globalFontface: this.globalFontface,
+      globalPositionTry: this.globalPositionTry,
     } satisfies Omit<StylesheetContext, 'layers'>
   }
 

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

@@ -0,0 +1,45 @@
+import type { FontfaceRule, GlobalPositionTry as GlobalPositionTryDefinition } from '@pandacss/types'
+import { stringify } from './stringify'
+
+interface GlobalFontfaceOptions {
+  globalPositionTry?: GlobalPositionTryDefinition
+}
+
+export class GlobalPositionTry {
+  names: string[]
+
+  constructor(private opts: GlobalFontfaceOptions) {
+    this.names = Object.keys(opts.globalPositionTry ?? {})
+  }
+
+  isEmpty() {
+    return this.names.length === 0
+  }
+
+  toString() {
+    return stringifyGlobalPositionTry(this.opts.globalPositionTry ?? {})
+  }
+}
+
+const stringifyGlobalPositionTry = (dfns: GlobalPositionTryDefinition) => {
+  if (!dfns) return ''
+
+  const lines: string[] = []
+
+  Object.entries(dfns).forEach(([key, value]) => {
+    const _value = Array.isArray(value) ? value : [value]
+    _value.forEach((v) => {
+      lines.push(stringifyPositionTry(key, v))
+    })
+  })
+
+  return lines.join('\n\n')
+}
+
+const ident = (key: string) => (key.startsWith('--') ? key : `--${key}`)
+
+function stringifyPositionTry(key: string, config: FontfaceRule) {
+  return `@position-try ${ident(key)} {
+  ${stringify(config)}
+}`
+}

packages/core/src/stylesheet.ts

@@ -62,6 +62,7 @@ export class Stylesheet {
     let css = stringify(result)
     css += this.context.globalVars.toString()
     css += this.context.globalFontface.toString()
+    css += this.context.globalPositionTry.toString()
 
     if (this.context.hooks['cssgen:done']) {
       css = this.context.hooks['cssgen:done']({ artifact: 'global', content: css }) ?? css

packages/core/src/types.ts

@@ -29,7 +29,15 @@ export interface TransformResult {
 export interface StylesheetContext
   extends Pick<
     Context,
-    'utility' | 'conditions' | 'encoder' | 'decoder' | 'isValidProperty' | 'hooks' | 'globalVars' | 'globalFontface'
+    | 'utility'
+    | 'conditions'
+    | 'encoder'
+    | 'decoder'
+    | 'isValidProperty'
+    | 'hooks'
+    | 'globalVars'
+    | 'globalFontface'
+    | 'globalPositionTry'
   > {
   layers: Layers
   helpers: PatternHelpers

packages/fixture/src/config.ts

@@ -60,7 +60,10 @@ const textStyles = {
   },
 }
 
-export const fixturePreset: Omit<PresetCore, 'globalCss' | 'staticCss' | 'globalVars' | 'globalFontface'> = {
+export const fixturePreset: Omit<
+  PresetCore,
+  'globalCss' | 'staticCss' | 'globalVars' | 'globalFontface' | 'globalPositionTry'
+> = {
   ...presetBase,
   conditions,
   theme: {