What does it mean to use a plugin to a bundler to perform some work, I mean I have no experience with bundlers whatsoever yet and I wanted to learn about that by creating a “professional” workflow with esbuild and tailwindcss with react, typescript and all the goodies and I am stuck on connecting tailwind css to the eslint and the rest.
I know that to run tailwind css the necessary lib to make it work is postcss, I have followed the tailwind css docs which says
npm install -D tailwindcss
npx tailwindcss init
It says nothing about postcss so I assume that esbuild should be reponsible for it, I assume that is has to bedone via plugin, there are two:
https://github.com/karolis-sh/esbuild-postcss
npm i postcss esbuild-postcss -D
and
https://github.com/martonlederer/esbuild-plugin-postcss2
npm i -D esbuild-plugin-postcss2
Instalation process of the first one includes postcss and the second one does not, hovewer the second one seems to be newer and kind of “on top of” the first one.
The problem is none of them is working… this is my esbuild config:
const { build } = require("esbuild");
build({
publicPath: "http://127.0.0.1:7000/",
entryPoints: ["src/app.tsx", "src/app.css"],
outdir: "public",
// external: ["react", "react-dom"], comented out -throws error cannot use import statement outside a module
loader: {
".png": "file",
".jpg": "file",
".jpeg": "file",
".svg": "file",
".gif": "file",
},
assetNames: "assets/[name]-[hash]", //-[hash]
chunkNames: "chunks/[name]-[hash]",
entryNames: "[dir]/[name]", //-[hash]
splitting: true,
format: "esm",
minify: true,
bundle: true,
sourcemap: "external",
// target: ["es2020", "chrome58", "firefox57", "safari11", "edge16", "node12"],
pure: ["console.log"],
resolveExtensions: [".tsx", ".ts", ".jsx", ".js", ".css", ".json"],
inject: ["./process-shim.js", "./react-shim.js"],
// watch: {
// onRebuild(error, result) {
// if (error) console.error("watch build failed:", error);
// else console.log("watch build succeeded:", result);
// },
// },
}).catch((error) => {
console.error(`Build error: ${error}`);
process.exit(1);
});
and this is my package.json file:
{
"name": "real-world-app",
"version": "1.0.0",
"description": "this is not a package",
"main": "src/app.js",
"scripts": {
"build": "node ./esbuild.config.js",
"watch": "npm run build -- --watch",
"start": "npm run css && node ./esbuild.serve.js -w ",
"lint": "eslint --fix --debug --cache",
"test": "jest",
"css": "npx tailwindcss -i ./src/app.css -o ./public/app.css"
},
"keywords": [
"conduit"
],
"license": "ISC",
"repository": {
"type": "git",
"url": "https://github.com/dziekonskik/real-world-app"
},
"dependencies": {
"esbuild": "^0.14.2",
"esbuild-darwin-64": "^0.14.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/preset-env": "^7.16.5",
"@babel/preset-react": "^7.16.5",
"@babel/preset-typescript": "^7.16.5",
"@testing-library/dom": "^8.11.1",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.0.3",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",
"esbuild-serve": "^1.0.1",
"eslint": "^8.4.1",
"eslint-plugin-jest": "^25.3.0",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-testing-library": "^5.0.1",
"jest": "^27.4.4",
"ts-jest": "^27.1.2",
"typescript": "^4.5.4"
}
}
As a development server i use package esbuild serve. When I run the css command i get kind of an output, hovewer it is more like css reset that the whole tailwind, and when I run npm run build as an output I get the copied directives
@tailwind base;
@tailwind components;
@tailwind utilities;
about which also my VScode is complaining with warnings I do not know what to do with them.
Would you please explain how should I understand this entire process of bundling and using plugins on this example? What am i missing?
Thanks a lot