No generated css file when used with tsup

[Vempejul]

Hi!

I am using this plugin together with tsup builder and there is no css file generated when running this plugin. If I remove the plugin the css file is generated as expected.

This is my package.json:

{
  "name": "@acme/components",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "sideEffects": false,
  "license": "MIT",
  "files": [
    "dist/**"
  ],
  "scripts": {
    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
    "lint": "eslint \"src/**/*.ts*\"",
    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
  },
  "dependencies": {
    "@acme/anchor": "workspace:*",
    "@acme/button": "workspace:*",
    "@acme/checkmark": "workspace:*",
    "@acme/icon": "workspace:*"
  },
  "devDependencies": {
    "@acme/tsconfig": "workspace:*",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.35.0",
    "eslint-config-acme": "workspace:*",
    "react": "18.2.0",
    "tsup": "6.6.3",
    "typescript": "4.9.3"
  }
}

Here are the esbuild options used:

options: {
  entryPoints: [ 'src/index.tsx' ],
  format: 'cjs',
  bundle: true,
  platform: 'node',
  sourcemap: false,
  target: 'es6',
  tsconfig: 'tsconfig.json',
  loader: {
    '.aac': 'file',
    '.css': 'file',
    '.eot': 'file',
    '.flac': 'file',
    '.gif': 'file',
    '.jpeg': 'file',
    '.jpg': 'file',
    '.mp3': 'file',
    '.mp4': 'file',
    '.ogg': 'file',
    '.otf': 'file',
    '.png': 'file',
    '.svg': 'file',
    '.ttf': 'file',
    '.wav': 'file',
    '.webm': 'file',
    '.webp': 'file',
    '.woff': 'file',
    '.woff2': 'file'
  },
  mainFields: [ 'module', 'main' ],
  define: { TSUP_FORMAT: '"cjs"' },
  outdir: 'dist',
  outExtension: { '.js': '.js' },
  write: false,
  splitting: false,
  logLevel: 'error',
  metafile: true
},

And the tsup config extension:

import { defineConfig } from "tsup";
import cssModulesPlugin from "esbuild-css-modules-plugin";

export default defineConfig({
  esbuildPlugins: [
    cssModulesPlugin({
      inject: false,
      localsConvention: "camelCaseOnly",
    }),
  ],
  esbuildOptions(options, context) {
    console.log({ options, context });
  },
});

The css module file is imported like this in src/index.tsx

import styles from "./index.module.css"

This will end upp generating these files: "dist/index.d.ts", "dist/index.js" and "dist/index.mjs" and the css is injected correctly as an object in index.js and index.mjs like this

// esbuild-css-modules-plugin-namespace:C:\..\acme-spinner\src\index.module.css.js
var index_module_css_default = { "animationContainer": "_animationContainer_5oqyl_207", "spinnerContainer": "_spinnerContainer_5oqyl_219", "spinner": "_spinner_5oqyl_219", "loadingSpinnerAnimation": "_loadingSpinnerAnimation_5oqyl_1" };

Is this supposed to generate a css file? If not, any input on how to manage this?

[indooorsman]

css file should be generated with bundle: true & inject: false, I will have a try with tsup later

[peluprvi]

I'm also using it with tsup. I'm currently using bundle: true and inject: true as an alternative, but the project requires to import the CSS file separately. The main goal would be having the *.module.css files parsed to *.css with the content that is currently being injected.

Also, the injected setup doesn't minifies the content.

tsup v7.2.0 || v8.1.0 esbuild-css-modules-plugin v2.7.1

Obs: there is a mismatching dependency version of esbuild between tsup (>7.2.0) and esbuild-css-modules-plugin (>2.7.1).

With bundle: false and inject: false: No CSS file generated in dist folder.

import styles from "./color.module.css";

With bundle: false and inject: true: No CSS file generated in dist folder.

import styles from "./color.module.css";

With bundle: true and inject: false: No CSS file generated in dist folder.

// esbuild-css-modules-plugin-namespace:/var/folders/mh/<someRandomHash>/T/tmp-<other-random-hash>/<package-name>/src/color.module.css.js
var color_module_css_default = { "someClass": "_someClass_irtoq_1" };

With bundle: true and inject: true: No CSS file generated in dist folder.

// esbuild-css-modules-plugin-namespace:/var/folders/mh/<someRandomHash>/T/tmp-<other-random-hash>/<package-name>/src/color.module.css.js
var digest = "<someDigestHash>";
var css = `._someClass_irtoq_1 {
  color: #fff;
}
`;
(function() {
  if (typeof document === "undefined") {
    return;
  }
  if (!document.getElementById(digest)) {
    var el = document.createElement("style");
    el.id = digest;
    el.textContent = css;
    document.head.appendChild(el);
  }
})();
var color_module_css_default = { "someClass": "_someClass_irtoq_1" };