PostCSS: Missed semicolon

theMasix commented 11 months ago

Description

As I said in the #1821 , my Storybook used webpack5 as the bundler.

I decided to migrate to vite so I could fix the issue and get the setup done. After migrating to @storybook/react-vite bundler, I see that error again!

stacktrace:

7:56:54 PM [vite] Internal server error: [postcss] <css input>:12:18: Missed semicolon
  Plugin: vite:css
  File: /my-awesome-package/src/index.css:12:18
      at Input.error (/my-awesome-package/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/input.js:106:16)
      at Parser.checkMissedSemicolon (/my-awesome-package/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/parser.js:139:22)
      at Parser.decl (/my-awesome-package/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/parser.js:297:12)
      at Parser.other (/my-awesome-package/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/parser.js:434:12)
      at Parser.parse (/my-awesome-package/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/parser.js:471:16)
      at parse (/my-awesome-package/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/parse.js:11:12)
      at Root.normalize (/my-awesome-package/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/container.js:175:27)
      at Root.normalize (/my-awesome-package/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/root.js:15:23)
      at Root.append (/my-awesome-package/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/container.js:30:24)
      at Stylesheet.append (/my-awesome-package/node_modules/.pnpm/@pandacss+core@0.21.0/node_modules/@pandacss/core/dist/index.js:1552:23)
      at generateFlattenedCss (/my-awesome-package/node_modules/.pnpm/@pandacss+generator@0.21.0/node_modules/@pandacss/generator/dist/index.js:3833:9)
      at PandaContext.getCss (/my-awesome-package/node_modules/.pnpm/@pandacss+generator@0.21.0/node_modules/@pandacss/generator/dist/index.js:4342:12)
      at Builder.toString (/my-awesome-package/node_modules/.pnpm/@pandacss+node@0.21.0_typescript@4.9.5/node_modules/@pandacss/node/dist/index.js:2821:16)
      at Builder.write (/my-awesome-package/node_modules/.pnpm/@pandacss+node@0.21.0_typescript@4.9.5/node_modules/@pandacss/node/dist/index.js:2842:12)
      at plugins (/my-awesome-package/node_modules/.pnpm/@pandacss+postcss@0.21.0_typescript@4.9.5/node_modules/@pandacss/postcss/dist/index.js:54:17)
      at async LazyResult.runAsync (/my-awesome-package/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/lazy-result.js:261:11)
      at async compileCSS (file:///my-awesome-package/node_modules/.pnpm/vite@4.5.1_@types+node@18.19.3/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38903:25)
      at async TransformContext.transform (file:///my-awesome-package/node_modules/.pnpm/vite@4.5.1_@types+node@18.19.3/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38300:56)
      at async Object.transform (file:///my-awesome-package/node_modules/.pnpm/vite@4.5.1_@types+node@18.19.3/node_modules/vite/dist/node/chunks/dep-68d1a114.js:44352:30)
      at async loadAndTransform (file:///my-awesome-package/node_modules/.pnpm/vite@4.5.1_@types+node@18.19.3/node_modules/vite/dist/node/chunks/dep-68d1a114.js:55026:29)
      at async viteTransformMiddleware (file:///my-awesome-package/node_modules/.pnpm/vite@4.5.1_@types+node@18.19.3/node_modules/vite/dist/node/chunks/dep-68d1a114.js:64430:32)

As you can see, the first PandaCSS touchpoint is at: @pandacss/core/dist/index.js:1552:23

I think there is an issue with Panda. As we saw in #1821, maybe the issue is inside fixed margin style.

Link to Reproduction

https://no-code.com

Steps to reproduce

No response

JS Framework

React (TS)

Panda CSS Version

0.21.0

Browser

No response

Operating System

[X] macOS
[ ] Windows
[ ] Linux

Additional Information

No response

segunadebayo commented 11 months ago

This is similar to the previously opened issue (now moved to a discussion until a reproduction is added). The underlying problem/bug is the same.

Closing.

theMasix commented 11 months ago

Fixed with https://github.com/chakra-ui/panda/discussions/1823#discussioncomment-7859315

chakra-ui / panda