Postcss plugin, as default esbuild plugin, is causing conflicts with linariacss

[viniciusflv]

Description

Recently I've been testing with linariacss, and I think is a great fit for Design Systems using tsup to compile the lib.

But even tho has esbuild support, it hasn't worked with tsup, throwing the following error:

> tsup

CLI Building entry: src/index.ts
CLI Using tsconfig: tsconfig.json
CLI tsup v6.7.0
CLI Using tsup config: C:\Users\vvictorino\Documents\Estudo\tsup-linaria\tsup.config.mjs
CLI Target: esnext
CLI Cleaning output folder
CJS Build start
ESM Build start
DTS Build start
X [ERROR] ENOENT: no such file or directory, open 'C:\Users\vvictorino\Documents\Estudo\tsup-linaria\Linaria_1ix7c25.linaria.css' [plugin 
postcss]

    src/Linaria.tsx:1:7:
      1 │ import "Linaria_1ix7c25.linaria.css"; export const Lina... 
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:        

    node_modules/tsup/dist/index.js:1329:13:
      1329 │       build2.onLoadX ({ filter: /\.css$/ }, async (arg...

Looking the source code, I had noticed that the postcss is one of the default plugins, so I tried removing it and worked.

> tsup

CLI Building entry: src/index.ts
CLI Using tsconfig: tsconfig.json
CLI tsup v6.7.0
CLI Using tsup config: C:\Users\vvictorino\Documents\Estudo\tsup-linaria\tsup.config.mjs
CLI Target: esnext
CLI Cleaning output folder
CJS Build start
ESM Build start
CJS dist\index.js      1.15 KB
CJS dist\index.css     106.00 B
CJS dist\index.css.map 148.00 B
CJS dist\index.js.map  400.00 B
CJS ⚡️ Build success in 864ms  
ESM dist\index.mjs     167.00 B
ESM dist\index.css     106.00 B
ESM dist\index.mjs.map 303.00 B
ESM dist\index.css.map 148.00 B
ESM ⚡️ Build success in 869ms  
DTS Build start
DTS ⚡️ Build success in 2437ms
DTS dist\index.d.ts 63.00 B

Steps to reproduce

1. Install the dependencies

npm i react tsup @linaria/core @linaria/esbuild

2. Create an entry file src/index.js

import { css } from "@linaria/core";

export const Linaria = () => (
  <div
    className={css`
      color: red;
    `}
  ></div>
);

3. Create a tsup.config.mjs file

import { defineConfig } from "tsup";
import linaria from "@linaria/esbuild";

const prod = process.env.NODE_ENV === "production";

export default defineConfig({
  entry: ["src/index.ts"],
  platform: "node",
  format: ["cjs", "esm"],
  splitting: false,
  sourcemap: true,
  clean: true,
  dts: true,
  esbuildPlugins: [
    linaria({
      sourceMap: prod,
    }),
  ],
});

4. Run the tsup CLI

Thank you for the excellent work!!

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[trhinehart-godaddy]

Same issue, looking to ignore/filter linaria generated css files from postcss to see if that resolves?

[PrettyCoffee]

Any updates on that topic? Just wanted to do the same and didn't work out as expected 😅
codesandbox

[PrettyCoffee]

Did some diving in the issues and apparently its easy to disable one of the internal plugins by creating a local plugin:

import { defineConfig, Options } from "tsup";
import linaria from "@linaria/esbuild"

type Plugin = NonNullable< Options["plugins"]>[number]
const disablePlugin = (name: string):Plugin => ({
  name: `disable-plugin-${name}`,
  esbuildOptions: (options) => {
    const plugin = options.plugins?.find(({name}) => name === "postcss");
    if (plugin) {
      plugin.setup = () => Promise.resolve();
    }
  },
})

export default defineConfig({
  ...
  esbuildPlugins: [
    linaria({
      displayName: true,
      sourceMap: true
    }),
  ],
  plugins: [disablePlugin("postcss"), disablePlugin("svelte")],
})

At least that's a solution for now. Would be great if there would be options to exclude internal plugins that can be made optional or if they weren't being included by default, but could just added by the user. :)