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.