chakra-ui / panda Goto Github PK

View Code? Open in Web Editor NEW

4.7K 17.0 204.0 26.09 MB

🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️

Home Page: https://panda-css.com

License: MIT License

TypeScript 83.81% HTML 0.04% CSS 0.64% JavaScript 3.06% Astro 0.25% Vue 0.05% Svelte 0.01% MDX 12.13%

css styled-system typescript utility-classes design-system framework-agnostic postcss atomic-css css-in-js engine

panda's Introduction

Panda is a universal styling solution for the modern web —
build time, type safe, and scalable CSS-in-JS

Features

⚡️ Write style objects or style props, extract them at build time
✨ Modern CSS output — cascade layers @layer, css variables and more
🦄 Works with most JavaScript frameworks
🚀 Recipes and Variants - Just like Stitches™️ ✨
🎨 High-level design tokens support for simultaneous themes
💪 Type-safe styles and autocomplete (via codegen)

🐼 Get a taste of Panda. Try it out for yourself in StackBlitz

Documentation

Visit our official documentation.

Install

The recommended way to install the latest version of Panda is by running the command below:

npm i -D @pandacss/dev

To scaffold the panda config and postcss

npx panda init -p

Setup and import the entry CSS file

@layer reset, base, tokens, recipes, utilities;

import 'path/to/entry.css'

Start the dev server of your project

npm run dev

Start using panda

import { css } from '../styled-system/css'
import { stack, vstack, hstack } from '../styled-system/patterns'

function Example() {
  return (
    <div>
      <div className={hstack({ gap: '30px', color: 'pink.300' })}>Box 1</div>
      <div className={css({ fontSize: 'lg', color: 'red.400' })}>Box 2</div>
    </div>
  )
}

Directory Structure

Package	Description
cli	CLI package installed by the end user
core	Contains core features of Panda (utility, recipes, etc)
config	Contains functions for reading and merging the panda config
extractor	Contains code for fast AST parsing and scanning
generator	Contains codegen artifacts (js, css, jsx)
parser	Contains code for parsing a source code
is-valid-prop	Contains code for checking if a prop is a valid css prop
node	Contains the Node.js API of Panda's features
token-dictionary	Contains code used to process tokens and semantic tokens
shared	Contains shared TS functions

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

Want to help improve the docs?

Our docsite lives in the monorepo.

If you're interested in contributing to the documentation, check out the contributing guide.

Support

Having trouble? Get help in the official Panda Discord.

Acknowledgement

The development of Panda was only possible due to the inspiration and ideas from these amazing projects.

Chakra UI - where it all started
Vanilla Extract - for inspiring the utilities API
Stitches - for inspiring the recipes and variants API
Tailwind CSS - for inspiring the JIT compiler and strategy
Class Variance Authority - for inspiring the cva name
Styled System - for the initial idea of Styled Props
Linaria - for inspiring the initial atomic css strategy
Uno CSS - for inspiring the studio and astro integration
Goober - for tiny and performant js functions in template literal styles

License

panda's People

Contributors

Stargazers

Watchers

Forkers

ruckonic yannbirba selemondev hiroppy aurorasparkdev builderio kocal dhananjay-jsr jreinhold yasnbouz miyakei1225 wobsoriano kigenchesire themosaad simonswiss zuixinwang makotot jrcribb willnguyen1312 richardsonjf lachlanjc katungi jiaxu35 dcheglakov blechatellier josegron ten966933 konomae asapo d-lite app-creative cijiugechu spaceblocks ihiutch khayoon qin-guan pawelblaszczyk5 yhor1e mzaien shakvilla ooade fairhopeweb mrskiro sezeranojchrisostome ashernguyen baobao802 kidjp85 markelarizaga beemargarida axelfriberg faithfinder fredericoo ding-fan erm1116 yumin-chen altano snowball-tech custardcream98 lalexdotcom ekusiadadus sonofmagic majdimokhtar hideoo mayteio thedanchez plbstl strategy-tap bharat5604 ashish-simplecoder derekrmiller franmc01 min5407 coopbri dwager13 zmx0623 balaji-sivasakthi jeiea thejackshelton victor-cody mheob weiplanet 0xforked guayaguagua2 bonnie flower-f badalsaibo hatchling13 raphaelcunha harshan89 codedebug pleclech omridevk damouu loggingco isbatak folafunmi-db brendon1555 0o001 poiu694 firzanarmani

panda's Issues

Breakpoints starting with a number aren't working (2xl, etc)

Description

When I use 2xl breakpoint, I expect my styles to render, but instead my 2xl breakpoint styles are never rendered

https://stackblitz.com/edit/stackblitz-starters-3siapy?file=pages%2Findex.js

Link to Reproduction

https://stackblitz.com/edit/stackblitz-starters-3siapy?file=pages%2Findex.js

Steps to reproduce

Add styles to a break point starting with a number (2xl, 3xl, etc)
Can be within a style attribute or breakpoint attribute

className={css({
  bg: {
    '2xl': 'orange.500',
  },
})}
// or
className={css({
  '2xl: {
    bg: 'orange.500',
  },
})}

Styles never render at specified breakpoint, although you can see them generated in your CSS

@media screen and (min-width: 1536px) {
    .\2xl\:bg_orange\.500 {
      background: var(--colors-orange-500)
    }
}

JS Framework

React

Panda CSS Version

0.4.0

Browser

Brave Version 1.52.126 Chromium: 114.0.5735.133 (Official Build) (arm64)

Operating System

macOS
Windows
Linux

Additional Information

For what its worth, I checked out how Tailwind handles this and it prefixes a 3 to the style name. Not sure why, though.

@media (min-width: 1536px) {
  .\32xl\:bg-orange-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 146 60 / var(--tw-bg-opacity));
  }
}

lineClamp with values `1`,`2`,1 & 2 not working as expected

Description

Hello,

So I was testing lineClamp in panda and when I provide both 1 and 2 as number or even string, the values are bing translated to 1px or 2px, the expected behaviour is to be just a number.

Link to Reproduction

Steps to reproduce

Check styled.p component

JS Framework

React TS

Panda CSS Version

0.4.0

Browser

Latest

Operating System

macOS
Windows
Linux

Additional Information

No response

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): update dependency ts-pattern to v5

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

chore(deps): update dependency @types/react to v18.2.12
chore(deps): update dependency vitest to v0.32.0
chore(deps): update dependency mime to v3 (mime, @types/mime)
chore(deps): update dependency npm-packlist to v7 (npm-packlist, @types/npm-packlist)

Detected dependencies

docker-compose

playground/docker-compose.yml

mariadb 10.8.2-focal

github-actions

.github/composite-actions/install/action.yml

pnpm/action-setup v2.2.4

actions/setup-node v3

.github/workflows/extension.yml

actions/checkout v3

.github/workflows/quality.yml

actions/checkout v3

actions/checkout v3

actions/checkout v3

actions/checkout v3

.github/workflows/release.yml

actions/checkout v3

changesets/action v1

npm

extension/language-server/package.json

fast-glob ^3.2.12

@types/base-64 ^1.0.0

@types/node 20.3.1

@types/utf8 ^3.0.1

base-64 ^1.0.0

color2k ^2.0.2

lil-fp 1.4.5

postcss ^8.4.24

prettier ^2.8.8

satori ^0.10.1

ts-morph 18.0.0

ts-pattern 4.3.0

tsup 6.7.0

typescript ^5.1.3

utf8 ^3.0.0

vscode-languageserver ^8.1.0

vscode-languageserver-textdocument ^1.0.8

vscode-uri ^3.0.7

extension/shared/package.json

tsup 6.7.0

typescript ^5.1.3

extension/ts-plugin/package.json

typescript ^5.1.3

extension/vscode/package.json

@pnpm/find-workspace-dir ^6.0.2

@pnpm/find-workspace-packages ^6.0.9

@types/node 20.3.1

@types/vscode ^1.79.0

@vscode/vsce ^2.19.0

dotenv ^16.1.4

execa 7.1.1

fs-extra 11.1.1

semver ^7.5.1

tsup 6.7.0

typescript ^5.1.3

vscode ^1.1.37

vscode-languageclient ^8.1.0

vscode ^1.78.2

extension/vsix-builder/package.json

@npmcli/arborist ^6.2.9

@pnpm/cli-utils ^2.0.10

@pnpm/config ^18.4.1

@pnpm/error ^5.0.2

@pnpm/exportable-manifest ^5.0.3

@pnpm/logger ^5.0.0

@pnpm/package-bins ^8.0.1

@pnpm/types ^9.1.0

@types/hosted-git-info ^3.0.2

@types/markdown-it ^12.2.3

@types/yazl ^2.4.2

cac 6.7.14

cheerio 1.0.0-rc.12

fast-glob ^3.2.12

hosted-git-info ^6.1.1

markdown-it ^13.0.1

mime ^1.3.4

npm-packlist ^5.1.3

parse-semver ^1.1.1

read ^2.1.0

semver ^7.5.1

tar-stream ^3.0.0

url-join ^5.0.0

xml2js ^0.6.0

yauzl ^2.10.0

yazl ^2.5.1

@types/mime ^1

@types/npm-packlist ^3.0.0

@types/read ^0.0.29

@types/tar-stream ^2.2.2

@types/xml2js ^0.4.11

@types/yauzl ^2.10.0

tsup 6.7.0

typescript ^5.1.3

package.json

@changesets/changelog-github 0.4.8

@changesets/cli 2.26.1

@types/node 20.3.1

@typescript-eslint/eslint-plugin 5.59.11

@typescript-eslint/parser 5.59.11

concurrently ^8.2.0

husky 8.0.3

lint-staged 13.2.2

prettier 2.8.8

ts-morph 18.0.0

tsup 6.7.0

tsx 3.12.7

typescript 5.1.3

vitest 0.31.4

vite-tsconfig-paths 4.2.0

mdx-local-link-checker ^2.1.1

pnpm 8.6.2

packages/astro/package.json

autoprefixer ^10.4.14

postcss ^8.4.24

postcss-load-config ^4.0.1

astro 2.6.3

vite ^4.3.9

astro >=2.x

packages/cli/package.json

cac 6.7.14

@types/update-notifier 6.0.4

kleur 4.1.5

update-notifier 6.0.2

packages/config/package.json

bundle-n-require ^1.0.1

escalade 3.1.1

jiti ^1.18.2

merge-anything ^5.1.7

tsconfck ^2.1.1

pkg-types 1.0.3

packages/core/package.json

camelcase-css ^2.0.1

hookable 5.5.3

postcss 8.4.24

postcss-nested 6.0.1

postcss-discard-empty ^6.0.0

postcss-normalize-whitespace ^6.0.0

postcss-discard-duplicates ^6.0.0

postcss-merge-rules ^6.0.1

postcss-selector-parser ^6.0.13

autoprefixer 10.4.14

ts-pattern 4.3.0

lodash.merge 4.6.2

@types/lodash.merge 4.6.7

packages/error/package.json

packages/extractor/package.json

lil-fp 1.4.5

ts-evaluator ^1.1.0

ts-morph 18.0.0

ts-pattern 4.3.0

packages/fixture/package.json

packages/generator/package.json

javascript-stringify 2.1.0

lil-fp 1.4.5

outdent ^0.8.0

pluralize 8.0.0

postcss 8.4.24

ts-pattern 4.3.0

@types/pluralize 0.0.29

packages/is-valid-prop/package.json

mdn-data ^2.0.32

packages/logger/package.json

kleur ^4.1.5

lil-fp 1.4.5

matcher 5.0.0

packages/node/package.json

chokidar ^3.5.3

fast-glob ^3.2.12

file-size ^1.0.0

filesize ^10.0.7

fs-extra 11.1.1

glob-parent ^6.0.2

hookable 5.5.3

is-glob ^4.0.3

lil-fp 1.4.5

lodash.merge 4.6.2

look-it-up 2.1.0

outdent ^0.8.0

pkg-types 1.0.3

pluralize 8.0.0

postcss 8.4.24

preferred-pm ^3.0.3

ts-morph 18.0.0

ts-pattern 4.3.0

@types/fs-extra 11.0.1

@types/glob-parent ^5.1.1

@types/is-glob ^4.0.2

@types/lodash.merge 4.6.7

@types/pluralize 0.0.29

boxen ^7.1.0

packages/parser/package.json

lil-fp 1.4.5

ts-morph 18.0.0

ts-pattern 4.3.0

packages/postcss/package.json

postcss ^8.4.24

packages/preset-atlaskit/package.json

@atlaskit/tokens 1.5.2

packages/preset-base/package.json

packages/preset-panda/package.json

packages/shared/package.json

packages/studio/package.json

@ark-ui/react 0.6.0

@astrojs/react 2.2.1

astro 2.6.3

javascript-stringify 2.1.0

react 18.2.0

react-dom 18.2.0

vite 4.3.9

@types/react 18.2.12

@types/react-dom 18.2.5

@vitejs/plugin-react 4.0.0

execa 7.1.1

packages/token-dictionary/package.json

ts-pattern 4.3.0

packages/types/package.json

chokidar-cli ^3.0.0

csstype 3.1.2

playground/package.json

@ark-ui/react 0.6.0

@monaco-editor/react 4.5.1

@next/font 13.4.5

@prisma/client 4.15.0

@textea/json-viewer 3.0.0

merge-anything 5.1.7

monaco-editor 0.39.0

nanoid 4.0.2

next 13.4.5

os-browserify 0.3.0

path-browserify 1.0.1

prettier 2.8.8

prism-react-renderer 2.0.5

prisma 4.15.0

react 18.2.0

react-dom 18.2.0

react-frame-component 5.2.6

react-live 4.1.3

ts-pattern 4.3.0

typescript 5.1.3

usehooks-ts 2.9.1

util 0.12.5

zod 3.21.4

@types/node 20.3.1

@types/prettier 2.7.3

@types/react 18.2.12

@types/react-dom 18.2.5

eslint 8.42.0

eslint-config-next 13.4.5

sandbox/astro/package.json

@astrojs/solid-js 2.2.0

astro 2.6.3

solid-js 1.7.6

sandbox/gatsby-ts/package.json

gatsby ^5.10.0

gatsby-plugin-postcss ^6.10.0

postcss ^8.4.24

react ^18.2.0

react-dom ^18.2.0

@types/node ^20.3.1

@types/react ^18.2.12

@types/react-dom ^18.2.5

typescript ^5.1.3

sandbox/next-js-app/package.json

@types/node 20.3.1

@types/react 18.2.12

@types/react-dom 18.2.5

eslint 8.42.0

eslint-config-next 13.4.5

next 13.4.5

react 18.2.0

react-dom 18.2.0

typescript 5.1.3

sandbox/next-js-pages/package.json

@types/node 20.3.1

@types/react 18.2.12

@types/react-dom 18.2.5

eslint 8.42.0

eslint-config-next 13.4.5

next 13.4.5

react 18.2.0

react-dom 18.2.0

typescript 5.1.3

sandbox/nuxt/package.json

postcss 8.4.24

nuxt ^3.5.3

sandbox/preact-ts/package.json

preact ^10.15.1

@preact/preset-vite 2.5.0

typescript 5.1.3

vite 4.3.9

sandbox/qwik-ts/package.json

@builder.io/qwik ^1.1.5

@builder.io/qwik-city ^1.1.5

@types/eslint 8.40.2

@types/node ^20.3.1

@typescript-eslint/eslint-plugin 5.59.11

@typescript-eslint/parser 5.59.11

eslint 8.42.0

eslint-plugin-qwik ^1.1.5

prettier 2.8.8

typescript 5.1.3

undici 5.22.1

vite 4.3.9

vite-tsconfig-paths 4.2.0

node >=15.0.0

sandbox/remix/package.json

@remix-run/node ^1.17.0

@remix-run/react ^1.17.0

@remix-run/vercel ^1.17.0

@vercel/node ^2.15.1

react ^18.2.0

react-dom ^18.2.0

@remix-run/dev ^1.17.0

@remix-run/eslint-config ^1.17.0

@remix-run/serve ^1.17.0

@types/react ^18.2.12

@types/react-dom ^18.2.5

eslint ^8.42.0

postcss ^8.4.24

typescript ^5.1.3

node >=14

sandbox/solid-ts/package.json

solid-js ^1.7.6

typescript ^5.1.3

vite ^4.3.9

vite-plugin-solid ^2.7.0

sandbox/storybook/package.json

react ^18.2.0

react-dom ^18.2.0

@babel/core ^7.22.5

@storybook/addon-actions ^7.0.20

@storybook/addon-essentials ^7.0.20

@storybook/addon-interactions ^7.0.20

@storybook/addon-links ^7.0.20

@storybook/addon-styling ^1.3.0

@storybook/react ^7.0.20

@storybook/react-webpack5 ^7.0.20

babel-loader ^9.1.2

postcss 8.4.24

storybook ^7.0.20

sandbox/svelte/package.json

@sveltejs/adapter-auto ^2.1.0

@sveltejs/kit ^1.20.2

@typescript-eslint/eslint-plugin ^5.59.11

@typescript-eslint/parser ^5.59.11

eslint ^8.42.0

eslint-config-prettier ^8.8.0

eslint-plugin-svelte3 ^4.0.0

postcss ^8.4.24

prettier ^2.8.8

prettier-plugin-svelte ^2.10.1

svelte ^3.59.1

svelte-check ^3.4.3

tslib ^2.5.3

typescript ^5.1.3

vite ^4.3.9

postcss-load-config ^4.0.1

svelte-preprocess ^5.0.4

autoprefixer ^10.4.14

sandbox/vite-ts/package.json

react ^18.2.0

react-dom ^18.2.0

@types/react 18.2.12

@types/react-dom 18.2.5

@vitejs/plugin-react 4.0.0

postcss 8.4.24

typescript 5.1.3

vite 4.3.9

website/package.json

@ark-ui/react 0.6.0

bright ^0.8.2

flexsearch ^0.7.31

focus-visible ^5.2.0

git-url-parse ^13.1.0

intersection-observer ^0.12.2

match-sorter ^6.3.1

next 13.4.5

next-seo ^6.0.0

next-themes ^0.2.1

nextra ^2.7.1

outdent ^0.8.0

react ^18.2.0

react-dom ^18.2.0

react-fast-marquee ^1.6.0

scroll-into-view-if-needed ^3.0.10

zod ^3.21.4

@types/react ^18.2.12

autoprefixer ^10.4.14

postcss ^8.4.24

prettier ^2.8.8

Check this box to trigger a request for Renovate to run again on this repository

Can't remove default patterns, conditions and utilities

Description

Hello,
First and foremost - PandaCSS is sooooo awesome, amazing work ♥️

I feel like that if I'm not using extends key in config it should overwrite the defaults - and it seems to work like this for e.g. tokens inside of theme. However, it doesn't seem to work with patterns, conditions and utilities, I've tried a few ways and the defaults are always available. Setting presets to an empty array also don't remove all the defaults.

Is there a way to remove these defaults so I can tailor them exactly to my needs?

Link to Reproduction

https://github.com/pawelblaszczyk5/next-playground-panda-css/tree/153b1cdf1d25ac7205afcb3339d83eb8318454da

Steps to reproduce

Go to panda.config.ts
Set conditions/utilities or patterns to an empty object or create only one entry
Run codegen
Observe default conditions/utilities/patterns still being generated

JS Framework

n/a

Panda CSS Version

0.3.1

Browser

n/a

Operating System

macOS
Windows
Linux

Additional Information

No response

Is there a way to dynamically change values similar to ThemeProvider in styled-components?

Subject

topic

Description

To dynamically change values similar to ThemeProvider in styled-components, what is the best approach in Panda CSS?

Property 'as' does not exist on type 'IntrinsicAttributes & Omit<HTMLStyledProps<"div">, never>'

Description

When I use the Box compoent with the as prop, it works fine and the generated html is correct.

but the types are complaing about the as does not exist on the types

I provide a codesandbox but it does not complain about it, but if you run the repo locally you would see the problem.

Link to Reproduction

https://codesandbox.io/p/github/omarkhatibco/pandacss-test/main?workspaceId=9697a97a-26fa-48c7-8b1a-0cc811dc4d21

Steps to reproduce

Check the Box component inside the App.tsx

JS Framework

React (TS)

Panda CSS Version

0.3.2

Browser

Latest

Operating System

macOS
Windows
Linux

Additional Information

No response

Inconsistency in strictTokens mode

Description

When having config.StrictTokens: true, adding an invalid value for borderTopRadius doesn't error. However, adding an invalid value for borderBottomLeftRadius errors.

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-c4cjhy?file=src%2FApp.tsx

Steps to reproduce

See App.tsx in the reproduction link.

JS Framework

Vite (TS)

Panda CSS Version

0.4.0

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

[perf]: replacing postcss with lightningcss

the next big improvement that we can have performance-wise would be to replace postcss with lightningcss

panda currently uses those postcss plugins:

"autoprefixer": "10.4.14",
"postcss": "8.4.23",
"postcss-discard-duplicates": "^6.0.0",
"postcss-discard-empty": "^6.0.0",
"postcss-merge-rules": "^6.0.0",
"postcss-nested": "6.0.1",
"postcss-normalize-whitespace": "^6.0.0",
"postcss-selector-parser": "^6.0.11",

using lightningcss we:

CAN safely remove

✅ autoprefixer

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.

we could replace it using postcss-lightningcss, it's explicitly listed in this list of postcss plugins that can be replaced

✅ postcss-normalize-whitespace

Normalize whitespace with PostCSS.

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22source%22%3A%22h1%7B%5Cn%20%20%20%20width%3A%20calc(10px%20-%20(%20100px%20%2F%20var(--test)%20))%20%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

✅ postcss-discard-duplicates

Discard duplicate rules in your CSS files with PostCSS.

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22source%22%3A%22h1%20%7B%5Cn%20%20%20%20margin%3A%200%20auto%3B%5Cn%20%20%20%20margin%3A%200%20auto%5Cn%7D%5Cn%5Cnh1%20%7B%5Cn%20%20%20%20margin%3A%200%20auto%5Cn%7D%5Cn%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

🚧❕ can MAYBE safely remove

🚧❕ postcss-merge-rules

Merge CSS rules with PostCSS.

✅ By declarations

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22source%22%3A%22a%20%7B%5Cn%20%20%20%20color%3A%20blue%3B%5Cn%20%20%20%20font-weight%3A%20bold%5Cn%7D%5Cn%5Cnp%20%7B%5Cn%20%20%20%20color%3A%20blue%3B%5Cn%20%20%20%20font-weight%3A%20bold%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

✅ By selectors

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22source%22%3A%22a%20%7B%5Cn%20%20%20%20color%3A%20blue%5Cn%7D%5Cn%5Cna%20%7B%5Cn%20%20%20%20font-weight%3A%20bold%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

🚧❕ By partial declarations

the output isn't exactly the same, it will have the same result tho

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22source%22%3A%22a%20%7B%5Cn%20%20%20%20font-weight%3A%20bold%5Cn%7D%5Cn%5Cnp%20%7B%5Cn%20%20%20%20color%3A%20blue%3B%5Cn%20%20%20%20font-weight%3A%20bold%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

🚧❕ postcss-selector-parser

Selector parser with built in methods for working with selector strings.

I think we can achieve the same traversal/parsing using the lightningcss transform API

🚧❕ postcss-nested

PostCSS plugin to unwrap nested rules closer to Sass syntax.

maybe we could replace it with postcss-nesting
the difference is:

postcss-nested use Sass syntax.
postcss-nesting uses syntax from CSS Nested spec draft

and then postcss-nesting could be replaced using postcss-lightningcss, it's explicitly listed in this list of postcss plugins that can be replaced

can NOT safely remove

❌ postcss-discard-empty

Discard empty rules and values with PostCSS.

It throws this error: /* ERROR: Unexpected token Semicolon */

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Atrue%2C%22nesting%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22source%22%3A%22%40font-face%3B%5Cnh1%20%7B%7D%5Cn%7Bcolor%3Ablue%7D%5Cnh2%20%7Bcolor%3A%7D%5Cnh3%20%7Bcolor%3Ared%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

but I think this also could be done using the transform API

Svelte extraction doesn't include context module script

Description

In Svelte there is a concept of additional block of script, that is shared between component instances (https://svelte.dev/docs/svelte-components#script-context-module). It seems like extraction doesn't include the styles declared through this script. I copied yours Svelte sandbox and added my simple example.

Link to Reproduction

https://github.com/pawelblaszczyk5/svelte-panda-repro

Steps to reproduce

Clone the repository
Run it
Go to the default +page.svelte file
See that last styles aren't applied

JS Framework

Svelte (TS)

Panda CSS Version

0.4.0

Browser

n/a

Operating System

macOS
Windows
Linux

Additional Information

No response

Missing Vue getting started?

Discussed in #759

^{Originally posted by wobsoriano June 20, 2023}
Is it just me, or the Vue item in Getting Started is missing?

If you navigate directly to https://panda-css.com/docs/getting-started/vue, you can see it working.

Fallback styles don't work as I expected

Description

This wasn't anywhere I could find in the docs, but it does seem to generally work how I think they would based on vanilla-extract, so maybe I don't understand the logic.

If I do this:

import { css } from 'styled-system/css'

export const App = () => {
  return (
    <>
      <button
        className={css({
          bg: 'red.400',
          height: ['dvh', '100vh']
        })}
      >
        Hello world
      </button>
    </>
  )
}

I'd expect that the height would be 1dvh, but then fall back to 100vh if dvh isn't supported. Unfortunately, what actually seems to happen is that the 100vh is being wrapped in a media query, whereas dvh isn't, and the style becomes 100vh probably due to specificity.

Not what I expected.

Link to Reproduction

https://play.panda-css.com/Pj3J55HixH

Steps to reproduce

Look at the repro and the resulting styles

JS Framework

N/A, but I use NextJS with TypeScript

Panda CSS Version

0.5.0

Browser

Chrome

Operating System

macOS
Windows
Linux

Additional Information

No response

Invalid CSS when extending theme with semanticTokens

Description

Currently Panda produces invalid CSS when extending the theme with semanticTokens, which results in unusable tokens.

e.g. my theme looks like this:

  theme: {
    extend: {
      semanticTokens: defineSemanticTokens({
        colors: {
          customRed: {
            value: { _base: '{colors.red.800}', _dark: '{colors.red.200}' },
          },
        },
      }),
    },
  },

then the last lines of the output CSS in styled-system/tokens/index.css looks like this:

  ...
  --colors-color-palette-500: var(--colors-color-palette-500);
  --colors-color-palette-600: var(--colors-color-palette-600);
  --colors-color-palette-700: var(--colors-color-palette-700);
  --colors-color-palette-800: var(--colors-color-palette-800);
  --colors-color-palette-900: var(--colors-color-palette-900)
}

{
  --colors-custom-red: #991b1b
}

.dark {
  --colors-custom-red: #fecaca
}
  }

Thank you so much for creating Panda, this is just awesome!

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-1z5hns?file=panda.config.ts

Steps to reproduce

Go to '...'
Click on '...'
Scroll down to '...'
See error

JS Framework

No response

Panda CSS Version

0.3.2

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

Support multiple JSX Frameworks at the same time

Description

Supporting multiple JSX frameworks at the same time can be useful in cases like Astro.

Problem Statement/Justification

I have a component written in React and another in Solid, displayed on the same page using Astro.
I would still like to use Panda JSX components in both Frameworks.
Right now it's only easily possible to have the JSX components work for eighter react or solid, not both at the same time.

Proposed Solution or API

allow the jsxFramework config option to accept arrays aswell

export default defineConfig({
	// [...]
	jsxFramework: ["react", "solid"]
})

then generate folder structure like so:
styled-system/react-jsx
styled-system/solid-jsx

usage would then look like this:

// solid
import { Box } from "../styled-system/solid-jsx"

export default function Solid() {
  return <Box bg="green">Hello from Solid</Box>
}

// react
import { Box } from '../styled-system/react-jsx'

const React: React.FC = () => {
  return <Box bg="blue">Hello from React</Box>
}
export default React

Alternatives

No response

Additional Information

No response

Top-level README.md still mentions Astro

Description

From the top-level README (emphasis mine):

The recommended way to install the latest version of Astro is by running the command below:

Link to Reproduction

https://raw.githubusercontent.com/chakra-ui/panda/main/README.md

Steps to reproduce

Go to '...'
Click on '...'
Scroll down to '...'
See error

JS Framework

No response

Panda CSS Version

latest

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

AspectRatio still does not apply the ratio value

Description

Hey again,

I just tried the new AspectRatio pattern after the last bug, right now only the paddingBottom value is not working.

it works if I don't provide a value and it use the default one 4 / 3 but when I provide something else such as 16 / 9 or even 1 / 2, I see the generated class but it does not apply for some reason

Link to Reproduction

Steps to reproduce

Check the generated classes

JS Framework

React (TS)

Panda CSS Version

0.4.0

Browser

Latest

Operating System

macOS
Windows
Linux

Additional Information

No response

Utility focus ring not working

Description

I tried to create a focusRing utility like this:

focusRing: {
values: ['1px', '2px', '4px'],
shorthand: 'ring',
transform(value: string) {
return {
_focusVisible: {
outlineWidth: value,
outlineStyle: 'solid',
outlineColor: 'blue.500',
outlineOffset: value,
},
}
},
},

when I try to use it anywhere, Vscode does suggest this property. But it does not work, instead, it shows the default browser focus indicator. If I use just

_focusVisible: {
outlineWidth: '2px',
outlineStyle: 'solid',
outlineColor: 'blue.500',
},

then it works

Link to Reproduction

https://github.com/FilipePfluck/my-components

Steps to reproduce

go to globalCss.ts and try substituting the focus indicator css with the custom property ring
run storybook
see it doesn't work

JS Framework

React (TS)

Panda CSS Version

0.4.0

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

Cant install extension: Version specified in engines.vscode (*) is not specific enough.

Description

When I try to install the Panda CSS extension in VSCode I get:

Version specified in engines.vscode (*) is not specific enough. For vscode versions before 1.0.0, please define at a minimum the major and minor desired version. E.g. ^0.10.0, 0.10.x, 0.11.0, etc.

Link to Reproduction

https://marketplace.visualstudio.com/items?itemName=chakra-ui.panda-css-vscode

Steps to reproduce

Go to: https://marketplace.visualstudio.com/items?itemName=chakra-ui.panda-css-vscode
Install Pre-Release Version (Release was not available at this time.)
Error.

JS Framework

No response

Panda CSS Version

N/A

Browser

VSCode

Operating System

macOS
Windows
Linux

Additional Information

No response

CSS Class Order work wrong in Recipe

Description

I created a button receipt with 2 variants: primary, text . I expected the variant primary with disabled=true will have textColor is secondary.500. But it didn't work, the textColor render is primary.500. The weird problem here is if i delete variant text or change color: 'primary.500' in variant text to another color, the problem disappeared and everything work well. I made a reproduce error at playground.

const buttonStyle = cva({
  variants: {
    variant: {
      primary: {
        color: 'primary.500',
        _disabled: { color: 'secondary.500' },
      },
      text: {
        color: 'primary.500',
         _disabled: { color: 'light.500' },
      },
    },
    disabled: {
      true: {
        cursor: 'not-allowed',
      },
    },
  },
});

Link to Reproduction

https://panda-playground.vercel.app/8aPDmwRu1-

Steps to reproduce

Go to '...'
Click on '...'
Scroll down to '...'
See error

JS Framework

React

Panda CSS Version

0.4.0

Browser

Chrome

Operating System

macOS
Windows
Linux

Additional Information

No response

Broken Link in Sidebar Leading to 404 Error

Subject

Design System

Description

Hello maintainers,

First and foremost, I want to extend my gratitude for the hard work that has been put into this project. It is really a great resource.

I have noticed an issue that I would like to bring to your attention. While it might be a minor thing, I thought it's worth reporting. In the sidebar of the documentation, there is a link which seems to be broken as it leads to a 404 page not found error.

Location: Sidebar > Guides > Design System
Link: https://panda-css.com/docs/guides/design-system

Please let me know if you need any further information or if there is anything I can do to assist in resolving this issue.

Thank you once again for your dedication to this project.

Best regards

Docs Page on Mobile Not Responsive

Description

Went to the docs page from my device and the docs sidebar covered up the contents, not a common thing with docusaurus docs.

Link to Reproduction

https://panda-css.com/docs

Steps to reproduce

Go to '...'
Click on '...'
Scroll down to '...'
See error

JS Framework

No response

Panda CSS Version

0.3.2

Browser

Brave

Operating System

macOS
Windows
Linux

Additional Information

No response

Playground doesn't match the docs import pathname

Description

import { css } from 'design-system/css';
import { grid } from 'design-system/patterns';

const Button = ({children}) => {
  return (
    <button
      className={css({
        color: 'red.400',
        padding: '10px',
        border: 'solid',
        _hover: {
          borderRadius: '50px',
          bg: 'orange.400',
          border: 'none',
          color: 'white',
          _focus: {
            color: 'black',
            letterSpacing: '10px',
          },
        },
        transition: '1s',
      })}
    >
      {children}
    </button>
  );
};

export const App = () => {
  return (
<div className={grid({ columns: 2, gap: '6' })}>
      <Button>yoyo</Button>
      <Button>YOOOOOOOw</Button>
      <Button>Hasaaa</Button>
</div>
  );
};

While I like the wording 'design-system' much better and as far as I understand this should be import { grid } from 'styled-system/patterns';

Link to Reproduction

https://panda-playground.vercel.app/bPovrTv3Lc

Steps to reproduce

import { grid } from 'styled-system/patterns' brings an error

JS Framework

React

Panda CSS Version

Playground

Browser

Arc

Operating System

macOS
Windows
Linux

Additional Information

Thanks a lot for creating Panda CSS

Styles override doesn't work properly

Description

It seems that when trying to override styles from outside a component using the cx() utility to merge internal and external classes, the ones that should override the internal ones doesn't work. It seems that if the className arrives from an external prop it doesn't work properly, but if the classNames are defined internally, it does.

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-2cufqt?file=src%2FApp.tsx,src%2FComp.tsx&terminal=dev

Steps to reproduce

Go to '...'
Click on '...'
Scroll down to '...'
See error

JS Framework

React

Panda CSS Version

0.4.0

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

Module '"styles-engine/patterns"' has no exported member 'getAspectRatioStyle'.ts(2305)

Description

In order to support the as prop locally, I have to duplicate the generated components inside my own design system, so I'm trying to use the same logic used inside the components.

the problem it seems that getAspectRatioStyle is exported but the types for that function is not, could you please export the types as well?

Problem Statement/Justification

Since the function is exported. it make more sense to make it type safe and allow up to replicate the same logic

Proposed Solution or API

adding inside the packages/generator/src/artifacts/js/pattern.ts#L62 line 62

export declare function get${upperName}Style(props?: ${upperName}Properties): SystemStyleObject

Alternatives

No response

Additional Information

No response

Invalid CSS when extending theme with semanticTokens (colors and shadows)

Description

This is related to the closed ticket #754, I'm using base and _dark keys to define the colors, however I got the same generated css variables

--colors-color-palette-0: var(--colors-color-palette-0);
  --colors-color-palette-10: var(--colors-color-palette-10);
  --colors-color-palette-20: var(--colors-color-palette-20);
  --colors-color-palette-30: var(--colors-color-palette-30);
  --colors-color-palette-40: var(--colors-color-palette-40);
  --colors-color-palette-50: var(--colors-color-palette-50);
  --colors-color-palette-60: var(--colors-color-palette-60);
  --colors-color-palette-70: var(--colors-color-palette-70);
  --colors-color-palette-80: var(--colors-color-palette-80);
  --colors-color-palette-90: var(--colors-color-palette-90);
  --colors-color-palette-95: var(--colors-color-palette-95);
  --colors-color-palette-99: var(--colors-color-palette-99);
  --colors-color-palette-100: var(--colors-color-palette-100);
...

one more thing I noticed, when using the semantic shadows with the array style, it separates the keys into multiple css vars
for example here is the shadow token

  e1: {
    value: {
      base: ['0px 1px 2px rgba(0, 0, 0, 0.3)', '0px 1px 3px 1px rgba(0, 0, 0, 0.15)'],
      _dark: ['0px 1px 3px 1px rgba(0, 0, 0, 0.15)', '0px 1px 2px rgba(0, 0, 0, 0.3)'],
    },
  },

and here is the generated css

 :where(:root, :host) {
  --shadows-e1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  ...
 }

{
  --shadows-e1: 0px 1px 2px rgba(0, 0, 0, 0.3);
}

{
  --shadows-e1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.dark {
  --shadows-e1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.dark {
  --shadows-e1: 0px 1px 2px rgba(0, 0, 0, 0.3);
}

one more thing I just noticed inside the generated index.css, that the last line of all generated css vars are missing a semicolon

Link to Reproduction

Steps to reproduce

Check generated index.ts inside token folder

JS Framework

React (TS)

Panda CSS Version

0.3.2

Browser

latest

Operating System

macOS
Windows
Linux

Additional Information

No response

staticCss failing with `<css input>:33:21: Missed semicolon` on a base setup

Description

I get an error trying to use 'staticCss' config, on a base/clean setup.

Link to Reproduction

https://github.com/rafaelchiti/pandarepo-fork

Steps to reproduce

I linked a fork of the example repo https://github.com/olafurns7/pandarepo where I simply added a staticCss config.
In that fork if you run pnpm i on the root and then pnpm panda codegen (inside packages/styled-ui). The error will show up.

But this also happens on a simple setup f.i. following https://panda-css.com/docs/getting-started/storybook
And then I add config for the 'staticCss' prop in the panda config. Like this:

import { defineConfig } from "@pandacss/dev";
export default defineConfig({
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ["./src/**/*.{js,jsx,ts,tsx}"],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {},
  },

  staticCss: {
    css: [
      {
        properties: {
          margin: ["*"],
          padding: ["*", "50px", "80px"],
        },
        responsive: true,
      },
      {
        properties: {
          color: ["*"],
          backgroundColor: ["green.200", "red.400"],
        },
        conditions: ["light", "dark"],
      },
    ],
  },

  // The output directory for your css system
  outdir: "styled-system",
  emitPackage: true,
  jsxFramework: "react",
});

When I run pnpm panda codegen I get the error:

<css input>:33:21: Missed semicolon
 ELIFECYCLE  Command failed with exit code 1.

JS Framework

React TS

Panda CSS Version

0.4.0

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

Document layerstyles

Does not integrate with meteor build system

Description

While doing the getting started integration with Meteor,I got the following error:

Error trace

=> Errors prevented startup:                  
   
   While minifying app stylesheet:
   app/styled-system/chunks/imports__ui__App.css: While loading postcss config:
   Loading PostCSS Plugin failed: Unexpected token '||='
   
   (@/Users/grubba/Desktop/work/meteor/tests/panda/postcss.config.cjs)

I was expecting to be displayed a H1 with red bg:

import React from "react";
import { css } from "/styled-system/css";
export const App = () => (
  <div>
    <h1 className={css({
      bg: 'red.400'
    })}>Welcome to Meteor!</h1>
  </div>
);

Link to Reproduction

https://github.com/Grubba27/panda

Steps to reproduce

Make sure to have Meteor CLI installed
Create a new app with meteor create app --typescript
Follow getting started from docs
run your meteor app
See error

or, you can:

Git Clone this repo
Having Meteor installed in your machine
Run meteor npm start
See error in console while building

JS Framework

MeteorJS

Panda CSS Version

0.4.0

Browser

Chromium Engine Version 114.0.5735.133 (Arc 0.108.1)

Operating System

macOS
Windows
Linux

Additional Information

I would ask where I could start to look to help solve this issue. But I'm unsure where to start. This issue can be related to how the meteor build system work as well.

Codegen fails using es5 (nextjs default)

Description

I expected to start a new nextjs project using pandacss. However, when trying to add a custom recipe and using nextjs defaults (as of v13.4.7), panda codegen fails

Transforming const to the configured target environment ("es5") is not supported yet

Link to Reproduction

https://stackblitz.com/edit/stackblitz-starters-wxqtbw?file=package.json

Steps to reproduce

Open Link
Run pnpm prepare

JS Framework

NextJS

Panda CSS Version

0.5.0

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

I'm able to bump to es6 and everything works fine. Im not sure which es versions are supported or should be supported, but I'm wondering if this just needs to be mentioned in the NextJS setup docs or if its an actual bug.

Cannot read properties of undefined (reading 'replace')

Description

I'm trying to setup Panda CSS in our company's project template that is using Vite and when I start the dev server after generating the styled system I get a lot of Cannot read properties of undefined (reading 'replace') errors to the terminal and the styles don't seem to be applied for elements that use the css() helper (see /routes/login/index.tsx).

Link to Reproduction

https://github.com/TaitoUnited/full-stack-template/tree/panda-css/client

Steps to reproduce

Go to /client folder
npm install
npm run styled-system:codegen
npm start
See error Cannot read properties of undefined (reading 'replace')
Open app in browser (should open the login page)
No styles are applied when using css() helper from Panda

JS Framework

React (TS)

Panda CSS Version

0.5.0

Browser

Google Chrome 114

Operating System

macOS
Windows
Linux

Additional Information

This is how it looks like when the dev server is started:

I tried to debug the problem with vscode's npm script debugger by running panda debug and was able to narrow the error to this line.

So for some reason the val arg is undefined. I have no idea why this error is happening and I wasn't able to reproduce it with a clean and minimal Vite project.

The current setup for Panda in the repro might differ a bit from the docs (I have the postcss plugin applied in vite.config.js instead of having a separate postcss config) since I was testing different things. However I got the same error with the exact same setup that the docs suggest.

Shouldn't what is referred to as a "semantic token" be better called an "alias token"?

Description

The term "semantic token" used in Panda CSS may not be quite accurate. This is because what is called a semantic token in Panda CSS seems to be simply an alias token.

Problem Statement/Justification

In general, semantic tokens are not necessarily aliases. Moreover, there might be cases where one would want to create non-semantic aliases. For example:

:root {
  --text-primary: #000000;
  --gray: #8E8E93;
  --grey: var(--gray);
}

Proposed Solution or API

Perhaps it would be more appropriate to rename semanticTokens to aliasTokens. For reference, the term "alias" is borrowed from Adobe Spectrum.

Alternatives

No response

Additional Information

No response

Patterns doesn't work in SvelteKit

Description

When I tried to import container pattern to the main layout (or page), I expected to see generated classes for the container, but container classes pos_relative max-w_8xl mx_auto px_4 md:px_6 lg:px_8 is not generated/extracted.

Link to Reproduction

https://stackblitz.com/edit/stackblitz-starters-bwygju?file=src%2Froutes%2F%2Blayout.svelte

Steps to reproduce

Go to home page
Check the classes on the main element in the DevTools
Notice there are styles for the container classes. No Utilities Layer, only Base, Reset etc
Try to use any pattern all of them will be without styles

JS Framework

SvelteKit (TS)

Panda CSS Version

0.3.2

Browser

Google Chrome 114

Operating System

macOS
Windows
Linux

Additional Information

No response

How does Codegen work?

Subject

Codegen

Description

The docs don't actually say anywhere how the codegen command works, just that you should refer to it for details (and there are none basically). So I was surprised that just having the codegen prepare script somehow instruments the NextJS server to actually watch for style changes and panda to regenerate code automatically. Very magical to not have to run panda --watch or anything. Would love for this to be clearer how it works.

Doesn't seem to work out of box with NextJS in a monorepo

Description

I added Panda CSS to a NextJS app in a monorepo. Code for Panda is only written in the monorepo, but styles don't seem to be applying consistently. Sometimes I could get individual css() invocations to show up, I can never get patterns like hstack() to work.

Link to Reproduction

osdiab/nextjs-panda-monorepo@20a2e33

Steps to reproduce

create turbo monorepo with pnpm
follow the panda setup instructions in the apps/web folder
add some styles to the page.tsx page
run the dev app

then you'll see

the classnames show up
the reset styles, etc are showing up
the actual styles that you insert don't show up

JS Framework

NextJS with Turborepo/pnpm workspaces

Panda CSS Version

0.5.0

Browser

Chrome

Operating System

macOS
Windows
Linux

Additional Information

No response

Unable to share when using the playground

Description

When I click the share button, nothing happens.

Chrome:

Firefox:

Link to Reproduction

n/a

Steps to reproduce

Go to 'https://play.panda-css.com/'
Edit the text so the share button activates
Click share
See error in console

JS Framework

n/a

Panda CSS Version

latest

Browser

Latest Chrome and Firefox

Operating System

macOS
Windows
Linux

Additional Information

No response

Token type does not work for globalCss

Description

In the following code such like the example from the official documentation, when specifying a token value (such as gray.900) for the value of background-color, auto-completion does not work from the type. Since the background color is reflected as specified, I believe it should be an available value. I assume this is probably the case, but is this a bug?

  globalCss: {
    'html, body': {
      backgroundColor: 'gray.900', // auto-completion does not work
      lineHeight: '1.5',
    },
  },

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-l78ege?file=panda.config.ts

Steps to reproduce

Go to '...'
Click on '...'
Scroll down to '...'
See error

JS Framework

React, Vite, TypeScript

Panda CSS Version

0.3.2

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

Reason not to use this: need to support older browsers

Subject

Reason not to use this

Description

Under the reasons not to use Panda, nothing is stated about needing to support older browsers (by older I mean browsers released before 2022, since layers themselves aren't supported there, including Safari on older iOS/Mac versions, which still has a sizable userbase). It would be good to have some documentation on what browsers are actually supported by Panda.

@pandacss/config package includes node_modules

Description

The distribution of @pandacss/config includes node_modules directory which contains preset-base and preset-panda. Those packages depend on @pandacss/types with version workspace:* and it causes the error below on npm i.

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*

ref: https://www.npmjs.com/package/@pandacss/config/v/0.3.1?activeTab=code

Link to Reproduction

https://www.npmjs.com/package/@pandacss/config/v/0.3.1?activeTab=code

Steps to reproduce

npx create-next-app@latest --use-npm
npm install -D @pandacss/dev

JS Framework

No response

Panda CSS Version

0.3.1

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

The sidebar on the document page is always open when I toggle the hamburger button

Description

The sidebar on the document page is always open when I toggle the hamburger button.
I think it's the same as #747.
The below CSS code causes this problem.

@media (prefers-reduced-motion: reduce)
.motionReduce\:transform_none {
    transform: none;
}

reproduct.mp4

I wanted to create a PR. But I couldn't think of the best way to improve it.
I think it should work whether prefers-reduced-motion is available or not.

Link to Reproduction

https://panda-css.com/docs

Steps to reproduce

Go to https://panda-css.com/docs
Toggle the hamburger button
See sidebar is alway open

JS Framework

None

Panda CSS Version

None

Browser

Chrome 1114.0.5735.130 on Android 13

Operating System

macOS
Windows
Linux

Additional Information

No response

nested `_groupHover` is not working as expected

Description

Hey,

First of all and to be honest, I'm not sure this is a bug but I will open the issue to see if this expected to work or not.

so I have a button styles with cva and the buttons has slots such as __stateLayer to maintain the background.

now what I'm trying to do is to set the opacity on groupHover to a certain value.

I see the css is generated but for some reason it's not working at all

here is the code for the cva function:

export const buttonStyle = cva({
  base: {
    position: 'relative',
    '& :is(.__stateLayer)': {
      position: 'absolute',
      inset: '0',
    },

    '& .__stateLayer': {
      opacity: {
        base: '0',
        // _hover: '0.8',
        _groupHover: '0.8',
        _groupFocusVisible: '0.90',
        _groupActive: '0.95',
      },
      bg: 'transparent',
    },
  },
  variants: {
    variant: {
      filled: {
        bgColor: 'primary',
        color: 'on.primary',
      },
      outline: {
        color: 'primary',

        '& .__stateLayer': {
          bg: 'primary',
        },
      },
    },
  },
  defaultVariants: {
    variant: 'outline',
  },
});

However setting _hover directly and then the selector works like this:

    _hover: {
      '& .__stateLayer': {
        opacity: '0.8',
      },
    },

or setting _groupHover on the span it self also works

  <styled.span
        className='__stateLayer'
        // THIS ALSO WORKS
        _groupHover={{
          opacity: '0.8',
        }}
      />

So would you say it's a bug or I'm doing some wrong inside my code?

one more general question, how would you deal with slots or parts? multiple cva functions? or the same as what I did above?

Link to Reproduction

Steps to reproduce

Check button component

JS Framework

React TS

Panda CSS Version

0.5.0

Browser

Latest

Operating System

macOS
Windows
Linux

Additional Information

No response

The extended font is placed at the end of the font list

Description

I think the reasonable result should be to place my extended font variable at the top of the list

Link to Reproduction

https://

Steps to reproduce

This is my configuration

import { preset } from '@pandacss/preset-panda'
export default defineConfig({
  presets: [preset],
  theme: { extend: { tokens: { fonts: { sans: value: ['"Inter var"'] ...
})

The result is as follows

--fonts-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 
"Inter var";

JS Framework

qwik ts

Panda CSS Version

0.3.2

Browser

Chrome

Operating System

macOS
Windows
Linux

Additional Information

No response

Divider is not visible on horizontal Mode

Description

The problem is in the CSS, we should use borderBlockEndWidth instead of borderInlineStartWidth

Link to Reproduction

Steps to reproduce

Check Divider tag

JS Framework

React (TS)

Panda CSS Version

0.3.2

Browser

latest

Operating System

macOS
Windows
Linux

Additional Information

No response

Invalid attribute name: `&>img, &>video`

Description

I'm trying to use aspectRatio function, the problem is that the engine does not recognize the custom selectors such as &>img, &>video or &>*
it works fine if I define this inside the function but not inside the patterns.

inside storybook it even did not recognize the _before condition.

Link to Reproduction

Steps to reproduce

Open codesandbox and check the console, and the classes and you would see there are no calsses generated for the video or img

JS Framework

React (TS)

Panda CSS Version

0.3.2

Browser

Latest Chrome

Operating System

macOS
Windows
Linux

Additional Information

you could activete the custom pattern and check with the &>* selector

`patterns.properties` should be optional

Description

When I add a pattern without a properties object, It errors with Cannot convert undefined or null to object

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-uvsb1f?file=panda.config.ts&terminal=dev

Steps to reproduce

Run npm run postinstall in the Stackblitz reproduction

JS Framework

Vite (ts)

Panda CSS Version

0.4.0

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

Cannot install @pandacss/dev with npm

Description

When I run

npm install -D @pandacss/dev

I get the following error

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*

Link to Reproduction

https://stackblitz.com/edit/remix-run-remix-nsqctn?file=package.json

Steps to reproduce

Follow the Getting Started with Remix using npm instead of pnpm

JS Framework

Remix (TS)

Panda CSS Version

0.3.1

Browser

N/A

Operating System

macOS
Windows
Linux

Additional Information

Node version: v18.16.0
NPM version: 9.6.7

It was installed successfully with a fresh Remix App on Stackblitz so i matched its Node and npm versions and tried again but got the same error.

Generated `jsx.d.ts` imports `Assign` from `system-types` which is not exported

Description

When I build my UI library using Rollup I expected to be able to generate .d.ts files but I instead get this error:

RollupError: "Assign" is not exported by "node_modules/style-engine/types/system-types.d.ts", imported by "node_modules/style-engine/types/jsx.d.ts".

I went to check and it really doesn't export Assign! Somehow the jsx.d.ts still works fine for dev????

Link to Reproduction

https://stackblitz.com/edit/nextjs-11pz27?file=styled-system%2Ftypes%2Fjsx.d.ts%3AL3

Steps to reproduce

Go to link
Try to follow the import for Assign.

JS Framework

React (TS)

Panda CSS Version

0.3.2

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

I have {jsxFramework: "react"} set.

Changes in recipes are not reflected in the UI

Description

When I change a recipe, I expect the change to reflect in the UI but the styles are not updated.

Link to Reproduction

https://github.com/cschroeter/panda-recipe-bug

Steps to reproduce

Open src/theme/recipes/badge.ts
Change for example the background color to blue.50

Expect the background of the badge to be blue not red.

JS Framework

React, Next

Panda CSS Version

0.4.0

Additional Information

Most likely a caching issue with PostCSS.

A workaround is to rm -rf .next and restart the next server. But this is pretty weak developer experience and we should find a better solution.

Support CSS SVG properties

Description

Properties like strokeLinecap, strokeWidth, and strokeOpacity are currently giving errors.

Problem Statement/Justification

N/A

Proposed Solution or API

N/A

Alternatives

No response

Additional Information

No response

Css lineClamp generates pixel instead of number

Description

When I use lineClamp:

<h3 className={css({ lineClamp: 1 })}>
  This line should be truncated to 1 line only
</h3>

panda generates the following css:

-webkit-line-clamp: 1px;

it should be:

-webkit-line-clamp: 1;

Link to Reproduction

https://stackblitz.com/edit/stackblitz-starters-jcaasa?file=pages%2Findex.js

Steps to reproduce

Open the above stackblitz link, then inspect the text elements

JS Framework

NextJS / Typescript

Panda CSS Version

0.4.0

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

[wsl / vscode] import autocompletion issue

Using react with vite and postcss panda integration.

Panda cli doesn't add the panda outDir to tsconfig include array and documentation doesn't mention it, so we have 0 import autocompletion. Is it planned to be added to the cli or should i make a PR to edit the doc ?

recipes are not working

Description

Hello,

So I was trying the recipes functionalty and noticed that it's not working, I tried the example here on the home page.

so the classes are generated but the css is not, I even tried to build the app and checked the generated css file.

I tried both extending theme with recipes and without.

I also tried both v0.3.2 and v0.4.0

Link to Reproduction

Steps to reproduce

Check the button component on the page and on the preview.

JS Framework

React (TS)

Panda CSS Version

0.4.0

Browser

Latest

Operating System

macOS
Windows
Linux

Additional Information

No response