chakra-ui / panda Goto Github PK
View Code? Open in Web Editor NEW🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️
Home Page: https://panda-css.com
License: MIT License
🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️
Home Page: https://panda-css.com
License: MIT License
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';
https://panda-playground.vercel.app/bPovrTv3Lc
import { grid } from 'styled-system/patterns' brings an error
React
Playground
Arc
Thanks a lot for creating Panda CSS
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;
}
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.
None
None
Chrome 1114.0.5735.130 on Android 13
No response
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.
https://play.panda-css.com/Pj3J55HixH
N/A, but I use NextJS with TypeScript
0.5.0
Chrome
No response
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
Check the generated classes
React (TS)
0.4.0
Latest
No response
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',
},
},
},
});
https://panda-playground.vercel.app/8aPDmwRu1-
React
0.4.0
Chrome
No response
Properties like strokeLinecap, strokeWidth, and strokeOpacity are currently giving errors.
N/A
N/A
No response
No response
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.
https://github.com/pawelblaszczyk5/svelte-panda-repro
Svelte (TS)
0.4.0
n/a
No response
While doing the getting started integration with Meteor,I got the following error:
=> 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>
);
https://github.com/Grubba27/panda
meteor create app --typescript
or, you can:
meteor npm start
MeteorJS
0.4.0
Chromium Engine Version 114.0.5735.133 (Arc 0.108.1)
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.
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.
Check the Box component inside the App.tsx
React (TS)
0.3.2
Latest
No response
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.
Check styled.p
component
React TS
0.4.0
Latest
No response
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?
Since the function is exported. it make more sense to make it type safe and allow up to replicate the same logic
adding inside the packages/generator/src/artifacts/js/pattern.ts#L62
line 62
export declare function get${upperName}Style(props?: ${upperName}Properties): SystemStyleObject
No response
No response
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?
Check button component
React TS
0.5.0
Latest
No response
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
Check generated index.ts
inside token folder
React (TS)
0.3.2
latest
No response
When having config.StrictTokens: true
, adding an invalid value for borderTopRadius
doesn't error. However, adding an invalid value for borderBottomLeftRadius
errors.
https://stackblitz.com/edit/vitejs-vite-c4cjhy?file=src%2FApp.tsx
See App.tsx
in the reproduction link.
Vite (TS)
0.4.0
No response
No response
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
Check the button component on the page and on the preview.
React (TS)
0.4.0
Latest
No response
Supporting multiple JSX frameworks at the same time can be useful in cases like Astro.
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.
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
No response
No response
When I click the share button, nothing happens.
n/a
n/a
latest
Latest Chrome and Firefox
No response
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
).
https://github.com/TaitoUnited/full-stack-template/tree/panda-css/client
/client
foldernpm install
npm run styled-system:codegen
npm start
Cannot read properties of undefined (reading 'replace')
css()
helper from PandaReact (TS)
0.5.0
Google Chrome 114
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.
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????
https://stackblitz.com/edit/nextjs-11pz27?file=styled-system%2Ftypes%2Fjsx.d.ts%3AL3
Assign
.React (TS)
0.3.2
No response
I have {jsxFramework: "react"}
set.
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:
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
Normalize whitespace with PostCSS.
Discard duplicate rules in your CSS files with PostCSS.
Merge CSS rules with PostCSS.
✅ By declarations
✅ By selectors
🚧❕ By partial declarations
the output isn't exactly the same, it will have the same result tho
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 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 draftand then postcss-nesting
could be replaced using postcss-lightningcss
, it's explicitly listed in this list of postcss plugins that can be replaced
Discard empty rules and values with PostCSS.
It throws this error: /* ERROR: Unexpected token Semicolon */
but I think this also could be done using the transform API
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!
https://stackblitz.com/edit/vitejs-vite-1z5hns?file=panda.config.ts
No response
0.3.2
No response
No response
Codegen
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.
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;
https://stackblitz.com/edit/stackblitz-starters-jcaasa?file=pages%2Findex.js
Open the above stackblitz link, then inspect the text elements
NextJS / Typescript
0.4.0
No response
No response
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
https://stackblitz.com/edit/stackblitz-starters-wxqtbw?file=package.json
pnpm prepare
NextJS
0.5.0
No response
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.
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.
https://marketplace.visualstudio.com/items?itemName=chakra-ui.panda-css-vscode
No response
N/A
VSCode
No response
From the top-level README (emphasis mine):
The recommended way to install the latest version of Astro is by running the command below:
https://raw.githubusercontent.com/chakra-ui/panda/main/README.md
No response
latest
No response
No response
topic
To dynamically change values similar to ThemeProvider in styled-components, what is the best approach in Panda CSS?
When I run
npm install -D @pandacss/dev
I get the following error
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*
https://stackblitz.com/edit/remix-run-remix-nsqctn?file=package.json
Follow the Getting Started with Remix using npm instead of pnpm
Remix (TS)
0.3.1
N/A
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.
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
https://stackblitz.com/edit/stackblitz-starters-3siapy?file=pages%2Findex.js
2xl
, 3xl
, etc)className={css({
bg: {
'2xl': 'orange.500',
},
})}
// or
className={css({
'2xl: {
bg: 'orange.500',
},
})}
@media screen and (min-width: 1536px) {
.\2xl\:bg_orange\.500 {
background: var(--colors-orange-500)
}
}
React
0.4.0
Brave Version 1.52.126 Chromium: 114.0.5735.133 (Official Build) (arm64)
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));
}
}
Went to the docs page from my device and the docs sidebar covered up the contents, not a common thing with docusaurus docs.
No response
0.3.2
Brave
No response
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
mime
, @types/mime
)npm-packlist
, @types/npm-packlist
)playground/docker-compose.yml
mariadb 10.8.2-focal
.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
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
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',
},
},
https://stackblitz.com/edit/vitejs-vite-l78ege?file=panda.config.ts
React, Vite, TypeScript
0.3.2
No response
No response
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
https://www.npmjs.com/package/@pandacss/config/v/0.3.1?activeTab=code
npx create-next-app@latest --use-npm
npm install -D @pandacss/dev
No response
0.3.1
No response
No response
When I add a pattern without a properties object, It errors with Cannot convert undefined or null to object
https://stackblitz.com/edit/vitejs-vite-uvsb1f?file=panda.config.ts&terminal=dev
Run npm run postinstall
in the Stackblitz reproduction
Vite (ts)
0.4.0
No response
No response
Reason not to use this
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.
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.
https://stackblitz.com/edit/stackblitz-starters-bwygju?file=src%2Froutes%2F%2Blayout.svelte
main
element in the DevToolsSvelteKit (TS)
0.3.2
Google Chrome 114
No response
I think the reasonable result should be to place my extended font variable at the top of the list
https://
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";
qwik ts
0.3.2
Chrome
No response
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.
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.
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);
}
Perhaps it would be more appropriate to rename semanticTokens
to aliasTokens
. For reference, the term "alias" is borrowed from Adobe Spectrum.
No response
No response
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.
Open codesandbox and check the console, and the classes and you would see there are no calsses generated for the video or img
React (TS)
0.3.2
Latest Chrome
you could activete the custom pattern and check with the &>*
selector
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
https://github.com/FilipePfluck/my-components
go to globalCss.ts and try substituting the focus indicator css with the custom property ring
run storybook
see it doesn't work
React (TS)
0.4.0
No response
No response
When I change a recipe, I expect the change to reflect in the UI but the styles are not updated.
https://github.com/cschroeter/panda-recipe-bug
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.
React, Next
0.4.0
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.
Design System
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
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 ?
I get an error trying to use 'staticCss' config, on a base/clean setup.
https://github.com/rafaelchiti/pandarepo-fork
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.
React TS
0.4.0
No response
No response
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?
panda.config.ts
n/a
0.3.1
n/a
No response
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.
osdiab/nextjs-panda-monorepo@20a2e33
apps/web
folderpage.tsx
pagethen you'll see
NextJS with Turborepo/pnpm workspaces
0.5.0
Chrome
No response
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.
https://stackblitz.com/edit/vitejs-vite-2cufqt?file=src%2FApp.tsx,src%2FComp.tsx&terminal=dev
React
0.4.0
No response
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.