mui / pigment-css Goto Github PK

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:

• Create a new Vite project using: yarn create vite my-vue-app --template react
• Add pigment as detailed in the README
• Run yarn build

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

  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

Summary

When using next dev --turbo, I get the error: Error: @pigment-css/react: You were trying to call "css" function without configuring your bundler. because withPigment from @pigment-css/nextjs-plugin works by adding a webpack plugin which is not supported yet by Turbopack as stated in their docs: Will we be able to use webpack plugins?.

Examples

N/A

Motivation

I want to benefit from dev server performance improvements of Turbopack while using @pigment-css/react

Search keywords: pigment, turbopack

Regardless of whether they are built with PIgment CSS's styled API or not

Search keywords:

Steps to reproduce

1. npx create-next-app@latest
2. install @pigment-css/react @pigment-css/nextjs-plugin
3. next.conifg.js

import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';

const nextConfig = {
    output: "export",
};

export default withPigment(nextConfig, {
  theme: extendTheme({
      colors: {
      primary: 'tomato',
      secondary: 'cyan',
      },
      spacing: {
      unit: 8,
      },
      typography: {
      fontFamily: 'Inter, sans-serif',
      },
  }),
});

4. page.tsx

'use client'
import styles from "./page.module.css";
import { css } from "@pigment-css/react";

const description = css`
  display: inherit;
  justify-content: inherit;
  align-items: inherit;
  font-size: 0.85rem;
  max-width: var(--max-width);
  width: 100%;
  z-index: 1;
  font-family: var(--font-mono);
`;
......
export default function Home() {
 return (
    ......
      <div className={description}>Test</div>
    ......
 }
}

Current behavior

Expected behavior

No response

Context

No response

Your environment

System:
OS: macOS 14.3
Binaries:
Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
pnpm: 8.9.0 - ~/.nvm/versions/node/v20.12.2/bin/pnpm
Browsers:
Chrome: 124.0.6367.60
Edge: Not Found
Safari: 17.3
npmPackages:
@types/react: ^18 => 18.2.61
react: ^18 => 18.2.0
react-dom: ^18 => 18.2.0
typescript: ^5 => 5.3.3

Search keywords: @pigment-css/nextjs-plugin use client

Summary

React 19 adds support for loading stylesheets in a specified order AND ability to wait using Suspense wrapper until CSS is loaded.

Please consider to:

• generate a component wrapper to at least the main css bundle and ideally wrap dynamically imported pages with a separate Suspense with a list of CSS files that would be imported in the dynamically imported page

Examples

• Link to React’s docs on this topic
• Video on YouTube describing it (starts on 29:27)

Motivation

Disable FOUC when needed

Search keywords: react 19 fouc suspense

Steps to reproduce

See https://github.com/mui/material-ui/actions/runs/8794041697/job/24132847084?pr=42001 from mui/material-ui#42001

Current behavior

Build errors on components that contain !important in the style.

Expected behavior

The build should pass.

Context

No response

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: important

Hello,

I was loonking to change the pointer-events property on a component with the following code:

const disableContextMenu = css({
  pointerEvents: "none",
});

But unfortunately, at build time, it throws the following error:

Type error: No overload matches this call.
  Overload 1 of 2, '(arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]): string', gave the following error.
    Object literal may only specify known properties, and 'pointerEvents' does not exist in type 'TemplateStringsArray'.


const disableContextMenu = css({
>     pointerEvents: "none",
      ^
});

I'm a bit puzzled as pointer-events is a standard CSS property and using it in React's style prop works as expected.

I tried the following code as well, but it doesn't work either:

const disableContextMenu = css({
  "pointer-events": "none",
});

Operating System:
  Platform: linux
  Arch: x64
  Version: #28-Ubuntu SMP PREEMPT_DYNAMIC Thu Mar  7 18:21:00 UTC 2024
  Available memory (MB): 15685
  Available CPU cores: 8
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: N/A
  pnpm: 8.15.4
Relevant Packages:
  next: 14.2.0
  eslint-config-next: 14.2.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.3
  @pigment-css/react: 0.0.6
Next.js Config:
  output: N/A

Summary

A framework like Next.js transpile the code from ArrowFunction to FunctionDeclaration that developers don't have control:

 ⨯ unhandledRejection: SyntaxError: /Users/siriwatknp/practice-repos/nextjs-tailwind-v4/src/app/landing-page/components/Features.tsx: @pigment-css/react: sx prop only supports arrow functions directly returning an object, for example () => ({color: 'red'}). You can accept theme object in the params if required.
  171 |                             children: [
  172 |                                 /*#__PURE__*/ _jsxDEV(Box, {
> 173 |                                     sx: (param)=>{
      |                                                  ^
  174 |                                         let { theme } = param;
  175 |                                         return {
  176 |                                             backgroundSize: "cover",

The original code is:

<Box
  sx={({ theme }) => ({
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    minHeight: 280,
    backgroundImage: 'var(--Image-light)',
    ...theme.applyStyles('dark', {
       backgroundImage: 'var(--Image-dark)',
    }),
  })}

The sx prop should work with function declaration too.

Examples

No response

Motivation

No response

Search keywords: sx function declaration

Steps to reproduce

Links to live example:
Next.JS: https://stackblitz.com/edit/stackblitz-starters-e6kyr6?description=The%20React%20framework%20for%20production&file=app%2Fpage.tsx&title=Next.js%20Starter
Vite: https://stackblitz.com/edit/vitejs-vite-14nhvq?file=src%2FApp.tsx

Steps: just click the link and let the app start.

Current behavior

There appears to be a bug when trying to wrap styled function from "@pigment-css/react".

Here's the screenshot from Vite environment

Expected behavior

The CSS should be applied to the element.

Context

I am trying to have a simple wrapper for styled function from "@pigment-css/react".

Since it doesn't work, I'm wondering whether is it a bug or is it simply not supported?

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: pigment-css wrapper

Summary

The sx prop should support array format to cover these cases:

• array of styles

  // developer's codebase
  <div
    sx={[
      { display: 'flex',  },
      numSelected > 0 && {
         bgcolor: 'white',
       },
    ]}
  />
  
  // transformed
  <div {...sx(['s1o8xp19', 's1o8xp19-1'], {})} />

• array of function

   // developer's codebase
   <div
     sx={[
       theme => ({ display: 'flex', fontSize: theme.vars.font.xl }),
       numSelected > 0 && (theme => {
          bgcolor: theme.vars.palette.primary.main,
          …theme.applyStyles('dark', {
            bgcolor: theme.vars.palette.primary.light,
          })
        }),
     ]}
   />
  
   // transformed
   <div {...sx(['s1xbsywq', numSelected > 0 && 's1xbsywq-0'], {})} />

Examples

No response

Motivation

To ease v5 to v6 migration and ensure feature parity with the current MUI system's sx.

Search keywords: array sx prop

Steps to reproduce

Render any component with sx usage like this will throw an Error Cannot read property 'applyStyles' of undefined:

<Box
  sx={theme => ({
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    minHeight: 280,
    backgroundImage: 'var(--Image-light)',
    ...theme.applyStyles('dark', {
      backgroundImage: 'var(--Image-dark)',
    }),
  })}

Current behavior

The correct syntax for using theme from sx prop is to declare a parameter, not object pattern ({ theme })

Expected behavior

The sx prop should work with sx={theme => …}

Context

I am working on a codemod for transforming sx prop and I stumbled on this error.

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: sx theme

Steps to reproduce

1. Use barrel files import * as something from "example.ts"
   • it's easier to reproduce with Storybook, as it just doesn't start in Storybook, even if barrel files are not related to files where pigment is used
2. See bug in CLI related to babel's transformation of namespaces

Current behavior

Currently, you must pass to the vite plugin:

pigment({
  babelOptions: {
    plugins: [`@babel/plugin-transform-export-namespace-from`],
  },
})

Expected behavior

The babel plugin @babel/plugin-transform-export-namespace-from should be added by default.
In:
https://github.com/mui/material-ui/blob/f3cb496c999acbc8f19533e38df20be12e56d059/packages/pigment-css-vite-plugin/src/vite-plugin.ts#L194

Context

Related issues:

• Anber/wyw-in-js#68
• Anber/wyw-in-js#69

Your environment

  System:
    OS: macOS 14.4
  Binaries:
    Node: 21.7.1 - /opt/homebrew/bin/node
    npm: 10.5.0 - /opt/homebrew/bin/npm
    pnpm: 8.15.5 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.87
    Edge: 112.0.1722.39
    Safari: 17.4
  npmPackages:
    @pigment-css/react: 0.0.5
    @pigment-css/vite-plugin: 0.0.5
    @emotion/react:  11.11.4 
    @emotion/styled:  11.11.5 
    @mui/styled-engine:  6.0.0-alpha.1
    @mui/system:  6.0.0-alpha.1
    @mui/types:  7.2.14 
    @types/react: 18.2.73 => 18.2.73 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: 5.4.3 => 5.4.3 

Search keywords: pigment barrel

Steps to reproduce

See https://github.com/mui/material-ui/actions/runs/8837080528/job/24265117421?pr=41663 in mui/material-ui#41663

Current behavior

ownerState is undefined in InputBase styles when FilledInput (Pigment) is wrapping Input (MUI System).

const FilledInputRoot = styled(InputBase)(…)

The root cause is that FilledInputRoot does not forward ownerState to InputBase which causes an error from the InputBase.

Expected behavior

They should work together, both MUI System wrappin Pigment or Pigment wrapping MUI System.

Context

Found this issue when trying to migrate only FilledInput to support Pigment CSS.

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: styled

Steps to reproduce

Link to live example

Steps:

1. Clone repo
2. Install deps npm install (from repo's root)
3. Run npm run start (from pkg1)
4. Observe error in your CLI

Error: @pigment-css/react: You were trying to call "css" function without configuring your bundler

5. Comment out theme in vite.config.ts
6. Restart npm run start (it will run without issues)

Current behavior

pigment-css-vite-plugin doesn't work when a theme is connected directly (imports a value) or imports a type from one of the files that is importing from a file with @pigment-css/react's css.

Expected behavior

Theme should be shareable and references shouldn't break the pigment-css-vite-plugin unexpectedly.

Context

Btw, the bug exists in both pigment's 0.0.4 and the latest state of mui's next branch (checked a couple of hours ago)

Your environment

  System:
    OS: macOS 14.4
  Binaries:
    Node: 21.7.1 - /opt/homebrew/bin/node
    npm: 10.5.0 - /opt/homebrew/bin/npm
    pnpm: 8.15.5 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.87
    Edge: 112.0.1722.39
    Safari: 17.4
  npmPackages:
    @pigment-css/react: 0.0.4
    @pigment-css/vite-plugin: 0.0.4
    @emotion/react:  11.11.4 
    @emotion/styled:  11.11.5 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  6.0.0-alpha.0 
    @mui/system:  6.0.0-alpha.0 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @types/react: 18.2.73 => 18.2.73 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: 5.4.3 => 5.4.3 

Search keywords: pigment vite monorepo

Steps to reproduce

Steps:

1. Add the following to theme.colorSchemes

theme.colorSchemes.dark.mixins.example = {
  "&:hover": {
    background: `rgba(0, 0, 0, 0.26)`,
  },
}

2. Try to build; it will throw a warning [WARNING] Expected ":" [css-syntax-error] (it's actually an error; CSS is invalid & also won't be minified) during CSS minification, because the above ends up as --mixins-example-&:hover-background (notice the invalid & symbol in the variable name)

Your environment

  System:
    OS: macOS 14.4
  Binaries:
    Node: 21.7.1 - /opt/homebrew/bin/node
    npm: 10.5.0 - /opt/homebrew/bin/npm
    pnpm: 8.15.5 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.87
    Edge: 112.0.1722.39
    Safari: 17.4
  npmPackages:
    @pigment-css/react: 0.0.4
    @pigment-css/vite-plugin: 0.0.4
    @emotion/react:  11.11.4 
    @emotion/styled:  11.11.5 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  6.0.0-alpha.0 
    @mui/system:  6.0.0-alpha.0 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @types/react: 18.2.73 => 18.2.73 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: 5.4.3 => 5.4.3 

Search keywords: pigment theme vars

Steps to reproduce

Link to repo: https://github.com/siriwatknp/nextjs-mui-v6

Steps:

1. pnpm install && pnpm run dev
2. Go to localhost:3000, the page can be rendered
3. Add this change, then save and you should see error in the terminal

diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index 656df43..accc080 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -141,7 +141,7 @@ export default function Checkout() {
           <Box
             sx={{
               display: 'flex',
-              alignItems: 'end',
+              alignItems: 'flex-end',
               height: 150,
             }}
           >

Current behavior

Expected behavior

There should be no error.

Context

No response

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: pigment-css redefine toString

Summary

Provide a similar API to Emotion/Styled-components GlobalStyles.

Examples

https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override

Motivation

Feature parity for migrating from Emotion/Styled-components.

Search keywords: pigment-css global styles