Postcss plugin, as default esbuild plugin, is causing conflicts with linariacss
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 BSteps to reproduce
- Install the dependencies
npm i react tsup @linaria/core @linaria/esbuild- Create an entry file
src/index.js
import { css } from "@linaria/core";
export const Linaria = () => (
<div
className={css`
color: red;
`}
></div>
);- Create a
tsup.config.mjsfile
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,
}),
],
});- Run the tsup CLI
Thank you for the excellent work!!
egoist / tsup
The simplest and fastest way to bundle your TypeScript libraries.
9.4k
Contributors get 70% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too