mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
820 stars 39 forks source link

Remove globalcss from @pigment-css/react #275

Closed paulm17 closed 1 month ago

paulm17 commented 1 month ago

Summary

IMO, it would be better to remove globalcss from react and perhaps move it to

@pigment-css/vite-plugin or @pigment-css/nextjs-plugin.

I'm running a UI lib and putting globalcss within a package results in

Error: @pigment-css/react: You were trying to call "globalCss" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.

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

oliviertassinari commented 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?

oliviertassinari commented 1 month ago

Seems related to #85.

paulm17 commented 1 month ago

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.

brijeshb42 commented 1 month ago

@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.

paulm17 commented 1 month ago

@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.

brijeshb42 commented 1 month ago

with a globalCss string variable and then inject it

Not sure I understand this. Could you share a snippet or a working example ?

paulm17 commented 1 month ago

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,
      }),
    ]
  }
});
brijeshb42 commented 1 month ago

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.

github-actions[bot] commented 1 month ago

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.