feat: add static-style extract test

Author: aibayanyu20

components/_util/cssinjs/StyleContext.tsx

@@ -88,7 +88,7 @@ export const useStyleProvider = (props: UseStyleProviderProps) => {
   const parentContext = useStyleInject();
   const context = shallowRef<Partial<StyleContextProps>>({ ...defaultStyleContext });
   watch(
-    [props, parentContext],
+    [() => props, () => parentContext],
     () => {
       const mergedContext: Partial<StyleContextProps> = {
         ...parentContext.value,

components/_util/static-style-extract/index.tsx

@@ -11,6 +11,28 @@ const blackList: string[] = [
   'Popover',
   'Tooltip',
   'Tour',
+  'SelectOptGroup',
+  'SelectOption',
+  'Dropdown',
+  'Anchor',
+  'QuarterPicker',
+  'MenuDivider',
+  'MenuItem',
+  'MenuItemGroup',
+  'SubMenu',
+  'MentionsOption',
+  'TableColumn',
+  'TableColumnGroup',
+  'TableSummary',
+  'TableSummaryRow',
+  'TableSummaryCell',
+  'TreeNode',
+  'TreeSelectNode',
+  'TabPane',
+  'CheckableTag',
+  'TimelineItem',
+  'LocaleProvider',
+  'QRCode',
 ];
 
 const defaultNode = () => (
@@ -19,7 +41,7 @@ const defaultNode = () => (
       .filter(name => !blackList.includes(name) && name[0] === name[0].toUpperCase())
       .map(compName => {
         const Comp = antd[compName];
-        if (compName === 'Dropdown' || compName === 'Anchor') {
+        if (compName === 'Dropdown') {
           return (
             <Comp key={compName} menu={{ items: [] }}>
               <div />

components/_util/static-style-extract/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,62 @@
+// import { StyleProvider } from '../../cssinjs';
+import { extractStyle } from '../index';
+// import { ConfigProvider } from '../../../components';
+
+const testGreenColor = '#008000';
+describe('Static-Style-Extract', () => {
+  it('should extract static styles', () => {
+    const cssText = extractStyle();
+    expect(cssText).not.toContain(testGreenColor);
+    expect(cssText).toMatchSnapshot();
+  });
+  // it('should extract static styles with customTheme',  () => {
+  //   const cssText =  extractStyle((node) => {
+  //     return(
+  //       <ConfigProvider
+  //         theme={{
+  //           token: {
+  //             colorPrimary: testGreenColor,
+  //           },
+  //         }}
+  //       >
+  //         {node}
+  //       </ConfigProvider>
+  //     );
+  //   });
+  //   expect(cssText).toContain(testGreenColor);
+  //   expect(cssText).toMatchSnapshot();
+  // });
+  // it('with custom hashPriority', () => {
+  //   const cssText = extractStyle(
+  //     (node) => (
+  //       <StyleProvider hashPriority='high'>
+  //         <ConfigProvider
+  //           theme={{
+  //             token: {
+  //               colorPrimary: testGreenColor,
+  //             },
+  //           }}
+  //         >
+  //           {node}
+  //         </ConfigProvider>
+  //       </StyleProvider>
+  //     ),
+  //   );
+  //   expect(cssText).toContain(testGreenColor);
+  //   expect(cssText).not.toContain(':where');
+  //   expect(cssText).toMatchSnapshot();
+  //
+  //   const cssText2 = extractStyle((node) => (
+  //     <ConfigProvider
+  //       theme={{
+  //         token: {
+  //           colorPrimary: testGreenColor,
+  //         },
+  //       }}
+  //     >
+  //       {node}
+  //     </ConfigProvider>
+  //   ));
+  //   expect(cssText2).toContain(':where');
+  // });
+});