Port classic components to PigmentCSS? #43471

Mike-Ro · 2024-08-27T12:40:43Z

Hey everyone!

Great to see v6!

Just wondering, are there any plans to port classic components like Button to PigmentCSS? If so, which version will it be for - classic MUI or JoyUI?

Thanks!

Search keywords:

mnajdova · 2024-08-27T12:53:29Z

@Mike-Ro what do you mean with classic components? Do you mean supporting Pigment CSS in Material UI? If this is the case, you can follow the https://mui.com/material-ui/migration/migrating-to-pigment-css/ guide to enable Pigment CSS in your project - enabling it means all Material UI components would use it instead of Emotion.

Mike-Ro · 2024-08-28T07:15:27Z

@mnajdova I’m not sure if I’m using PigmentCSS correctly. Here’s what I’ve done — I'll show you with an example:

app/page.js:

import {Button} from '@mui/material';
import {css} from '@mui/material-pigment-css';

export default function page() {
  const styledTestPigmentCss = css({
    border: '1px solid black',
    textTransform: 'uppercase',
  });

  return (
    <>
      <Button color="primary">Test Button</Button>
      <div className={styledTestPigmentCss}>Test PigmentCSS</div>
    </>
  );
}

When I run npm run build, an ``out directory is created in the root of the project, and it contains a single index.html page with two elements:

div "Test PigmentCSS" – a separate CSS file with styles is created for this:

Button "Test Button", there’s no separate CSS file created for it, and the styles are applied inline in the header with a <style data-emotion="css 6v2v4c">:

I tried disabling transformLibraries: ['@mui/material'], but it doesn’t seem to change anything... Am I doing something wrong?

.
.
.
.
.
.
Project config:

package.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@mui/material": "^6.0.0",
    "@mui/material-pigment-css": "^6.0.0",
    "next": "^14.2.6",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^14.2.5",
    "@pigment-css/nextjs-plugin": "^0.0.20"
  }
}

next.config.mjs:

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
  trailingSlash: false,
};

/**
 * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
 */
const pigmentConfig = {
  transformLibraries: ['@mui/material'],
};

export default withPigment(nextConfig, pigmentConfig);

app/layout.js:

import '@mui/material-pigment-css/styles.css';

export default function RootLayout({children}) {
  return (
    <html lang="en">
    <body>
    {children}
    </body>
    </html>
  );
}

mnajdova · 2024-08-28T07:50:35Z

Your config looks correct (you should have the transformLibraries: ['@mui/material'],). Can you try moving the css call outside of the render function for the page, e.g. like this:

import {Button} from '@mui/material';
import {css} from '@mui/material-pigment-css';

+  const styledTestPigmentCss = css({
+    border: '1px solid black',
+    textTransform: 'uppercase',
+  });
 
export default function page() {
-  const styledTestPigmentCss = css({
-    border: '1px solid black',
-    textTransform: 'uppercase',
-  });

  return (
    <>
      <Button color="primary">Test Button</Button>
      <div className={styledTestPigmentCss}>Test PigmentCSS</div>
    </>
  );
}

I would recommend checking https://github.com/mui/material-ui/tree/master/examples/material-ui-pigment-css-nextjs-ts on how to set up the project (just use the `^6.0.0 version on all @mui/* packages). If you can't make it work please create a github repo with the project and I can check it.

Mike-Ro · 2024-08-28T09:18:11Z

@mnajdova I tried your example, but I’m still running into the same issue :(

I created a test repo here: https://github.com/Mike-Ro/test-muiv6 and tried another approach:

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

const StyledButton = styled(Button)(() => ({
  color: 'red',
}));

But I'm getting the same result - the red color is being moved to a separate CSS file, while the main button styles are still being applied inline in the header.

mnajdova · 2024-08-28T11:08:08Z

Looks like the Button component still uses emotion although I added the transformLibraries: ['@mui/material'], with the default Mateiral UI theme. It seems to be something with the next.js plugin, as for vite we have an app where this works. cc @siriwatknp have you tested this scenario with next.js so far?

Mike-Ro · 2024-08-28T11:46:09Z

@mnajdova

Looks like the Button component still uses emotion although I added the transformLibraries: ['@mui/material'], with the default Mateiral UI theme.

Got it, I thought this was normal behavior.

It seems to be something with the next.js config

Are you referring to my next.js config? It's almost the default setup.

mnajdova · 2024-08-28T11:49:49Z

I meant the next.js plugin sorry, let me edit the comment! Your setup seems good, the same setup works in vite (using vite's plugin), so I assume is something related to the next.js plugin.

mnajdova · 2024-08-28T12:00:13Z

@siriwatknp even the example we have added in #43065 it's not working as expected. The Material UI components still use emotion, check the images:

Also, if I disable JS the Pigment CSS related styles are not being injected, which means SSR is broken. Have you looked into this so far?

siriwatknp · 2024-08-28T15:28:52Z

@siriwatknp even the example we have added in #43065 it's not working as expected. The Material UI components still use emotion, check the images:

Something's wrong with the build process on master branch (probably due to f4a7047). I changed to the latest beta and it works.

Here is the Material UI Accordion after build:

v6 RC:

import { styled } from '../zero-styled';

v6 latest:

import { styled } from '../zero-styled/index.js';

siriwatknp · 2024-08-29T07:03:44Z

@siriwatknp even the example we have added in #43065 it's not working as expected. The Material UI components still use emotion, check the images:

Also, if I disable JS the Pigment CSS related styles are not being injected, which means SSR is broken. Have you looked into this so far?

✅ Solution

Update Pigment CSS plugin to at least 0.0.21:

Next.js

"@pigment-css/nextjs-plugin": "0.0.21"

Vite

"@pigment-css/vite-plugin": "0.0.21"

mnajdova · 2024-08-29T07:23:17Z

@Mike-Ro let us know if updating the plugin to 0.0.21 solves the issue for you, so we can close it :) Thanks @siriwatknp for looking into this

Mike-Ro · 2024-08-29T08:14:26Z

@mnajdova @siriwatknp updated @pigment-css/nextjs-plugin to 0.0.21 in the test project (https://github.com/Mike-Ro/test-muiv6), but nothing changed :(

mnajdova · 2024-08-29T10:52:24Z

@siriwatknp https://github.com/mui/pigment-css/pull/214/files#diff-be3ad8d071bd1d35260116abddeb06f9713e0c895d5008a3734c109855a01017 has changes to the @pigment-css/react package too, but we haven't migrated the @mui/material-pigment-css package to include this change. Could this be creating issues?

siriwatknp · 2024-08-29T13:03:01Z

@siriwatknp https://github.com/mui/pigment-css/pull/214/files#diff-be3ad8d071bd1d35260116abddeb06f9713e0c895d5008a3734c109855a01017 has changes to the @pigment-css/react package too, but we haven't migrated the @mui/material-pigment-css package to include this change. Could this be creating issues?

I don't think so. I tested with the Material UI Pigment CSS example (Next.js) by upgrading only the @pigment-css/nextjs-plugin and it works.

mnajdova · 2024-08-29T13:12:00Z

@Mike-Ro try this change in your repo, it should fix the issue: https://github.com/Mike-Ro/test-muiv6/pull/1/files

mnajdova · 2024-08-29T13:12:30Z

I am closing this, thanks @siriwatknp!

github-actions · 2024-08-29T13:12:43Z

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @Mike-Ro! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

Mike-Ro · 2024-08-29T13:42:36Z

@Mike-Roпопробуйте это изменение в вашем репозитории, это должно исправить проблему: https://github.com/Mike-Ro/test-muiv6/pull/1/files

It works, thanks!

github-actions bot added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 27, 2024

mnajdova added support: question Community support but can be turned into an improvement status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 27, 2024

github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Aug 28, 2024

mnajdova self-assigned this Aug 28, 2024

siriwatknp mentioned this issue Aug 28, 2024

Replace endsWith with includes to check adapter path mui/pigment-css#214

Merged

1 task

siriwatknp added the package: pigment-css Specific to @pigment-css/* label Aug 29, 2024

siriwatknp removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 29, 2024

mnajdova closed this as completed Aug 29, 2024

DiegoAndai added this to Material UI Sep 4, 2024

DiegoAndai moved this to Done in Material UI Sep 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Port classic components to PigmentCSS? #43471

Port classic components to PigmentCSS? #43471

Mike-Ro commented Aug 27, 2024 •

edited by github-actions bot

Loading

mnajdova commented Aug 27, 2024

Mike-Ro commented Aug 28, 2024

mnajdova commented Aug 28, 2024

Mike-Ro commented Aug 28, 2024 •

edited

Loading

mnajdova commented Aug 28, 2024 •

edited

Loading

Mike-Ro commented Aug 28, 2024

mnajdova commented Aug 28, 2024 •

edited

Loading

mnajdova commented Aug 28, 2024

siriwatknp commented Aug 28, 2024 •

edited

Loading

siriwatknp commented Aug 29, 2024

mnajdova commented Aug 29, 2024

Mike-Ro commented Aug 29, 2024

mnajdova commented Aug 29, 2024

siriwatknp commented Aug 29, 2024

mnajdova commented Aug 29, 2024

mnajdova commented Aug 29, 2024

github-actions bot commented Aug 29, 2024

Mike-Ro commented Aug 29, 2024

Port classic components to PigmentCSS? #43471

Port classic components to PigmentCSS? #43471

Comments

Mike-Ro commented Aug 27, 2024 • edited by github-actions bot Loading

mnajdova commented Aug 27, 2024

Mike-Ro commented Aug 28, 2024

mnajdova commented Aug 28, 2024

Mike-Ro commented Aug 28, 2024 • edited Loading

mnajdova commented Aug 28, 2024 • edited Loading

Mike-Ro commented Aug 28, 2024

mnajdova commented Aug 28, 2024 • edited Loading

mnajdova commented Aug 28, 2024

siriwatknp commented Aug 28, 2024 • edited Loading

siriwatknp commented Aug 29, 2024

✅ Solution

mnajdova commented Aug 29, 2024

Mike-Ro commented Aug 29, 2024

mnajdova commented Aug 29, 2024

siriwatknp commented Aug 29, 2024

mnajdova commented Aug 29, 2024

mnajdova commented Aug 29, 2024

github-actions bot commented Aug 29, 2024

Mike-Ro commented Aug 29, 2024

Mike-Ro commented Aug 27, 2024 •

edited by github-actions bot

Loading

Mike-Ro commented Aug 28, 2024 •

edited

Loading

mnajdova commented Aug 28, 2024 •

edited

Loading

mnajdova commented Aug 28, 2024 •

edited

Loading

siriwatknp commented Aug 28, 2024 •

edited

Loading