fix: generate typed css module

.gitattributes

@@ -1,3 +1,4 @@
 pnpm-lock.yaml linguist-generated=true
 *.snap linguist-generated=true
 **/__snapshots__/* linguist-generated=true
+**.module.less.d.ts linguist-generated=true

dev/css-typed/gen.mts

@@ -0,0 +1,38 @@
+import * as path from 'node:path';
+import * as url from 'node:url';
+
+import camelcase from 'camelcase';
+import * as css from 'css-tree';
+import less from 'less';
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+// 跟 '<projectRoot>/packages/website/vite.config.ts' 保持同步
+const lessAdditionalData = '@import "./src/style/index.less";';
+
+export async function generateDeclaration(p: string, content: string) {
+ const filename = path.basename(p);
+ const dirname = path.dirname(p);
+ if (filename.endsWith('.less')) {
+ const o = await less.render(lessAdditionalData + '\n' + content, {
+ filename,
+ paths: [path.join(__dirname, '../..', 'packages/website'), dirname],
+ });
+ content = o.css;
+ }
+
+ let ts = `// Generated by ./dev/css-typed/index.mts, DO NOT EDIT IT!!!\n// source file: ${filename}\n\n`;
+ const ast = css.parse(content, { filename });
+ const classNames = new Set<string>();
+ css.walk(ast, (node) => {
+ if (node.type === `ClassSelector`) {
+ classNames.add(camelcase(node.name));
+ }
+ });
+
+ classNames.forEach((name) => {
+ ts += `export const ${name}: string;\n`;
+ });
+
+ return ts;
+}

dev/css-typed/index.mts

@@ -0,0 +1,103 @@
+import * as fs from 'node:fs/promises';
+import { join, sep } from 'node:path';
+import * as process from 'node:process';
+import url from 'node:url';
+
+import { minimatch } from 'minimatch';
+
+import { walk } from '../utils/index.mts';
+import { generateDeclaration } from './gen.mts';
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const cssModulePattern = new minimatch.Minimatch('**/*.module.less');
+const dtsPattern = new minimatch.Minimatch('**/*.module.less.d.ts');
+
+async function fileExist(p: string): Promise<boolean> {
+ try {
+ await fs.stat(p);
+ return true;
+ } catch (err: unknown) {
+ // @ts-expect-error
+ if (err.code === 'ENOENT') {
+ return false;
+ }
+ throw err;
+ }
+}
+
+async function generateForCssModuleFile(p: string) {
+ const dstPath = p + '.d.ts';
+ let write = false;
+ const src = await fs.readFile(p);
+ const generated = await generateDeclaration(p, src.toString('utf-8'));
+ if (await fileExist(dstPath)) {
+ const dst = (await fs.readFile(dstPath)).toString('utf-8');
+ if (dst !== generated) {
+ write = true;
+ console.log('updating', dstPath);
+ await fs.writeFile(dstPath, generated);
+ }
+ } else {
+ write = true;
+ console.log('create', dstPath);
+ await fs.writeFile(dstPath, generated);
+ }
+
+ return { dstPath, write };
+}
+
+async function main() {
+ const dir = join(__dirname, '../..', 'packages/website');
+
+ const expectedDST = new Set<string>();
+ for await (const p of walk(dir)) {
+ if (p.includes(`${sep}node_modules${sep}`)) {
+ continue;
+ }
+
+ if (cssModulePattern.match(p)) {
+ const { dstPath } = await generateForCssModuleFile(p);
+ expectedDST.add(dstPath);
+ }
+ }
+
+ // remove orphan
+ for await (const p of walk(dir)) {
+ if (p.includes(`${sep}node_modules${sep}`)) {
+ continue;
+ }
+
+ if (dtsPattern.match(p)) {
+ if (!expectedDST.has(p)) {
+ console.log('remove orphan dts', p);
+ await fs.unlink(p);
+ }
+ }
+ }
+}
+
+async function onFiles(files: string[]) {
+ for (const file of files) {
+ if (cssModulePattern.match(file)) {
+ const { write } = await generateForCssModuleFile(file);
+ if (write) {
+ console.error(`${file}.d.ts is updated, try again`);
+ process.exit(1);
+ }
+ } else if (dtsPattern.match(file)) {
+ const sourceFileExist = await fileExist(file.slice(0, file.length - '.d.ts'.length));
+ if (!sourceFileExist) {
+ console.error('please remove file ' + file);
+ process.exit(1);
+ }
+ }
+ }
+}
+
+if (process.argv.length === 2) {
+ await main();
+} else {
+ // with filenames, for lint staged
+ await onFiles(process.argv.slice(2));
+}

dev/tsconfig.json

@@ -0,0 +1,10 @@
+{
+ "extends": "../tsconfig.style.json",
+ "compilerOptions": {
+ "allowJs": false,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "noEmit": true
+ }
+}

dev/utils/index.mts

@@ -0,0 +1,11 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+export async function* walk(dir: string): AsyncIterableIterator<string> {
+ for await (const d of await fs.promises.opendir(dir)) {
+ const entry = path.join(dir, d.name);
+ if (d.isDirectory()) {
+ yield* walk(entry);
+ } else if (d.isFile()) yield entry;
+ }
+}

package.json

@@ -27,6 +27,7 @@
  "website": "pnpm --filter=@bangumi/website",
  "utils": "pnpm --filter=@bangumi/utils",
  "lint-staged": "lint-staged -q",
+ "generate": "tsx ./dev/css-typed/index.mts",
  "type-check": "tsc --noEmit"
  },
  "engines": {
@@ -41,6 +42,12 @@
  "trailingComma": "all"
  },
  "lint-staged": {
+ "*.module.less": [
+ "tsx ./dev/css-typed/index.mts"
+ ],
+ "*.module.less.d.ts": [
+ "tsx ./dev/css-typed/index.mts"
+ ],
  "*.{js,ts,mts,cts,tsx,cjs,mjs}": [
  "eslint --fix"
  ],
@@ -53,9 +60,12 @@
  "@actions/core": "^1.10.0",
  "@actions/exec": "^1.1.1",
  "@actions/github": "^5.1.1",
+ "@bangumi/design": "workspace:*",
  "@octokit/openapi-types": "^16.0.0",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^14.0.0",
+ "@types/css-tree": "^2.3.1",
+ "@types/less": "^3.0.3",
  "@types/node": "^18.15.11",
  "@types/testing-library__jest-dom": "^5.14.5",
  "@types/web": "^0.0.99",
@@ -64,6 +74,8 @@
  "@vitejs/plugin-react": "^3.1.0",
  "@vitest/coverage-c8": "^0.29.8",
  "@vitest/ui": "^0.29.8",
+ "camelcase": "^6.0.1",
+ "css-tree": "^2.3.1",
  "eslint": "^8.37.0",
  "eslint-config-prettier": "^8.8.0",
  "eslint-config-standard": "^17.0.0",
@@ -81,7 +93,9 @@
  "eslint-plugin-unused-imports": "^2.0.0",
  "husky": "^8.0.3",
  "jsdom": "^21.1.1",
+ "less": "^4.1.3",
  "lint-staged": "^13.2.0",
+ "minimatch": "^8.0.3",
  "postcss": "^8.4.21",
  "postcss-less": "^6.0.0",
  "prettier": "^2.8.7",

packages/website/plugins/typed-css-modules.mts

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
+import * as fs from 'node:fs/promises';
+
+import type { Plugin, UserConfig } from 'vite';
+
+import { generateDeclaration } from '../../../dev/css-typed/gen.mts';
+
+export default function plugin(): Plugin {
+ return {
+ name: 'typed-css-modules',
+ config: () => {
+ const config: UserConfig = {
+ css: {
+ modules: {
+ localsConvention: 'camelCaseOnly',
+ },
+ },
+ };
+ return config;
+ },
+ configureServer: (server) => {
+ server.watcher.on('change', async (path) => {
+ if (!path.endsWith('.module.less')) return;
+ let dts: string | undefined;
+ try {
+ const content = await fs.readFile(path);
+ dts = await generateDeclaration(path, content.toString('utf-8'));
+ } catch {
+ /* ignore */
+ }
+
+ if (dts) {
+ await fs.writeFile(path + '.d.ts', dts);
+ }
+ });
+ server.watcher.on('unlink', async (path) => {
+ if (!path.endsWith('.module.css')) return;
+
+ try {
+ await fs.unlink(path + '.d.ts');
+ } catch {
+ /* ignore */
+ }
+ });
+ },
+ };
+}