fix: esm import (#172)

* chore: add script to patch esm

* refactor: replace css with postcss

* fix: fix cr issue

* chore: update version

* refactor: use tsc-alias to resolve

* chore: update write package.json shell

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

---------

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: Aarebecca

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",
@@ -50,7 +50,7 @@
   "scripts": {
     "build": "run-s clean build:esm build:cjs build:umd size",
     "build:cjs": "tsc --module commonjs --outDir lib",
-    "build:esm": "tsc --module ESNext --outDir esm",
+    "build:esm": "tsc --module ESNext --outDir esm && tsc-alias -p tsconfig.json --outDir esm && node -e \"require('fs').writeFileSync('esm/package.json', JSON.stringify({ type: 'module' }))\"",
     "build:site": "npm --prefix site run build:static",
     "build:umd": "vite build",
     "build:watch": "tsc -p tsconfig.json --watch",
@@ -99,14 +99,14 @@
   "dependencies": {
     "@antv/hierarchy": "^0.7.0",
     "@antv/layout": "^2.0.0-beta.0",
-    "css": "^3.0.0",
     "culori": "^4.0.2",
     "d3": "^7.9.0",
     "eventemitter3": "^5.0.1",
     "flru": "^1.0.2",
     "linkedom": "^0.18.12",
     "lodash-es": "^4.17.21",
     "measury": "^0.1.5",
+    "postcss": "^8.5.6",
     "roughjs": "^4.6.6",
     "round-polygon": "^0.6.7",
     "tinycolor2": "^1.6.0"
@@ -119,7 +119,6 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
     "@size-limit/file": "^11.2.0",
-    "@types/css": "^0.0.38",
     "@types/culori": "^4.0.1",
     "@types/d3": "^7.4.3",
     "@types/jsdom": "^21.1.7",
@@ -144,6 +143,7 @@
     "rollup": "^4.53.2",
     "rollup-plugin-visualizer": "^6.0.5",
     "size-limit": "^11.2.0",
+    "tsc-alias": "^1.8.16",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.43.0",
     "vite": "^7.1.5",

src/exporter/font.ts

@@ -1,6 +1,4 @@
-import type { FontFace as CSSFontFace, Declaration, Stylesheet } from 'css';
-// @ts-expect-error ignore
-import parse from 'css/lib/parse';
+import postcss from 'postcss';
 import { getFontURLs, getWoff2BaseURL } from '../renderer';
 import {
   createElement,
@@ -116,27 +114,36 @@ function collectUsedFonts(svg: SVGSVGElement) {
 /**
  * 解析给定 font-family 对应的 CSS @font-face
  */
-export async function parseFontFamily(fontFamily: string) {
+async function parseFontFamily(fontFamily: string) {
   const urls = getFontURLs(fontFamily);
-
   const fontFaces: Partial<FontFaceAttributes>[] = [];
 
   await Promise.allSettled(
     urls.map(async (url) => {
-      const css = await fetchWithCache(url)
+      const cssText = await fetchWithCache(url)
         .then((res) => res.text())
-        .then((text) => parse(text) as Stylesheet)
         .catch(() => {
-          console.error(`Failed to fetch or parse font CSS: ${url}`);
+          console.error(`Failed to fetch font CSS: ${url}`);
           return null;
         });
 
-      css?.stylesheet?.rules.forEach((rule) => {
-        if (rule.type === 'font-face') {
-          const fontFace = parseFontFace(rule as CSSFontFace);
-          fontFaces.push(fontFace);
-        }
-      });
+      if (!cssText) return;
+
+      try {
+        const root = postcss.parse(cssText);
+
+        root.walkAtRules('font-face', (rule) => {
+          const fontFace: Record<string, string> = {};
+
+          rule.walkDecls((decl) => {
+            fontFace[decl.prop] = decl.value;
+          });
+
+          fontFaces.push(fontFace as Partial<FontFaceAttributes>);
+        });
+      } catch (error) {
+        console.error(`Failed to parse CSS: ${url}`, error);
+      }
     }),
   );
 
@@ -164,24 +171,6 @@ export function getActualLoadedFontFace(fontFamily: string) {
   return fonts;
 }
 
-/**
- * 从 css 的 FontFace 规则中提取声明
- */
-function parseFontFace(rule: CSSFontFace) {
-  const declarations = (rule.declarations || []) as Declaration[];
-  const attrs: Record<string, string> = {};
-
-  declarations.forEach((declaration) => {
-    const { property, value } = declaration;
-    if (property && value) {
-      attrs[property] = value;
-    }
-  });
-
-  // 这里返回 Partial，后面统一 normalize
-  return attrs as Partial<FontFaceAttributes>;
-}
-
 /**
  * 将不完整的 FontFaceAttributes 补全为完整结构，给后续逻辑使用
  */

src/version.ts

@@ -1 +1 @@
-export const VERSION = '0.2.10';
+export const VERSION = '0.2.11';

tsconfig.json

@@ -22,5 +22,13 @@
     }
   },
   "include": ["src"],
-  "exclude": ["node_modules", "dist", "lib", "esm"]
+  "exclude": ["node_modules", "dist", "lib", "esm"],
+  "tsc-alias": {
+    "verbose": false,
+    "resolveFullPaths": true,
+    "fileExtensions": {
+      "inputGlob": "{js,jsx,mjs}",
+      "outputCheck": ["js", "json", "jsx", "mjs"]
+    }
+  }
 }