mui / pigment-css Goto Github PK

Summary

is using CJS. But npx create-next-app@latest gives you a next.config.mjs file. So we need to update this example.

Motivation

Make it easier to copy and paste the example to an existing project.

Steps to reproduce

Take a look at a74419e.

Current behavior

The styles defined in theme.styleOverrides (without variants) are overridden by the Component's variants.

const OutlinedInputInput = styled('input', {
  name: 'MuiOutlinedInput',
  slot: 'Input',
})({
  padding: '16.5px 14px',
  variants: [
    {
      props: {
        size: 'small',
      },
      style: {
        padding: '8.5px 14px',
      },
    },
    {
      props: ({ ownerState }) => ownerState.multiline,
      style: {
        padding: 0,
      },
    },
    {
      props: ({ ownerState }) => ownerState.startAdornment,
      style: {
        paddingLeft: 0,
      },
    },
    {
      props: ({ ownerState }) => ownerState.endAdornment,
      style: {
        paddingRight: 0,
      },
    },
  ],
});

// theme
{
  themeArgs: {
    theme: {
      components: {
        MuiOutlinedInput: {
          styleOverrides: {
            input: {
              paddingLeft: 10,
            },
          },
        },
      },
    },
  },
}

See the generated CSS

Expected behavior

The generated CSS of theme.styleOverrides should come last.

Context

No response

Your environment

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

Search keywords: overrides

Steps to reproduce

1. Start
2. See the console

Current behavior

Expected behavior

No warning.

Context

The warning go away if I do

diff --git a/vite.config.js b/vite.config.js
index 78b5110..b39ba6c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { pigment, extendTheme } from '@pigment-css/vite-plugin';

 // To learn more about theming, visit https://github.com/mui/material-ui/blob/master/packages/zero-runtime/README.md#theming
 const theme = extendTheme({

Your environment

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

Search keywords: -

Steps to reproduce

1. clone https://github.com/mui/pigment-css
2. cd examples/pigment-css-nextjs-ts
3. npm i
4. code .

Current behavior

VsCode doesn't recognize theme object.

I faced this issue in my project, but it does exist in the official pigment-css-nextjs-ts as well.

Expected behavior

I expect full TypeScript support.

Context

No response

Your environment

  System:
    OS: macOS 14.2.1
  Binaries:
    Node: 18.18.0 - ~/.asdf/installs/nodejs/18.18.0/bin/node
    npm: 9.8.1 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.208
    Edge: Not Found
    Safari: 17.2.1
  npmPackages:
    @emotion/react:  11.11.4
    @emotion/styled:  11.11.5
    @mui/private-theming:  6.0.0-alpha.6
    @mui/styled-engine:  6.0.0-alpha.6
    @mui/system:  6.0.0-dev.240424162023-9968b4889d
    @mui/types:  7.2.14
    @mui/utils:  6.0.0-alpha.6
    @types/react: latest => 18.3.2
    react: latest => 18.3.1
    react-dom: latest => 18.3.1
    typescript: latest => 5.4.5

Search keywords: TypeScript, theme

Summary

Most of the community prefers the CSS syntax over the JavaScript syntax. At least, that's what I conclude from:

• https://styled-components.com/
• https://syntax.fm/show/751/ui-components-shadcn-tailwind-ui-headless-react-aria-radix-ui 56"35
• https://x.com/_AshConnolly/status/1793754388634509553

So this should be clearly documented, and honesty maybe even be the default. Inside the Material UI source, we have taken the habit of using the JavaScript syntax because it's better typed, so helps with avoiding regressions, but in the docs of Base UI, we went with the CSS syntax e.g. https://mui.com/base-ui/react-button/ for the same reason I'm opening this issue.

Even if you consider this from the perspective that the whole point of Pigment CSS is to bring CSS Modules closer to the components, then asking people to rewrite their style is a big ask, using the CSS syntax makes a lot more sense. Then it's just a matter of making sure Pigment CSS + https://stylelint.io/ works well.

I'm personally more used to the JavaScript syntax, e.g. what I used in https://github.com/oliviertassinari/react-conf-2024-pigment-css/blob/b2aae0b9c03df51960c90ff7b72246d50d372f1f/src/components/Pigment.tsx.

Examples

No response

Motivation

No response

Search keywords: -

Steps to reproduce

Same as mui/base-ui#394

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

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

Search keywords: -

Summary

It's important that, as we iterate on the product, we are aware of the tradeoffs we are making. Performance is one of the most critical components of where initiation in this space is happening. So I believe, we want to know:

• Build time overhead
• FCP cost vs. others e.g. https://danielnagy.me/posts/Post_tsr8q6sx37pl
• Runtime update cost vs. other
• Bundle size cost #78

Examples

• https://danielnagy.me/posts/Post_tsr8q6sx37pl. Inline style are more performant for initial load time. Not too far behind inline of critical CSS. So not that bad.
• Inline style https://github.com/ivanbanov/inline-style-benchmark
• https://stitches.dev/docs/benchmarks
• Tailwind CSS vs. tokenami https://github.com/pawelblaszczyk5/planner-tokenami
• https://tamagui.dev/docs/intro/benchmarks.
• the preview is cool https://github.com/necolas/react-native-web/tree/master/packages/benchmarks
• https://github.com/styled-components/styled-components/tree/main/packages/benchmarks

Context

https://www.notion.so/mui-org/Benchmark-performance-of-Pigment-CSS-vs-others-ac092794aa4c415da379f6338223d3eb?pvs=4

Search keywords: -

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

Steps to reproduce

We have 3 main APIs in Pigment CSS: https://react-conf-2024-pigment-css.netlify.app/?slideIndex=31&stepIndex=0

I would much rather not make the same mistake as in https://youtu.be/UlY-Ixddjm0?si=WTs9IU9K47mOfUzE&t=1538. Meaning, we should document clearly when to use each prop so developers get consistency.

styled API:

Pros:

• #86 (comment) can respond do props more easily.

Cons:

• vercel/next.js#35030 hides the host element to eslint rules.
• Need to come up with names

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

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

Search keywords: -

Steps to reproduce

I'm trying to type:

import { css } from '@pigment-css/react';

const mystye = css({
  color: '#fff',
  // position: 'initial' works
  position: 'initial !important',
  backgroundColor: '#000',
});

export default function Home() {
  return <main className={mystye}>mystye</main>;
}

https://stackblitz.com/edit/github-vfcqdf?file=src%2FApp.tsx

but I struggle to. I have tried React.CSSProperties but it doesn't work, which makes sense, this type is meant for the style prop.

Current behavior

I see 3 distinct things:

1. I can't find reexported types from Pigment CSS that I can use.

Should types around here be exported?

2. Should !important work outside of the box? Like it does with @mui/system. Proof: https://codesandbox.io/p/sandbox/patient-cloud-xykphn?file=%2Fsrc%2FDemo.tsx%3A5%2C3.

3. Shouldn't the error be flagged on the property that is wrong and not the first property?

Expected behavior

No response

Context

No response

Your environment

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

Search keywords: -

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

Summary

No response

Examples

No response

Motivation

No response

Search keywords: -

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

Search keywords:

Search keywords

url

Latest version

• I have tested the latest version

Steps to reproduce

Try this component with Pigment CSS:

function GradientCircularProgress() {
  return (
    <React.Fragment>
      <svg width={0} height={0}>
        <defs>
          <linearGradient id="my_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#e01cd5" />
            <stop offset="100%" stopColor="#1CB5E0" />
          </linearGradient>
        </defs>
      </svg>
      <CircularProgress sx={{ 'svg circle': { stroke: 'url(#my_gradient)' } }} />
    </React.Fragment>
  );
}

Current behavior

unhandledRejection Error: Can't resolve '#my_gradient' in '/home/runner/work/material-ui/material-ui/docs/data/material/components/progress'

Expected behavior

There should be no error and the generated CSS should be correct.

Context

No response

Your environment

@pigment-css/react: 0.0.11, @pigment-css/nextjs-plugin: 0.0.11

Summary

Same use case as https://twitter.com/t3dotgg/status/1790897260731224322

Examples

No response

Motivation

Also related to https://react-conf-2024-pigment-css.netlify.app/?presenterMode=true&slideIndex=29&stepIndex=0.

This is precisely why @siddharthkp / GitHub in https://portal.gitnation.org/contents/moving-on-from-runtime-css-in-js-at-scale went the opposite direction, toward CSS Modules. It feels like Pigment CSS has a purpose if we move toward fixing this. So it feels binary: we find a solution or we give up on Pigment CSS. I'm hopeful that the React Compiler can pave the way for us to make this work.

Search keywords: -

Steps to reproduce

import { styled } from '@pigment-css/react';

// Write your styles in `styled` tag
const Title = styled.h1`
  font-family: 'Arial';
`;

const Container = styled.div`
  font-size: 10px;
  color: ${props => props.color};
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }

  ${Title} {
    margin-bottom: 24px;
  }
`;

        <Container color="#333">
          <Title>Hello world</Title>
        </Container>

Current behavior

The color prop doesn't work.

Expected behavior

The color prop works in Linaria https://codesandbox.io/p/devbox/dreamy-danny-mqkftk?file=%2Fsrc%2FApp.tsx%3A1%2C1&workspaceId=836800c1-9711-491c-a89b-3ac24cbd8cd8

Context

I'm trying to migrate code from styled-components.

I believe that it's also something @jantimon asked for.

Your environment

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

Search keywords: -

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

Summary

Basically I want to be able to port the css onto a layer so that I can determined the order of the css that will be applied

Examples

No response

Motivation

No response

Search keywords: layers, css layers, prepend

Summary

It's not viable for Pigment CSS to rely on integrating deeply with all bundlers. It needs a bundler agnostic escape hatch, so a runtime?

Examples

• I can't use Pigment CSS with https://github.com/jxnblk/mdx-deck because it's Gatsby. So I need a webpack plugin.
• I can't use Pigment CSS with Spectable MDX example: https://github.com/FormidableLabs/spectacle/tree/main/examples/mdx. I need a webpack plugin.
• It's possible from where we are coming from: https://mui.com/system/styled/#introduction.

Side thoughts:

• I could see react data grid using Pigment CSS. They migrated from CSS to Linaria in adazzle/react-data-grid#2256, but maybe with Pigment CSS we could improve the state of things. e.g. maybe with atomic class names in production, or maybe with more effective tree shaking, etc.
• Same idea with react hot toast who uses Goober: https://github.com/timolins/react-hot-toast/blob/396db8b8f6057b31bd5c99f308764e00a9d31de6/package.json#L67.

Motivation

No response

Search keywords: -

Steps to reproduce

No response

Current behavior

No examples folder here, and examples folders in Material UI.

Expected behavior

Examples folder here, and no examples folders in Material UI.

Context

mui/material-ui#42160 (comment)

Your environment

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

Search keywords: -

Steps to reproduce

Check https://github.com/oliviertassinari/react-conf-2024-pigment-css/blob/b55ff16e86831ac790972659546bc01484861c19/src/Slide1.tsx#L124-L147. It's using Vite.

Current behavior

See the React dev tool output:

The best one between styled-components (styled.div), Emotion (span Styled), and Pigment CSS (undefined Syled) is clearly not Pigment CSS.

Expected behavior

No response

Context

No response

Your environment

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

Search keywords: -

Steps to reproduce

1. Clone the example pigment-css-nextjs-ts
2. Create a component as :

import { css } from "@pigment-css/react";
import { FunctionComponent } from "react";

interface ButtonProps {
  width: string;
}

export const Button: FunctionComponent<ButtonProps> = ({
  width,
}) => {
  return (
    <div
      className={`${css({
        width,
        height: "fit-content",
        padding: "10px",
        border: "1px solid white",
        borderRadius: 4,
      })}`}
    >
      Button
    </div>
  );
};

3. Use the component :

// src/app/page.tsx

export default function Home() {
  return (
    <Button width="60px" />
  )
}

Current behavior

Error: unhandledRejection: This expression cannot be used in the template, because it is a function parameter.

Expected behavior

css function work fine, and the button is styled width: 60px

Context

I'm trying the pigment-css with nextjs, I want to set some dynamic style, Which style is depend on data, such as:

images.map(({aspectRatio})=> <ImageConponent className={css({aspectRatio})} />)

Is it possible to use in server component ?

Search keywords: css function not work in template

Steps to reproduce

I'm using PigmentCSS for a design system, it's working fine for me to grab the tokens from the theme.tokens, but it's not applying any of the styleOverrides when I pass them to the name / slot.

Package

Accordion.styled.ts

export const Content = styled('div', { name: 'Accordion', slot: 'Content' })(
    ({ theme }) => ({
        padding: `${theme.tokens.spacing.sm} ${theme.tokens.spacing.lg} ${theme.tokens.spacing.sm}`,
    })
);

App
next.config.js

module.exports = withPigment(
    {
        ...
        transpilePackages: ['@...'],
    },
    {
        theme: {
            tokens: {
                padding: ...
            },
            styleOverrides: {
                Accordion: {
                    Content: {
                        backgroundColor: 'red',
                    },
                },
            },
        },
        transformLibraries: ['@...'],
    }
)

Current behavior

Padding styles are correctly applied, but no styleOverrides are carried through. I thought maybe it would only override styles that had been applied, but even if I pass something like the below, still nothing is applied.

styleOverrides: {
    Accordion: {
        Content: {
            padding: 0,
        },
    },
},

Search keywords: style overrides

Summary

Similar to #78 that is about bundle size, I believe we should eventually monitor the build time cost of Pigment CSS.

Examples

No response

Motivation

See the conversation in https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/107. Build time is one of the main concerns:

How much slower will the build be as comparing from today? (we already have a really slow build due to how we compile JS code in WebPack, would that add to the matter? evaluating the entire codebase is not free)

Search keywords: -

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

Steps to reproduce

Clone repo: https://github.com/paulm17/raikou_pigmentcss
pnpm i
pnpm run dev

The app will crash with a stack trace:

⨯ unhandledRejection: EvalError: Cannot set properties of null (setting 'displayName')

This only happens when the page is a client component.

Remove: https://github.com/paulm17/raikou_pigmentcss/blob/main/apps/web/app/page.tsx#L1

and re-run and the issue goes away.

Current behavior

When a page is marked as "use client". The result of the transform process on code is missing variables? I'm guessing at this point. Therefore it leads to a crash due to an undefined variable.

Expected behavior

Whether a page has "use client" or not. A component with compound properties should work fine.

Context

Using pigment-css with a component library.

Your environment

No response

Search keywords: Cannot set properties of null

Related page

https://github.com/mui/pigment-css

Kind of issue

Missing information

Issue description

How are we suppose to theme existing mui components? can you please give us a code snippet example?

Thank you so much

Context

No response

Search keywords: components, theme, theming components,

Steps to reproduce

1. Follow steps outlined for Building reusable components
2. Load consuming application

Basic app available here, it's not identical to the README example, but it does the same thing (exports a basic component for consumption in a different app).

I note that if I remove the transformLibraries: ['@kt/pigmentcss'] declaration from the withPigment config the error goes away, but there are no styles applied (naturally).

Current behavior

Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/.pnpm/file+..+package_@types+react-dom@18.2.0_@types+react@18.2.0_react-dom@18.2.0_react@18.2.0_typescript@5.4.3/node_modules/@kt/pigmentcss/dist/index.mjs

Expected behavior

No response

Context

No response

Your environment

"dependencies": {
    "@kt/pigmentcss": "file:../package/",
    "@pigment-css/react": "^0.0.11",
    "@types/node": "20.11.24",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "next": "14.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "^5.4.3"
},
"devDependencies": {
    "@pigment-css/nextjs-plugin": "^0.0.11"
}

Search keywords: global imported node_modules

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

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

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

How can we control the injection order?

https://github.com/oliviertassinari/react-conf-2024-pigment-css/blob/26e4d886bc02b75338df8e3d2fb95db1baa27968/src/App.tsx#L441-L442

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

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

Search keywords: -

Summary

Continuous bundle size monitoring, same as mui/mui-x#5550.

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

Related page

https://github.com/mui/pigment-css?tab=readme-ov-file#start-with-nextjs

Kind of issue

Missing information

Issue description

This is my next.config.jsfile that I have configured PigmentCSS in a Nx+Next.js repo:

//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');
const { withPigment } = require('@pigment-css/nextjs-plugin');

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
};

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
  withPigment
];

module.exports = composePlugins(...plugins)(nextConfig);

How can I custom a theme with NX+Next.js?

Context

@pigment-css/react: 0.0.11
next: 14.0.4
react: 18.2.0
react-dom: 18.2.0
@nx/next: 18.0.2
@pigment-css/nextjs-plugin: 0.0.11
nx: 18.0.2

Search keywords: NX, Next.js

Summary

Considering the support of stylesheet in React 19 https://react.dev/blog/2024/04/25/react-19#support-for-stylesheets. I wonder if we couldn't rely on this rather than on the emission of a CSS Modules file. The docs: https://react.dev/reference/react-dom/components/style. Maybe this would make the bundlers integration simpler, we would only need to transpile the source.

Examples

No response

Motivation

Simplify the bundler integration. It might mean that we only need to transpile code, like https://react.dev/learn/react-compiler is doing.

Two concerns though:

• CSS is much faster to parse than JavaScript
• This is React only, we would lose other framework support

Search keywords: -

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

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

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

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

No response

Current behavior

Putting the sx prop on a React element like a div doesn't give type hints

Expected behavior

No response

Context

I am converting a project's emotion css props to use pigment's sx prop since they work the same. It just doesn't have types.

Your environment

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 18.19.0 - D:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - D:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.1 - D:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    react: beta => 19.0.0-beta-26f2496093-20240514 
    react-dom: beta => 19.0.0-beta-26f2496093-20240514 
    types-react:  19.0.0-beta.1 
    typescript: ^5.4.5 => 5.4.5

Search keywords: sx types

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

Add

import { extendTheme } from '@pigment-css/vite-plugin';

extendTheme({});

to any of your pages

Current behavior

Expected behavior

No error

Context

I would like to use the theme value directly in JavaScript, in my case for https://github.com/oliviertassinari/react-conf-2024-pigment-css/blob/b55ff16e86831ac790972659546bc01484861c19/src/App.tsx#L30.

Your environment

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

Search keywords: -

Steps to reproduce

Start https://github.com/oliviertassinari/react-conf-2024-pigment-css, for which I forked https://github.com/mui/pigment-css/tree/master/examples/pigment-css-vite-ts

Current behavior

Expected behavior

Context

No response

Your environment

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

Search keywords: -

Summary

Create a Playground so developers can't play and debug the tool.

Examples

• esbuild: https://esbuild.github.io/try/
• prettier: https://prettier.io/playground/
• yak: https://yak.js.org/playground
• TypeScript: https://www.typescriptlang.org/play/
• React Compiler: https://playground.react.dev/
• Macaron: https://macaron.js.org/playground

Motivation

I suspect that for any tools like this one that perform code transformations, we need a Playground so:

• Developers can quickly debug
• Maintainers can have simpler reproductions

Search keywords: -

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

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

Summary

No response

Examples

No response

Motivation

No response

Search keywords: -

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

Search for "Pigment CSS" on Google. Get a first result in https://github.com/mui/material-ui/tree/master/packages/pigment-css-react. Most importantly, this repository doesn't surface, so good luck finding it to leave a star 🙃.

This is all wrong:

• 1. This page shouldn't exist in the first place. update the content to only link to the new location. mui/material-ui#42410
• 2. Delete https://github.com/mui/material-ui/tree/master/packages/pigment-css-react
• 3. We should have https://pigment-css.mui.com live
• 4. We should ask Josh to update its link in https://www.joshwcomeau.com/react/css-in-rsc/#pigment-css-9 and in https://www.joshwcomeau.com/talk-resources/react-paris-talk-2024/ to not have broken links.