Problem with build output when using Vite in lib mode with PigmentCSS to produce re-usable components.

[visualjeff]

Steps to reproduce

I have a Vite project setup to create lib or module for consumption my Nextjs 14 project. I have one RSC component in my Vite project. Here is source:

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

const StatRoot = styled('div', {
    name: 'PigmentStat', // The component name
    slot: 'root' // The slot name
})({
    display: 'flex',
    flexDirection: 'column',
    gap: '1rem',
    padding: '0.75rem 1rem',
    backgroundColor: '#f9f9f9',
    borderRadius: '8px',
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
    letterSpacing: '-0.025em',
    fontWeight: 600
});

const StatValue = styled('div', {
    name: 'PigmentStat',
    slot: 'value'
})({
    font: '1.2rem "Fira Sans", sans-serif'
});

const StatUnit = styled('div', {
    name: 'PigmentStat',
    slot: 'unit'
})({
    font: '0.875rem "Fira Sans", sans-serif',
    color: '#121212'
});

export const Sample = React.forwardRef(function Stat(props, ref) {
    const { value, unit, ...other } = props;

    return (
        <StatRoot ref={ref} {...other}>
            <StatValue>{value}</StatValue>
            <StatUnit>{unit}</StatUnit>
        </StatRoot>
    );
});

Everything builds fine. Except that my Sample component ouput ends up with this import for index.pigment.css.

import { styled } from "@pigment-css/react";
import "@pigment-css/react/theme";
import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import "../../../Users/jgilber/Documents/POC/pigmentCSS/forge.public.components/src/components/sample/index.pigment.css";
const StatRoot = /* @__PURE__ */ styled("div", {
  name: "PigmentStat",
  // The component name
  slot: "root"
  // The slot name
})({
  classes: ["spa7xwi"]
});
const StatValue = /* @__PURE__ */ styled("div", {
  name: "PigmentStat",
  slot: "value"
})({
  classes: ["s1iir6qj"]
});
const StatUnit = /* @__PURE__ */ styled("div", {
  name: "PigmentStat",
  slot: "unit"
})({
  classes: ["ssipr96"]
});
const Sample = React.forwardRef(function Stat(props, ref) {
  const {
    value,
    unit,
    ...other
  } = props;
  return /* @__PURE__ */ jsxs(StatRoot, {
    ref,
    ...other,
    children: [/* @__PURE__ */ jsx(StatValue, {
      children: value
    }), /* @__PURE__ */ jsx(StatUnit, {
      children: unit
    })]
  });
});
export {
  Sample
};

Any suggestions on how I can get rid of this import statement for this css? Or why is this happening?

import "../../../Users/jgilber/Documents/POC/pigmentCSS/forge.public.components/src/components/sample/index.pigment.css";

Here is my Vite config:

export default defineConfig({
    publicDir: false,
    plugins: [
        pigment(pigmentOptions),
        react(),
        dts({
            include: ['src/components/**/*', 'src/global', 'src/main.[j|t]s'],
            exclude: [
                '**/*.stories.[j|t]s?(x)',
                '**/*.test.[j|t]s?(x)',
                '**/*.mock.[j|t]s?(x)',
                '**/*Mock*.[j|t]s?(x)'
            ]
        }),
    ],
    build: {
        minify: false,
        lib: {
            entry: resolve(__dirname, 'src/main.js'),
            fileName: 'pigment-components',
            formats: ['es']
        },
        rollupOptions: {
            external: [
                ...Object.keys(pkg.peerDependencies), 
                /^node:.*/, 
                'react-is', 
                'prop-types', 
                'react/jsx-runtime',
                ...['@babel', '@pigment-css'].map(
                    packageName => new RegExp(`^${packageName}(/.*)?`)
                )
            ],
            output: {
                entryFileNames: () => {
                    return '[name].js';
                },
                globals: {
                    react: 'React',
                    'react-is': 'react-is',
                    'react-dom': 'ReactDOM',
                    '@pigment-css/react': '@pigment-css/react'
                }
            }
        }
    }
});

Thank you. I thought I following the instructions but maybe I missed something?

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

 System:
    OS: macOS 13.5
    CPU: (12) arm64 Apple M2 Max
    Memory: 131.64 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: 8.14.1 - /opt/homebrew/bin/pnpm
  npmPackages:                                                                                                                                                                                                                                                                                                                                                                                                            
    @pigment-css/react: ^0.0.27 => 0.0.27                                                                                                                                                                                        
    @pigment-css/vite-plugin: ^0.0.27 => 0.0.27                                                                                                                                                                                  
    @swc/cli: 0.1.62 => 0.1.62 
    @swc/core: 1.3.81 => 1.3.81 
    @types/react: 18.2.37 => 18.2.37 
    @types/react-dom: 18.2.15 => 18.2.15 
    @vitejs/plugin-react: 4.2.1 => 4.2.1 
    auto-changelog: 2.4.0 => 2.4.0 
    cross-env: 7.0.3 => 7.0.3 
    jsdom: 22.1.0 => 22.1.0 
    prettier: 3.2.4 => 3.2.4 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    rollup-plugin-preserve-directives: ^0.4.0 => 0.4.0 
    typescript: 5.3.3 => 5.3.3 
    vite: 5.0.12 => 5.0.12 
    vite-plugin-dts: 3.7.2 => 3.7.2 
    vite-plugin-no-bundle: ^3.0.0 => 3.0.0 

Search keywords: Vite lib mode reusable

[brijeshb42]

So far, we haven't considered the possibility of building a library through the Vite plugin. Thanks for raising the issue. We can make it configurable so that in library mode, it does not add the .css import.

This import is added by the Pigment CSS plugin as a virtual css file whose content is extracted out from the js/ts file.

[j-mcfarlane]

@brijeshb42 I have an extensive pnpm monorepo using styled-components with vite doing my bundling. I would move everything to pigment if I can get zero runtime css in js working within the same monorepo / theming structure. If this is possible already I would love to see documentation - I would help contribute to a robust example

[brijeshb42]

@j-mcfarlane If you are using your packages within the monorepo itself, without building and publishing, you can try Pigment directly. There's no need of doing anything workspace specific.