feat: support whitelist and blacklist (#21)

* feat: support whitelist and blacklist

* chore: update flow

Author: MadCcc

.github/workflows/main.yml

@@ -15,10 +15,10 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '16'
+          node-version: '20'
 
       - name: cache package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
@@ -35,29 +35,29 @@ jobs:
 
       - name: cache node_modules
         id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
 
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: npm i
-  
+
   lint:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
         uses: actions/checkout@master
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -66,21 +66,21 @@ jobs:
         run: npm run lint
 
     needs: setup
-  
+
   compile:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
         uses: actions/checkout@master
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -89,26 +89,26 @@ jobs:
         run: npm run compile
 
     needs: setup
-  
+
   coverage:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
         uses: actions/checkout@master
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
 
       - name: coverage
         run: npm run coverage && bash <(curl -s https://codecov.io/bash)
 
-    needs: setup
+    needs: setup

package.json

@@ -40,8 +40,8 @@
     "@testing-library/react": "^13.0.0",
     "@types/classnames": "^2.2.10",
     "@types/jest": "^26.0.15",
-    "@types/react": "^16.8.19",
-    "@types/react-dom": "^16.8.4",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
     "antd": "^5.8.5",
     "cross-env": "^7.0.1",
     "dumi": "^2.1.0",
@@ -57,13 +57,7 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.8.1",
-    "@babel/runtime": "^7.18.3",
-    "@rc-component/portal": "^1.1.0",
-    "classnames": "^2.3.2",
-    "rc-align": "^4.0.0",
-    "rc-motion": "^2.0.0",
-    "rc-resize-observer": "^1.3.1",
-    "rc-util": "^5.27.1"
+    "@babel/runtime": "^7.18.3"
   },
   "peerDependencies": {
     "antd": "^5.3.0",

src/index.tsx

@@ -1,14 +1,10 @@
-import {
-  createCache,
-  extractStyle as extStyle,
-  StyleProvider,
-} from '@ant-design/cssinjs';
+import { createCache, extractStyle as extStyle, StyleProvider } from '@ant-design/cssinjs';
+import { renderToString } from 'react-dom/server';
 import * as antd from 'antd';
 import React from 'react';
-import { renderToString } from 'react-dom/server';
 import type { CustomRender } from './interface';
 
-const blackList: string[] = [
+const defaultBlackList: string[] = [
   'ConfigProvider',
   'Drawer',
   'Grid',
@@ -39,39 +35,65 @@ const ComponentCustomizeRender: Record<
   Tree: (Tree) => <Tree treeData={[]} />,
 };
 
-const defaultNode = () => (
-  <>
-    {Object.keys(antd)
-      .filter(
-        (name) =>
-          !blackList.includes(name) && name[0] === name[0].toUpperCase(),
-      )
-      .map((compName) => {
-        const Comp = antd[compName];
+interface NodeProps {
+  excludes?: string[];
+  includes?: string[];
+}
+
+const defaultNode = ({ excludes = [], includes }: NodeProps) => {
+  const components = includes ?? Object.keys(antd);
 
-        const renderFunc = ComponentCustomizeRender[compName];
+  return (
+    <>
+      {components
+        .filter(
+          (name) =>
+            ![...defaultBlackList, ...excludes].includes(name) && name[0] === name[0].toUpperCase(),
+        )
+        .map((compName) => {
+          const Comp = antd[compName];
 
-        if (renderFunc) {
-          return (
-            <React.Fragment key={compName}>{renderFunc(Comp)}</React.Fragment>
-          );
-        }
+          const renderFunc = ComponentCustomizeRender[compName];
 
-        return <Comp key={compName} />;
-      })}
-  </>
-);
+          if (renderFunc) {
+            return (
+              <React.Fragment key={compName}>{renderFunc(Comp)}</React.Fragment>
+            );
+          }
 
-export function extractStyle(customTheme?: CustomRender): string {
+          return <Comp key={compName} />;
+        })}
+    </>
+  );
+}
+
+export function extractStyle(arg?: CustomRender | {
+  customTheme?: CustomRender,
+  excludes?: string[],
+  includes?: string[],
+}): string {
   const cache = createCache();
+
+  let customTheme: CustomRender | undefined;
+  let excludes: string[];
+  let includes: string[];
+  if (typeof arg === 'function') {
+    customTheme = arg;
+  } else {
+    ({ customTheme, excludes, includes } = arg || {});
+  }
+
+  const nodeProps: NodeProps = {
+    includes,
+    excludes,
+  }
+
   renderToString(
     <StyleProvider cache={cache}>
-      {customTheme ? customTheme(defaultNode()) : defaultNode()}
+      {customTheme ? customTheme(defaultNode(nodeProps)) : defaultNode(nodeProps)}
     </StyleProvider>,
   );
 
   // Grab style from cache
-  const styleText = extStyle(cache, true);
-
-  return styleText;
+  return extStyle(cache, true);
 }

tests/index.test.tsx

@@ -55,4 +55,20 @@ describe('Static-Style-Extract', () => {
     ));
     expect(cssText2).toContain(':where');
   });
+
+  it('whitelist should work', () => {
+    const cssText = extractStyle({
+      includes: ['Button']
+    });
+    expect(cssText).toContain('.ant-btn');
+    expect(cssText).not.toContain('.ant-select');
+  });
+
+  it('blacklist should work', () => {
+    const cssText = extractStyle({
+      excludes: ['Card']
+    });
+    expect(cssText).toContain('.ant-btn');
+    expect(cssText).not.toContain('.ant-card');
+  })
 });