feat: extractStyles support types config (#169)

* feat: extractStyles support types config

* chore: add test

src/extractStyle.ts

@@ -23,13 +23,26 @@ const ExtractStyleFns = {
   [CSS_VAR_PREFIX]: cssVarExtractStyle,
 };
 
+type ExtractStyleType = keyof typeof ExtractStyleFns;
+
 function isNotNull<T>(value: T | null): value is T {
   return value !== null;
 }
 
-export default function extractStyle(cache: Cache, plain = false) {
+export default function extractStyle(
+  cache: Cache,
+  options?:
+    | boolean
+    | {
+        plain?: boolean;
+        types?: ExtractStyleType | ExtractStyleType[];
+      },
+) {
+  const { plain = false, types = ['style', 'token', 'cssVar'] } =
+    typeof options === 'boolean' ? { plain: options } : options || {};
+
   const matchPrefixRegexp = new RegExp(
-    `^(${Object.keys(ExtractStyleFns).join('|')})%`,
+    `^(${(typeof types === 'string' ? [types] : types).join('|')})%`,
   );
 
   // prefix with `style` is used for `useStyleRegister` to cache style context

tests/css-variables.spec.tsx

@@ -460,4 +460,32 @@ describe('CSS Variables', () => {
       styles.some((style) => style.textContent?.includes('var(--bank-')),
     ).toBe(true);
   });
+
+  it('could extract cssVar only', () => {
+    const cache = createCache();
+    render(
+      <StyleProvider cache={cache}>
+        <DesignTokenProvider
+          theme={{
+            cssVar: {
+              key: 'apple',
+            },
+          }}
+        >
+          <Box className="target" />
+        </DesignTokenProvider>
+      </StyleProvider>,
+    );
+
+    const cssVarStyle = extractStyle(cache, {
+      types: ['cssVar', 'token'],
+      plain: true,
+    });
+    const styleStyle = extractStyle(cache, { types: 'style', plain: true });
+
+    expect(cssVarStyle).toContain('--rc-line-height:1.5;');
+    expect(cssVarStyle).not.toContain('line-height:var(--rc-line-height)');
+    expect(styleStyle).toContain('line-height:var(--rc-line-height)');
+    expect(styleStyle).not.toContain('--rc-line-height:1.5;');
+  });
 });