fix: extract missing styles (#25)

Author: seanparmelee

package.json

@@ -35,6 +35,7 @@
     "now-build": "npm run build"
   },
   "devDependencies": {
+    "@adobe/css-tools": "^4.4.4",
     "@rc-component/father-plugin": "^1.0.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.0",

src/index.tsx

@@ -42,6 +42,7 @@ const ComponentCustomizeRender: Record<
   Space: (Space: any) => (
     <>
       <Space />
+      <Space.Addon />
       <Space.Compact>
         <antd.Button />
       </Space.Compact>
@@ -51,6 +52,7 @@ const ComponentCustomizeRender: Record<
     <>
       <Modal />
       <Modal._InternalPanelDoNotUseOrYouWillBeFired />
+      <Modal._InternalPanelDoNotUseOrYouWillBeFired type="confirm" />
     </>
   ),
   message: (message: any) => {
@@ -67,6 +69,20 @@ const ComponentCustomizeRender: Record<
       <Layout.Sider />
     </>
   ),
+  Cascader: (Cascader: typeof antd.Cascader) => (
+    <>
+      <Cascader options={[]} />
+      <Cascader.Panel options={[]} />
+    </>
+  ),
+  Input: (Input: typeof antd.Input) => (
+    <>
+      <Input />
+      <Input.OTP />
+      <Input.Search />
+      <Input.TextArea />
+    </>
+  ),
 };
 
 interface NodeProps {

tests/coverage.test.tsx

@@ -0,0 +1,70 @@
+import { StyleProvider } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
+import type { CssStylesheetAST, CssAtRuleAST } from '@adobe/css-tools';
+import { parse, CssTypes } from '@adobe/css-tools';
+import { extractStyle } from '../src';
+import fs from 'fs';
+
+function extractSelectors(ast: CssStylesheetAST): Set<string> {
+  const selectors = new Set<string>();
+
+  function walk(rules: CssAtRuleAST[]) {
+    for (const rule of rules) {
+      switch (rule.type) {
+        case CssTypes.rule:
+          rule.selectors?.forEach(sel => selectors.add(sel));
+          break;
+        case CssTypes.media:
+        case CssTypes.supports:
+        case CssTypes.layer:
+          if (rule.rules) walk(rule.rules);
+          break;
+        default:
+          // Ignore other rule types (comments, keyframes, font-face, etc.)
+          break;
+      }
+    }
+  }
+
+  if (ast.stylesheet?.rules) {
+    walk(ast.stylesheet.rules);
+  }
+  return selectors;
+}
+
+describe('CSS Coverage', () => {
+  it('should extract all antd selectors', () => {
+    // Extract CSS with:
+    // - hashPriority='high' to avoid :where() wrapper
+    // - hashed: false to avoid hash class prefixes
+    const extractedCss = extractStyle((node) => (
+      <StyleProvider hashPriority="high">
+        <ConfigProvider theme={{ hashed: false }}>
+          {node}
+        </ConfigProvider>
+      </StyleProvider>
+    ));
+
+    const antdCssPath = require.resolve('antd/dist/antd.css');
+    const antdCss = fs.readFileSync(antdCssPath, 'utf-8');
+
+    const antdAst = parse(antdCss);
+    const extractedAst = parse(extractedCss);
+
+    const antdSelectors = extractSelectors(antdAst);
+    const extractedSelectors = extractSelectors(extractedAst);
+
+    const missing = [...antdSelectors].filter(
+      sel => !extractedSelectors.has(sel)
+    );
+
+    const coverage = ((antdSelectors.size - missing.length) / antdSelectors.size * 100).toFixed(2);
+    console.log(`CSS Coverage: ${coverage}% (${missing.length} missing of ${antdSelectors.size} selectors)`);
+
+    if (missing.length > 0) {
+      console.log('Missing selectors:', JSON.stringify(missing, null, 2));
+    }
+
+    expect(missing).toEqual([]);
+  });
+});