fix: cascade layer is not applied when there is no style content (#207)

* test: add unit test

* fix: cascade layer is not applied when there is no style content

Author: Wxh16144

src/hooks/useStyleRegister.tsx

@@ -333,7 +333,11 @@ export const parseStyle = (
   if (!root) {
     styleStr = `{${styleStr}}`;
   } else if (layer) {
-    styleStr = `@layer ${layer.name} {${styleStr}}`;
+
+    // fixme: https://github.com/thysultan/stylis/pull/339
+    if (styleStr) {
+      styleStr = `@layer ${layer.name} {${styleStr}}`;
+    }
 
     if (layer.dependencies) {
       effectStyle[`@layer ${layer.name}`] = layer.dependencies

tests/layer.spec.tsx

@@ -66,4 +66,34 @@ describe('layer', () => {
     const styles = Array.from(document.head.querySelectorAll('style'));
     expect(styles[0].innerHTML.trim()).toEqual('@layer shared,button;');
   });
+
+  // TODO: try fix, If stylis is fixed, this case should not be needed here.
+  // https://github.com/thysultan/stylis/pull/339
+  // https://github.com/ant-design/ant-design/issues/51867
+  it('empty braces (#51867)', () => {
+    const theme = createTheme(() => ({}));
+    const Demo = () => {
+      useStyleRegister(
+        {
+          theme,
+          token: { _tokenKey: 'test' },
+          path: ['shared'],
+          layer: {
+            name: 'shared',
+          },
+        },
+        () => [],
+      );
+      return null;
+    };
+
+    render(
+      <StyleProvider layer cache={createCache()}>
+        <Demo />
+      </StyleProvider>,
+    );
+
+    const styles = Array.from(document.head.querySelectorAll('style'));
+    expect(styles[0].innerHTML.trim()).toEqual('');
+  });
 });