Merge pull request #21 from ant-design/feat-layer

feat: pass layer

src/util/genStyleUtils.tsx

@@ -27,6 +27,8 @@ import type { UseCSP } from '../hooks/useCSP';
 import type { UsePrefix } from '../hooks/usePrefix';
 import type { UseToken } from '../hooks/useToken';
 
+type LayerConfig = Parameters<typeof useStyleRegister>[0]['layer'];
+
 export interface StyleInfo {
   hashId: string;
   prefixCls: string;
@@ -115,6 +117,7 @@ function genStyleUtils<
     resetFont?: boolean,
   ) => CSSObject;
   getCompUnitless?: GetCompUnitless<CompTokenMap, AliasToken>;
+  layer?: LayerConfig;
 }) {
   // Dependency inversion for preparing basic config.
   const {
@@ -309,6 +312,10 @@ function genStyleUtils<
     const [component] = cells;
     const concatComponent = cells.join('-');
 
+    const mergedLayer = config.layer || {
+      name: 'antd',
+    };
+
     // Return new style hook
     return (prefixCls: string, rootCls: string = prefixCls): UseComponentStyleResult => {
       const { theme, realToken, hashId, token, cssVar } = useToken();
@@ -342,9 +349,7 @@ function genStyleUtils<
         hashId,
         nonce: () => csp.nonce!,
         clientOnly: options.clientOnly,
-        layer: {
-          name: 'antd',
-        },
+        layer: mergedLayer,
 
         // antd is always at top of styles
         order: options.order || -999,

tests/genStyleUtils.test.tsx

@@ -3,6 +3,7 @@ import { render, renderHook } from '@testing-library/react';
 
 import { genStyleUtils } from '../src';
 import type { CSSVarRegisterProps, SubStyleComponentProps } from '../src/util/genStyleUtils';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 
 interface TestCompTokenMap {
   TestComponent: object;
@@ -23,6 +24,10 @@ describe('genStyleUtils', () => {
     }),
     useCSP: jest.fn().mockReturnValue({ nonce: 'nonce' }),
     getResetStyles: jest.fn().mockReturnValue([]),
+    layer: {
+      name: 'test',
+      dependencies: ['parent'],
+    },
   };
 
   const { genStyleHooks, genSubStyleComponent, genComponentStyleHook } = genStyleUtils<
@@ -31,6 +36,12 @@ describe('genStyleUtils', () => {
     object
   >(mockConfig);
 
+  beforeEach(() => {
+    // Clear head style
+    const head = document.head;
+    head.innerHTML = '';
+  });
+
   describe('genStyleHooks', () => {
     it('should generate style hooks', () => {
       const component = 'TestComponent';
@@ -89,4 +100,20 @@ describe('genStyleUtils', () => {
       expect(getByTestId('test-root')).toHaveTextContent('test-prefix');
     });
   });
+
+  it('layer', () => {
+    const StyledComponent = genSubStyleComponent(
+      'TestComponent',
+      () => ({}),
+      () => ({}),
+    );
+
+    render(
+      <StyleProvider cache={createCache()} layer>
+        <StyledComponent prefixCls="test" />
+      </StyleProvider>,
+    );
+
+    expect(document.head.innerHTML).toContain('@layer parent,test;');
+  });
 });