Skip to content

Commit 07d581f

Browse files
mayank1513mayank1513
committed
Plugin -- not working for global css files
1 parent e8465e5 commit 07d581f

10 files changed

Lines changed: 249 additions & 17 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ build
1616
# misc
1717
.DS_Store
1818
*.pem
19+
dist
1920

2021
# debug
2122
npm-debug.log*

‎lib/esbuild-plugin-react18-css-example/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "esbuild-plugin-react18-css-example",
33
"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
4-
"private": false,
4+
"private": true,
55
"version": "0.0.0",
66
"description": "An intuitive React.js fork me ribbon component for promoting open source project forks.",
77
"main": "./index.ts",
@@ -34,6 +34,7 @@
3434
"esbuild-plugin-css-module": "^0.0.1",
3535
"esbuild-plugin-react18": "^0.0.7",
3636
"eslint-config-custom": "workspace:*",
37+
"esbuild-plugin-react18-css": "workspace:*",
3738
"jsdom": "^24.0.0",
3839
"octokit": "^3.1.2",
3940
"react": "^18.2.0",

‎lib/esbuild-plugin-react18-css-example/src/global.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
::placeholder {
2+
color: gray;
3+
}
4+
.fork {
5+
position: fixed;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
font-weight: 700;
10+
width: var(--w);
11+
height: var(--h);
12+
transform: rotate(45deg);
13+
top: calc(0.354 * var(--w) - var(--h));
14+
right: calc(-0.14 * var(--w) - 0.5 * var(--h));
15+
color: var(--tc);
16+
background-color: var(--bc);
17+
border: 1px dashed gray;
18+
text-shadow:
19+
0px 1px 0px rgba(255, 255, 255, 0.3),
20+
0px -1px 0px rgba(0, 0, 0, 0.7);
21+
transition: all 0s;
22+
}
23+
.fork:hover {
24+
filter: drop-shadow(0 0 5px var(--sc));
25+
}

‎lib/esbuild-plugin-react18-css-example/tsup.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { defineConfig } from "tsup";
22
import react18Plugin from "esbuild-plugin-react18";
3-
import cssModulePlugin from "esbuild-plugin-css-module";
3+
import cssModulePlugin from "esbuild-plugin-react18-css";
44

55
export default defineConfig(options => ({
66
format: ["cjs", "esm"],

‎lib/esbuild-plugin-react18-css/package.json‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,63 @@
11
{
22
"name": "esbuild-plugin-react18-css",
3+
"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
4+
"private": false,
5+
"version": "0.0.0",
6+
"description": "An intuitive React.js fork me ribbon component for promoting open source project forks.",
7+
"main": "dist/index.js",
8+
"types": "dist/index.d.ts",
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/react18-tools/esbuild-plugin-react18-css.git"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/react18-tools/esbuild-plugin-react18-css/issues"
15+
},
16+
"homepage": "https://github.com/react18-tools/esbuild-plugin-react18-css#readme",
17+
"sideEffects": false,
18+
"license": "MIT",
19+
"scripts": {
20+
"test": "vitest run --coverage",
21+
"build": "tsup src && node touchup.js",
22+
"doc": "cp -f ../../README.md README.md && typedoc",
23+
"publish-package": "cd dist && npm publish --provenance --access public",
24+
"lint": "eslint ."
25+
},
26+
"dependencies": {
27+
"autoprefixer": "^10.4.18",
28+
"postcss": "^8.4.35",
29+
"postcss-modules": "^6.0.0"
30+
},
31+
"peerDependencies": {
32+
"autoprefixer": "^10.4.18",
33+
"postcss": "^8.4.35",
34+
"postcss-modules": "^6.0.0"
35+
},
336
"devDependencies": {
437
"@types/node": "^20.11.22",
538
"@vitest/coverage-v8": "^1.3.1",
639
"esbuild": "^0.20.2",
40+
"tsup": "^8.0.2",
741
"typescript": "^5.4.2",
842
"vitest": "^1.3.1"
9-
}
43+
},
44+
"funding": {
45+
"type": "github",
46+
"url": "https://github.com/sponsors/mayank1513"
47+
},
48+
"keywords": [
49+
"esbuild-plugin-css-module",
50+
"esbuild-plugin",
51+
"typescript",
52+
"javascript",
53+
"css-module",
54+
"postcss",
55+
"esbuild",
56+
"react18",
57+
"react",
58+
"nextjs",
59+
"tsup",
60+
"css",
61+
"mayank1513"
62+
]
1063
}

‎lib/esbuild-plugin-react18-css/src/index.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Plugin } from "esbuild";
2+
import fs from "node:fs";
3+
import path from "node:path";
4+
import postcss from "postcss";
5+
import postcssModules from "postcss-modules";
6+
import autoPrefixer from "autoprefixer";
7+
8+
const cssModulePlugin: () => Plugin = () => ({
9+
name: "esbuild-plugin-react18-css-" + uuid(),
10+
setup(build): void {
11+
build.onResolve({ filter: /\.module\.css$/, namespace: "file" }, args => ({
12+
path: `${args.path}#css-module`,
13+
namespace: "css-module",
14+
pluginData: {
15+
pathDir: path.join(args.resolveDir, args.path),
16+
},
17+
}));
18+
build.onLoad({ filter: /#css-module$/, namespace: "css-module" }, async args => {
19+
const { pluginData } = args as {
20+
pluginData: { pathDir: string };
21+
};
22+
23+
const source = fs.readFileSync(pluginData.pathDir, "utf8");
24+
25+
let cssModule = {};
26+
const result = await postcss([
27+
postcssModules({
28+
getJSON(_, json) {
29+
cssModule = json;
30+
},
31+
generateScopedName: "[name]__[local]",
32+
}),
33+
autoPrefixer,
34+
]).process(source, { from: pluginData.pathDir });
35+
36+
return {
37+
pluginData: { css: result.css },
38+
contents: `import "${pluginData.pathDir}"; export default ${JSON.stringify(cssModule)}`,
39+
};
40+
});
41+
42+
/** apply auto-prefixer to css */
43+
44+
build.onLoad({ filter: /\.css$/, namespace: "file" }, async args => {
45+
const source = fs.readFileSync(args.path, "utf8");
46+
const result = await postcss([autoPrefixer]).process(source, { from: args.path });
47+
console.log("CSS ------------------------------------ ", result.css);
48+
return { contents: result.css, loader: "css" };
49+
});
50+
51+
build.onResolve({ filter: /\.module\.css$/, namespace: "css-module" }, args => ({
52+
path: path.join(args.resolveDir, args.path, "#css-module-data"),
53+
namespace: "css-module",
54+
pluginData: args.pluginData as { css: string },
55+
}));
56+
57+
build.onLoad({ filter: /#css-module-data$/, namespace: "css-module" }, args => ({
58+
contents: (args.pluginData as { css: string }).css,
59+
loader: "css",
60+
}));
61+
},
62+
});
63+
64+
const uuid = () => (Date.now() * Math.random()).toString(36).slice(0, 8);
65+
66+
export = cssModulePlugin;

‎lib/esbuild-plugin-react18-css/touchup.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* eslint-disable -- no need - external file */
2+
"use strict";
3+
4+
const fs = require("fs");
5+
const path = require("path");
6+
const packageJson = require(path.resolve(__dirname, "package.json"));
7+
if (process.env.TOKEN) {
8+
const { Octokit } = require("octokit");
9+
// Octokit.js
10+
// https://github.com/octokit/core.js#readme
11+
const octokit = new Octokit({
12+
auth: process.env.TOKEN,
13+
});
14+
15+
const octoOptions = {
16+
owner: process.env.OWNER,
17+
repo: process.env.REPO,
18+
headers: {
19+
"X-GitHub-Api-Version": "2022-11-28",
20+
},
21+
};
22+
const tag_name = `v${packageJson.version}`;
23+
const name = `Release ${tag_name}`;
24+
/** Create a release */
25+
octokit.request("POST /repos/{owner}/{repo}/releases", {
26+
...octoOptions,
27+
tag_name,
28+
target_commitish: "main",
29+
name,
30+
draft: false,
31+
prerelease: false,
32+
generate_release_notes: true,
33+
headers: {
34+
"X-GitHub-Api-Version": "2022-11-28",
35+
},
36+
});
37+
}
38+
delete packageJson.devDependencies;
39+
delete packageJson.scripts;
40+
41+
packageJson.main = "index.js";
42+
packageJson.types = "index.d.ts";
43+
44+
fs.writeFileSync(
45+
path.resolve(__dirname, "dist", "package.json"),
46+
JSON.stringify(packageJson, null, 2),
47+
);
48+
49+
fs.copyFileSync(path.resolve(__dirname, "..", "..", "README.md"), path.resolve(__dirname, "dist", "README.md"));
50+
51+
const dirs = [path.resolve(__dirname, "dist")];
52+
53+
while (dirs.length) {
54+
const dir = dirs.shift();
55+
fs.readdirSync(dir).forEach(f => {
56+
const f1 = path.resolve(dir, f);
57+
if (f.includes(".test.")) fs.unlink(f1, () => {});
58+
else if (fs.lstatSync(f1).isDirectory()) {
59+
dirs.push(f1);
60+
}
61+
});
62+
}

‎lib/esbuild-plugin-react18-css/tsup.config.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { defineConfig } from "tsup";
2+
3+
export default defineConfig(options => ({
4+
format: ["cjs", "esm"],
5+
sourcemap: false,
6+
clean: true,
7+
bundle: true,
8+
minify: !options.watch,
9+
legacyOutput: true,
10+
dts: true,
11+
}));

‎lib/esbuild-plugin-react18-css/vitest.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from "vitest/config";
2+
3+
// https://vitejs.dev/config/
4+
export default defineConfig({
5+
test: {
6+
globals: true,
7+
coverage: {
8+
include: ["src/**"],
9+
reporter: ["text", "json", "clover", "html"],
10+
},
11+
},
12+
});

‎turbo.json‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
{
2-
"$schema": "https://turbo.build/schema.json",
3-
"globalDependencies": ["**/.env.*local"],
4-
"pipeline": {
5-
"build": {
6-
"outputs": [".next/**", "!.next/cache/**"]
7-
},
8-
"lint": {},
9-
"test": {},
10-
"doc": {},
11-
"dev": {
12-
"cache": false,
13-
"persistent": true
14-
}
15-
}
2+
"$schema": "https://turbo.build/schema.json",
3+
"globalDependencies": ["**/.env.*local"],
4+
"pipeline": {
5+
"build": {
6+
"outputs": [".next/**", "!.next/cache/**"],
7+
"dependsOn": ["^build"]
8+
},
9+
"lint": {},
10+
"test": {},
11+
"doc": {},
12+
"dev": {
13+
"cache": false,
14+
"persistent": true
15+
}
16+
}
1617
}

0 commit comments

Comments
 (0)