Closed paulm17 closed 1 month ago
IMO, it would be better to remove globalcss from react and perhaps move it to
I don't see how this can work, as far as I know, there should be no import from @pigment-css/name-plugin in people's code. It's a bundler only API.
I'm running a UI lib and putting globalcss within a package results in
So a bug with Pigment CSS?
Seems related to #85.
Seems related to https://github.com/mui/pigment-css/issues/85.
I'm running vite in this instance.
So a bug with Pigment CSS?
No, I don't think so. GlobalCSS works just fine if it's within the application itself.
I'm trying to run it in my own npm
package. What is strange. css
function works fine but globalcss
threw an error.
I will investigate more and come back.
@paulm17 There are two category of packages for Pigment CSS, bundler packages (vite/nextjs etc) and runtime package (react). If you want to export something that will be used in your theme configuration (usually in your bundler's config, vite.config.ts or next.config.js), you should export them from a separate path, ie,
import { customTheme } from 'my-package/theme';
and your runtime exports can be exported from my-package
directly.
You can try and let me know if this works for you.
@brijeshb42 Thanks for the reply. I think I am doing something like this already.
// app.config.ts
import { defineConfig } from "@tanstack/start/config";
import { pigment, extendTheme } from "@pigment-css/vite-plugin";
import { getPigmentCSSTheme } from "@[project]/system";
const theme = extendTheme({
cssVarPrefix: '[prefix]',
...getPigmentCSSTheme()
});
export default defineConfig({
vite: {
plugins: () => [
pigment({
theme: theme,
}),
]
}
});
What I wanted to do was extend extendTheme
with a globalCss string variable
and then inject it into the zero-runtime-styles.css
file within the vite-plugin.
But I could not find how to do this. So gave up. 😓
To be honest, I can simply continue using an import that references a css file that my package is exporting.
with a globalCss string variable and then inject it
Not sure I understand this. Could you share a snippet or a working example ?
Of course! 😄
Inline with the last example:
// app.config.ts
import { defineConfig } from "@tanstack/start/config";
import { pigment, extendTheme } from "@pigment-css/vite-plugin";
import { getPigmentCSSTheme } from "@[project]/system";
const theme = extendTheme({
cssVarPrefix: '[prefix]',
...getPigmentCSSTheme(),
globalCss: `
body {
margin: 0;
padding: 0;
}
`
});
export default defineConfig({
vite: {
plugins: () => [
pigment({
theme: theme,
}),
]
}
});
What you are suggesting won't be the correct approach. globalCss
is not going to be bundler API but will be part of your source code.
For this particular case, you can just import a .css
file in your code and that is the correct approach if you don't want to use globalCss
.
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] @paulm17 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.
Summary
IMO, it would be better to remove globalcss from react and perhaps move it to
I'm running a UI lib and putting globalcss within a package results in
Since it's to do with the theme. Perphaps making it part of the theme would be better, falling under
ExtendTheme
?Just a suggestion...
Motivation
Currently I'm leveraging my own global.css file and then having to export it via the package and then import it via __root.css with vite.
Simply importing @pigment-css/react/styles.css would be much nicer!
Search keywords: globalcss