mui / pigment-css Goto Github PK
View Code? Open in Web Editor NEWPigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
License: MIT License
Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
License: MIT License
Link to repo: https://github.com/siriwatknp/nextjs-mui-v6
Steps:
pnpm install && pnpm run dev
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,
}}
>
There should be no error.
No response
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: pigment-css redefine toString
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.
No response
No response
Search keywords: sx function declaration
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.
I expect full TypeScript support.
No response
npx @mui/envinfo
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
Have a working integration with webpack.
The integration with Next.js relies on Webpack, so I would imagine that this shouldn't be too hard to pull off.
No response
https://x.com/skastr052/status/1820798292780822852
Search keywords: -
Check https://github.com/oliviertassinari/react-conf-2024-pigment-css/blob/b55ff16e86831ac790972659546bc01484861c19/src/Slide1.tsx#L124-L147. It's using Vite.
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.
No response
No response
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: -
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.
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.
Whether a page has "use client" or not. A component with compound properties should work fine.
Using pigment-css with a component library.
No response
Search keywords: Cannot set properties of null
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:
yarn create vite my-vue-app --template react
yarn build
Repro available in this codespace: https://musical-guacamole-45qr7r77xq2jpg5.github.dev/
Following the README's instructions for a Vite project, you will get a build error instead of a cleanly built project.
Ideally not including a template doesn't throw an error at build time. Otherwise the README should specify that a theme is required
No response
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
Continuous bundle size monitoring, same as mui/mui-x#5550.
Add
import { extendTheme } from '@pigment-css/vite-plugin';
extendTheme({});
to any of your pages
No error
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.
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: -
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
No response
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: -
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.
No response
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:
Search keywords: -
Steps:
theme.colorSchemes
theme.colorSchemes.dark.mixins.example = {
"&:hover": {
background: `rgba(0, 0, 0, 0.26)`,
},
}
[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)npx @mui/envinfo
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
Create a Playground so developers can't play and debug the tool.
I suspect that for any tools like this one that perform code transformations, we need a Playground so:
Search keywords: -
is using CJS. But npx create-next-app@latest
gives you a next.config.mjs
file. So we need to update this example.
Make it easier to copy and paste the example to an existing project.
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:
Search keywords: -
npx create-next-app@latest
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',
},
}),
});
'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>
......
}
}
No response
No response
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
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.
There appears to be a bug when trying to wrap styled
function from "@pigment-css/react"
.
Here's the screenshot from Vite environment
The CSS should be applied to the element.
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?
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: pigment-css wrapper
import theme from '@pigment-css/react/theme'
should return the configured theme passed to the Pigment config by default without altering or removing any keys.
Pigment CSS should not optimize the theme by default, instead provide docs and API to remove properties based on developers' decision.
No response
I have this issue while migrating Material UI components but the idea applies to others in general.
Some Material UI components use useTheme()
to get values from the theme, e.g. the Dialog:
import useTheme from '../styles/useTheme';
const Dialog = React.forwardRef(function Dialog(inProps, ref) {
const props = useThemeProps({ props: inProps, name: 'MuiDialog' });
const theme = useTheme();
const defaultTransitionDuration = {
enter: theme.transitions.duration.enteringScreen,
exit: theme.transitions.duration.leavingScreen,
};
…
})
To support Pigment CSS, a useTheme
can be exported from Pigment CSS with simple implementation like:
import theme from '@pigment-css/react/theme';
export function useTheme() {
return theme;
}
Search keywords: pigment theme
Search keywords:
From mui/material-ui#40648 (comment)
This PR aims to remove the usage of React context to make some components RSC compatible while having backward compatible with emotion.
What's the use case to have RSC compatible components? We use the Badge in the PR, but I guess it's not the objective (I don't see why a developer would want this with his component, there would be no state change animations, the onClick listener wouldn't works, etc.), but I guess the Badge is meant as a supplement for layout components. For instance, it makes a lot of sense to me with a <Container>
with a different default layout mode propagated with the context or for a static content: mui/mui-x#12180).
Now, I don't think this change is needed, we can have context (maybe with nesting support but not sure) emotion-js/emotion#2978 (comment).
Trade-off
But them, how can we support theme nesting? I don't see this mentioned, but I think it matters. For example, how is the documentation of Material UI supposed to be able to show components in their default form while the docs has a MUI branded theme?
At first sight, I would recommend:
This way, we get:
Opportunity moved to #129
Search keywords:
url
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>
);
}
unhandledRejection Error: Can't resolve '#my_gradient' in '/home/runner/work/material-ui/material-ui/docs/data/material/components/progress'
There should be no error and the generated CSS should be correct.
No response
@pigment-css/react: 0.0.11, @pigment-css/nextjs-plugin: 0.0.11
Same use case as https://twitter.com/t3dotgg/status/1790897260731224322
No response
Search keywords: -
Most of the community prefers the CSS syntax over the JavaScript syntax. At least, that's what I conclude from:
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.
No response
No response
Search keywords: -
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?.
N/A
I want to benefit from dev server performance improvements of Turbopack while using @pigment-css/react
Search keywords: pigment, turbopack
Steps:
npm install
(from repo's root)npm run start
(from pkg1
)Error: @pigment-css/react: You were trying to call "css" function without configuring your bundler
theme
in vite.config.ts
npm run start
(it will run without issues)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
.
Theme should be shareable and references shouldn't break the pigment-css-vite-plugin
unexpectedly.
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)
npx @mui/envinfo
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
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
No response
No response
Search keywords: layers, css layers, prepend
See https://github.com/mui/material-ui/actions/runs/8837080528/job/24265117421?pr=41663 in mui/material-ui#41663
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.
They should work together, both MUI System wrappin Pigment or Pigment wrapping MUI System.
Found this issue when trying to migrate only FilledInput to support Pigment CSS.
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: styled
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",
});
I'm not sure if it is relevant to this issue, but I think there should be a way to set non-standard CSS properties such as -webkit-touch-callout
or experimental properties.
next info
outputOperating 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
Provide a similar API to Emotion/Styled-components GlobalStyles
.
https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override
Feature parity for migrating from Emotion/Styled-components.
Search keywords: pigment-css global styles
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:
Disable FOUC when needed
Search keywords: react 19 fouc suspense
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: ['@...'],
}
)
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
No response
Putting the sx prop on a React element like a div
doesn't give type hints
No response
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.
npx @mui/envinfo
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
pigment-css-nextjs-ts
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>
);
};
// src/app/page.tsx
export default function Home() {
return (
<Button width="60px" />
)
}
Error: unhandledRejection: This expression cannot be used in the template, because it is a function parameter.
css
function work fine, and the button is styled width: 60px
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
No response
No examples folder here, and examples folders in Material UI.
Examples folder here, and no examples folders in Material UI.
mui/material-ui#42160 (comment)
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: -
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'], {})} />
No response
To ease v5 to v6 migration and ensure feature parity with the current MUI system's sx
.
Search keywords: array sx prop
Same as mui/base-ui#394
No response
No response
No response
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: -
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).
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
No response
No response
"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
See https://github.com/mui/material-ui/actions/runs/8794041697/job/24132847084?pr=42001 from mui/material-ui#42001
Build errors on components that contain !important
in the style.
The build should pass.
No response
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: important
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.
I see 3 distinct things:
Should types around here be exported?
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.
Shouldn't the error be flagged on the property that is wrong and not the first property?
No response
No response
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: -
No warning.
The warning goes away if I remove Pigment CSS from the vite config
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({
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: -
https://github.com/mui/pigment-css
Missing information
How are we suppose to theme existing mui components? can you please give us a code snippet example?
Thank you so much
No response
Search keywords: components, theme, theming components,
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>
The color prop doesn't work.
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
I'm trying to migrate code from styled-components.
I believe that it's also something @jantimon asked for.
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: -
Take a look at a74419e.
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
The generated CSS of theme.styleOverrides
should come last.
No response
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: overrides
import * as something from "example.ts"
namespaces
Currently, you must pass to the vite plugin:
pigment({
babelOptions: {
plugins: [`@babel/plugin-transform-export-namespace-from`],
},
})
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
Related issues:
npx @mui/envinfo
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
No response
No response
No response
Search keywords: -
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)',
}),
})}
The correct syntax for using theme
from sx
prop is to declare a parameter, not object pattern ({ theme })
The sx
prop should work with sx={theme => …}
I am working on a codemod for transforming sx
prop and I stumbled on this error.
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: sx theme
Regardless of whether they are built with Pigment CSS's styled API or not
Search keywords:
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:
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?
Side thoughts:
No response
Search keywords: -
https://github.com/mui/pigment-css?tab=readme-ov-file#start-with-nextjs
Missing information
This is my next.config.js
file 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?
@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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.