stack, vstack, hstack patterns are not working.

[e2goon]

Description

stack, vstack, hstack patterns are not working.

First, I pulled out the stack and then gave it the option { gap: '4' }.

I checked with the Chrome Console DevTools and the class name came out fine.

However, it looks like the style code was not added to the layout.css file.

The css({ display: 'flex', ... ) works fine.

Use Version

- "next": "13.4.10"
- "postcss": "8.4.26"

Link to Reproduction

Not reproducible in Windows environment

https://stackblitz.com/edit/vercel-next-js-n3x2gj?file=app%2Fglobal.css,panda.config.ts,app%2Fpage.tsx,app%2Flayout.tsx,README.md,next.config.js

Still, this is the exact same example as my environment. I need to reproduce this on Windows.

Steps to reproduce

No response

JS Framework

Next.js (TS) 13 App Dir

Panda CSS Version

^0.6.0

Browser

114.0.5735.199

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

the linked minimal repro doesn't look like the screenshots you provided, so it doesn't seem to have an issue right now

can you update your repro ?

[e2goon]

The Windows environment is where I'm having problems. The stackblitz I provided is fine, because that's not Windows.

[astahmer]

I was saying that cause your imports doesn't look the same in the screenshots you sent (~/styled-system/css, probably using custom tsconfig paths) VS in the stackblitz (../styled-system/css)

[e2goon]

Sorry about that. Batch changing the path to outdir: 'styled-system' inside the panda.config.ts file, and changing it to a relative path instead of an absolute path fixed it.

I set the directory outdir: 'src/styled-system' inside the panda.config.ts file and wanted to use the path ~/styled-system/... to look nice in the tsconfig.json. But this was the wrong choice.

Thank you 🙏

[osdiab]

#868 tracks that and #1039 should fix it

[Sadeghi1017]

vdhni

[wmertens]

I'm also not getting any output from patterns. Is there supposed to be CSS generated for hstack or circle?

Here's the repro with Next: https://stackblitz.com/edit/vercel-next-js-z7gzeg?file=panda.config.ts,src%2Fapp%2Fpage.tsx,src%2Fapp%2Flayout.tsx
And this one's with Qwik, it loads faster: https://stackblitz.com/edit/qwik-starter-asn8v4?file=panda.config.ts,src%2Froutes%2Findex.tsx,src%2Fstyled-system%2Fdebug%2Fsrc__routes__index.css

[astahmer]

Hey, it's already fixed but not yet merged & published on npm
it'll be available once this PR gets merged
and this was the PR that fixed this issue

[osdiab]

You can use it for now by installing ***@***.******@***.***` Omar

…

On Tue, Jul 25, 2023 at 5:36 AM, Alexandre Stahmer ***@***.*** > wrote: Hey, it's already fixed but not yet merged & published on npm it'll be available once this PR <#1055> gets merged and this <be0ad57> was the PR that fixed this issue — Reply to this email directly, view it on GitHub <#1034 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAONU3WXP7IPKJ54H2UC2C3XR3MFNANCNFSM6AAAAAA2LY57JA> . You are receiving this because you commented.Message ID: ***@***.***>

[wmertens]

Thanks! I made a new blitz, this uses Manu's macro plugin for all styled-system imports, and the resulting client code does not contain any imports from styled-system 🥳

https://stackblitz.com/edit/qwik-starter-vuepi6?file=src%2Froutes%2Findex.tsx,vite.config.ts

BTW:

• the Qwik install documentation should just say "run npx qwik add pandacss", it adds a bunch of other things like ignores, a demo path, and the correct script name for the build
• how does pandacss work to inject the CSS in dev mode? I can't figure it out 🥲

[astahmer]

this looks amazing ! I was curious to see how it's implemented but can't find the source for this macro plugin, is it private ?

how does pandacss work to inject the CSS in dev mode? I can't figure it out 🥲

I guess you're using the postcss plugin ? if that's the case, postcss is the one doing the heavy work here
otherwise, when using the Panda CLI only (with watch flag), that's up to you to import the generated styles.css and there is a merge happening on this file between old (on disk) / new version (re-generated on file change)

[wmertens]

The plugin is at https://github.com/manucorporat/vite-plugin-macro

How does postcss get the CSS for the classes?

[astahmer]

thanks !

we have a Builder class that gets called on each file change from the postcss plugin

panda/packages/postcss/src/index.ts

Lines 26 to 27 in e49e67d

	await builder.setup({ configPath })
	await builder.extract()

then the builder calls the main entrypoint (loadConfigAndCreateContext) to resolve the panda.config and prepare everything needed from there

panda/packages/node/src/builder.ts

Line 136 in e49e67d

this.context = await loadConfigAndCreateContext({ configPath })

which also emit the styled-system artifacts (runtime .js / .d.ts types) on the first setup call, for convenience so you don't have ot run panda codegen

panda/packages/node/src/builder.ts

Line 140 in e49e67d

emitArtifacts(this.context) // no need to await this

after that, we extract styles from each file included using globs

panda/packages/node/src/builder.ts

Lines 172 to 195 in e49e67d

	async extractFile(ctx: PandaContext, file: string) {
	const mtime = existsSync(file) ? statSync(file).mtimeMs : -Infinity
	const isUnchanged = this.fileModifiedMap.has(file) && mtime === this.fileModifiedMap.get(file)
	if (isUnchanged) return
	const css = extractFile(ctx, file)
	if (!css) return
	this.fileModifiedMap.set(file, mtime)
	this.writeFileCss(file, css)
	return css
	}
	async extract() {
	const ctx = this.getContextOrThrow()
	const done = logger.time.info('Extracted in')
	await Promise.all(ctx.getFiles().map((file) => this.extractFile(ctx, file)))
	done()
	}

finally, we write the css output into the root rule provided by postcss now

panda/packages/postcss/src/index.ts

Line 37 in e49e67d

builder.write(root)

I also made this visual (it's for the CLI implementation tho, not postcss integration), maybe it helps a bit
https://stately.ai/registry/editor/d30cb4f3-2279-41a6-ad95-13e72ccfe884?machineId=0223298d-5951-46a5-82d5-ef379c701d07&mode=Simulate

[wmertens]

Thank you, that's great! So if I understand correctly, Vite has postcss support built-in, and the plugin maintains the styles that should be added to the css. I imagine the @layer ...; statement gets replaced?

How do you generate the CSS? For each source file, you generate the AST and run the utility functions, which generate the CSS?

I'm wondering if that step can be sped up, since the macro plugin runs those too. Perhaps the utility functions could import a virtual module from the postcss plugin to register CSS during the macro expansion?

Also

which also emit the styled-system artifacts (runtime .js / .d.ts types) on the first setup call, for convenience so you don't have ot run panda codegen

This doesn't seem to be happening (in time?), I had to configure the stackblitz to run it before the npm start.

[astahmer]

So if I understand correctly, Vite has postcss support built-in, and the plugin maintains the styles that should be added to the css.

yes

I imagine the @layer ...; statement gets replaced?

no, it's now native to CSS so we can keep it
we do check if the user has provided the layers we use tho

How do you generate the CSS? For each source file, you generate the AST and run the utility functions, which generate the CSS?

also using postcss, this time internally (meaning it works that way as well for the CLI integration)

the process is like:

• extract from AST which styles were used
  

  panda/packages/parser/src/parser.ts

  Lines 233 to 400 in e49e67d

  	const extractResultByName = extract({
  	ast: sourceFile,
  	components: {
  	matchTag: (prop) => matchTag(prop.tagName),
  	matchProp: (prop) => matchTagProp(prop.tagName, prop.propName),
  	},
  	functions: {
  	matchFn: (prop) => matchFn(prop.fnName),
  	matchProp: () => true,
  	matchArg: (prop) => {
  	// skip resolving `badge` here: `panda("span", badge)`
  	if (prop.fnName === jsxFactoryAlias && prop.index === 1 && Node.isIdentifier(prop.argNode)) return false
  	return true
  	},
  	},
  	taggedTemplates: {
  	matchTaggedTemplate: (tag) => matchFn(tag.fnName),
  	},
  	getEvaluateOptions: (node) => ({ node: node as any, environment: defaultEnv }),
  	flags: { skipTraverseFiles: true },
  	})
  	measure()
  	extractResultByName.forEach((result, alias) => {
  	let name = imports.getName(alias)
  	if (isRawFn(name)) name = name.replace('.raw', '')
  	logger.debug(`ast:${name}`, name !== alias ? { kind: result.kind, alias } : { kind: result.kind })
  	if (result.kind === 'function') {
  	match(name)
  	.when(css.match, (name: 'css' | 'cva') => {
  	result.queryList.forEach((query) => {
  	if (query.kind === 'call-expression') {
  	collector.set(name, {
  	name,
  	box: (query.box.value[0] as BoxNodeMap) ?? fallback(query.box),
  	data: combineResult(unbox(query.box.value[0])),
  	})
  	} else if (query.kind === 'tagged-template') {
  	const obj = astish(query.box.value as string)
  	collector.set(name, {
  	name,
  	box: query.box ?? fallback(query.box),
  	data: [obj],
  	})
  	}
  	})
  	})
  	// stack({ ... })
  	.when(isValidPattern, (name) => {
  	result.queryList.forEach((query) => {
  	if (query.kind === 'call-expression') {
  	collector.setPattern(name, {
  	name,
  	box: (query.box.value[0] as BoxNodeMap) ?? fallback(query.box),
  	data: combineResult(unbox(query.box.value[0])),
  	})
  	}
  	})
  	})
  	// button({ ... })
  	.when(isValidRecipe, (name) => {
  	result.queryList.forEach((query) => {
  	if (query.kind === 'call-expression') {
  	collector.setRecipe(name, {
  	name,
  	box: (query.box.value[0] as BoxNodeMap) ?? fallback(query.box),
  	data: combineResult(unbox(query.box.value[0])),
  	})
  	}
  	})
  	})
  	// panda("span", { ... }) or panda("div", badge)
  	// or panda("span", { color: "red.100", ... })
  	// or panda('span')` color: red; `
  	.when(isValidStyleFn, () => {
  	result.queryList.forEach((query) => {
  	if (query.kind === 'call-expression' && query.box.value[1]) {
  	const map = query.box.value[1]
  	const boxNode = box.isMap(map) ? map : fallback(query.box)
  	// ensure that data is always an object
  	const result = { name, box: boxNode, data: combineResult(unbox(boxNode)) } as ResultItem
  	// CallExpression factory inline recipe
  	// panda("span", { base: {}, variants: { ... } })
  	if (box.isMap(map) && isCva(map.value)) {
  	collector.setCva(result)
  	} else {
  	// CallExpression factory css
  	// panda("span", { color: "red.100", ... })
  	collector.set('css', result)
  	}
  	} else if (query.kind === 'tagged-template') {
  	// TaggedTemplateExpression factory css
  	// panda('span')` color: red; `
  	const obj = astish(query.box.value as string)
  	collector.set('css', {
  	name,
  	box: query.box ?? fallback(query.box),
  	data: [obj],
  	})
  	}
  	})
  	})
  	// panda.span({ ... }) or panda.div` ...`
  	.when(isFactory, (name) => {
  	result.queryList.forEach((query) => {
  	if (query.kind === 'call-expression') {
  	const map = query.box.value[0]
  	const boxNode = box.isMap(map) ? map : fallback(query.box)
  	// ensure that data is always an object
  	const result = { name, box: boxNode, data: combineResult(unbox(boxNode)) } as ResultItem
  	// PropertyAccess factory inline recipe
  	// panda.span({ base: {}, variants: { ... } })
  	if (box.isMap(map) && isCva(map.value)) {
  	collector.setCva(result)
  	} else {
  	// PropertyAccess factory css
  	// panda.span({ ... })
  	collector.set('css', result)
  	}
  	} else if (query.kind === 'tagged-template') {
  	const obj = astish(query.box.value as string)
  	collector.set('css', {
  	name,
  	box: query.box ?? fallback(query.box),
  	data: [obj],
  	})
  	}
  	})
  	})
  	.otherwise(() => {
  	//
  	})
  	//
  	} else if (result.kind === 'component') {
  	//
  	result.queryList.forEach((query) => {
  	//
  	const data = combineResult(unbox(query.box))
  	match(name)
  	.when(isFactory, (name) => {
  	collector.setJsx({ name, box: query.box, type: 'jsx-factory', data })
  	})
  	.when(
  	(name) => jsxPatternNodes.test(name),
  	(name) => {
  	collector.setPattern(name, { type: 'jsx-pattern', name, box: query.box, data })
  	},
  	)
  	.when(isJsxTagRecipe, (name) => {
  	const recipeList = getRecipesByJsxName(name)
  	recipeList.map((recipe) => {
  	collector.setRecipe(recipe.name, { type: 'jsx-recipe', name, box: query.box, data })
  	})
  	})
  	.otherwise(() => {
  	collector.setJsx({ name, box: query.box, type: 'jsx', data })
  	})
  	})
  	}
  	})
  	return collector

• process those style objects depending on their kind (css/cva/recipe/pattern)
  

  panda/packages/generator/src/artifacts/css/parser-css.ts

  Lines 12 to 79 in e49e67d

  	result.css.forEach((css) => {
  	css.data.forEach((data) => {
  	sheet.processAtomic(data)
  	})
  	})
  	result.cva.forEach((cva) => {
  	cva.data.forEach((data) => {
  	sheet.processAtomicRecipe(data)
  	})
  	})
  	result.jsx.forEach((jsx) => {
  	jsx.data.forEach((data) => {
  	sheet.processStyleProps(data)
  	})
  	})
  	result.recipe.forEach((recipeSet, name) => {
  	try {
  	for (const recipe of recipeSet) {
  	const recipeConfig = recipes.getConfig(name)
  	if (!recipeConfig) continue
  	match(recipe)
  	// treat recipe jsx like regular recipe + atomic
  	.with({ type: 'jsx-recipe', name: P.string }, ({ name }) => {
  	recipe.data.forEach((data) => {
  	const [recipeProps, styleProps] = recipes.splitProps(name, data)
  	sheet.processStyleProps(styleProps)
  	sheet.processRecipe(recipeConfig, recipeProps)
  	})
  	})
  	.otherwise(() => {
  	recipe.data.forEach((data) => {
  	sheet.processRecipe(recipeConfig, data)
  	})
  	})
  	}
  	} catch (error) {
  	logger.error('serializer:recipe', error)
  	}
  	})
  	result.pattern.forEach((patternSet, name) => {
  	try {
  	for (const pattern of patternSet) {
  	match(pattern)
  	// treat pattern jsx like regular pattern
  	.with({ type: 'jsx-pattern', name: P.string }, ({ name }) => {
  	pattern.data.forEach((data) => {
  	const fnName = patterns.getFnName(name)
  	const styleProps = patterns.transform(fnName, data)
  	sheet.processStyleProps(styleProps)
  	})
  	})
  	.otherwise(() => {
  	pattern.data.forEach((data) => {
  	const styleProps = patterns.transform(name, data)
  	sheet.processAtomic(styleProps)
  	})
  	})
  	}
  	} catch (error) {
  	logger.error('serializer:pattern', error)
  	}
  	})
  	}),

finally, the internal process function that converts from a style object to the equivalent CSS is mostly here

panda/packages/core/src/atomic-rule.ts

Lines 48 to 112 in e49e67d

	process = (options: ProcessOptions) => {
	const { styles } = options
	const { conditions: cond } = this.context
	const styleObject = normalizeStyleObject(styles, this.context)
	// shouldn't happen, but just in case
	if (typeof styleObject !== 'object') return
	const rule = this.rule
	walkObject(styleObject, (value, paths) => {
	// if value doesn't exist
	if (value == null) return
	const important = isImportant(value)
	// conditions.shift was done to support condition groups
	const [prop, ...allConditions] = cond.shift(paths)
	// remove default condition
	const conditions = filterBaseConditions(allConditions)
	// allow users transform the generated class and styles
	const transformed = this.transform(prop, withoutImportant(value))
	// convert css-in-js to css rule
	const cssRoot = toCss(transformed.styles, { important })
	rule.nodes = cssRoot.root.nodes
	// no empty rulesets
	if (rule.isEmpty) return
	const selector = this.hashFn(conditions, transformed.className)
	rule.selector = important ? `.${selector}\\!` : `.${selector}`
	rule.update()
	// apply css conditions
	rule.applyConditions(conditions)
	// append the rule to the root
	if (transformed.layer) {
	// if layer is specified, create a new root with the layer name
	const atRule = postcss.atRule({
	name: 'layer',
	params: transformed.layer,
	nodes: [rule.rule!],
	})
	this.root.append(atRule)
	//
	} else {
	this.root.append(rule.rule!)
	}
	})
	if (this.root.nodes.length === 0) return
	const atRule = postcss.atRule({
	name: 'layer',
	params: this.layer,
	nodes: [this.root],
	})
	this.context.root.append(atRule)

I'm wondering if that step can be sped up

isn't it fast enough ? you can run the panda command with the env var PANDA_DEBUG=* pnpm panda to see the timings, you could use the panda analyze --json report.json command to get a JSON output with those timings, the unit is in milliseconds

{
  "duration": {
    "extractTimeByFiles": {
      "/Users/astahmer/dev/open-source/panda/sandbox/vite-ts/src/App.tsx": 9.364959001541138,
      "/Users/astahmer/dev/open-source/panda/sandbox/vite-ts/src/Badge.tsx": 0.6717090606689453,
      "/Users/astahmer/dev/open-source/panda/sandbox/vite-ts/src/Button.tsx": 1.7605409622192383,
      "/Users/astahmer/dev/open-source/panda/sandbox/vite-ts/src/Card.tsx": 0.9269590377807617,
      "/Users/astahmer/dev/open-source/panda/sandbox/vite-ts/src/main.tsx": 0.30408310890197754
    },
    "extractTotal": 13.02825117111206,
    "classify": 2.472208023071289
  },

Perhaps the utility functions could import a virtual module from the postcss plugin to register CSS during the macro expansion?

sorry, I'm not sure what this means 😭 can you show me an example ?

This doesn't seem to be happening (in time?), I had to configure the stackblitz to run it before the npm start.

i'll check that asap

[wmertens]

isn't it fast enough ?

Well if I see an optimization opportunity I can't not think about it :-) Suppose you have a big project with 100 big source files, 10ms per file would mean an extra second of build time.
Ok, the extract time seems not too bad. :)

Perhaps the utility functions could import a virtual module from the postcss plugin to register CSS during the macro expansion?
sorry, I'm not sure what this means 😭 can you show me an example ?

Hmm, so in vite each import goes through resolveId/load/transform. Vite plugins can intercept these steps to do their thing. The styled-system utils could import "\0panda-register" which would be intercepted by the pandacss plugin to somehow store the required CSS during the macro run. But that's probably way too many moving parts to keep working reliably.

Thanks for all the explanations!

[masylum]

I still see this issue. If I use the JSX components it does work, but using the pattern functions it does not.

[strvbkzhn]

I've also spend some time with this today

<Stack direction="vertical"  // doesn't works
<Stack direction="column"    // works fine

however in docs said that

[cs-clarence]

issue still persists, no problem in linux but windows has problems