mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
693 stars 36 forks source link

[vite] Theme injection error in Vite without a theme #48

Closed Markbags closed 4 months ago

Markbags commented 5 months ago

Steps to reproduce

When you add a pigment to a new Vite project, following the instructions in the README.md, you get the following error on build:

TypeError: [vite-mui-theme-injection-plugin] Could not load zero-runtime-styles.css (imported by src/app/main.jsx): Cannot read properties of undefined (reading 'generateStyleSheets')

Turns out the plugin blows up right now unless you add a theme into the config:

// This fails
export default defineConfig({
  plugins: [
    pigment({}),
    react()
  ]
});

// This works
export default defineConfig({
  plugins: [
    pigment({
      theme: {}
    }),
    react()
  ]
});

I'm not entirely sure if this is a documentation issue or an actual bug, but I feel like it's nice to not require a project to always supply a theme.

Steps:

Repro available in this codespace: https://musical-guacamole-45qr7r77xq2jpg5.github.dev/

Current behavior

Following the README's instructions for a Vite project, you will get a build error instead of a cleanly built project.

Expected behavior

Ideally not including a template doesn't throw an error at build time. Otherwise the README should specify that a theme is required

Context

No response

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.2.1 Binaries: Node: 21.7.3 - ~/.nvm/versions/node/v21.7.3/bin/node Yarn: 4.1.1 pnpm: Not Found Browsers: Chrome: 124.0.6367.119 Safari: 17.2.1 npmPackages: @pigment-css/react: ^0.0.10 @vite: ^5.2.0 @emotion/react: latest => 11.11.4 @emotion/styled: latest => 11.11.5 @mui/base: 5.0.0-beta.43 @mui/core-downloads-tracker: 6.0.0-dev.240424162023-9968b4889d @mui/material: next => 6.0.0-alpha.5 @mui/private-theming: 6.0.0-alpha.5 @mui/styled-engine: 6.0.0-alpha.5 @mui/system: 6.0.0-dev.240424162023-9968b4889d @mui/types: 7.2.14 @mui/utils: 6.0.0-alpha.5 @types/react: ^18.2.66 => 18.3.1 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: 5.4.5 ```

Search keywords: theme pigment