From 8d283c03c229e1195b4c60a54a79e43a61f38dc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?=
 <wxh1220@gmail.com>
Date: Wed, 4 Dec 2024 16:35:48 +0800
Subject: [PATCH 1/2] test: add unit test

---
 tests/layer.spec.tsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/tests/layer.spec.tsx b/tests/layer.spec.tsx
index 9d6335e..2c1850a 100644
--- a/tests/layer.spec.tsx
+++ b/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('');
+  });
 });

From cfe83096f427c81fc383b2a2e2aa283a47d12972 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?=
 <wxh1220@gmail.com>
Date: Wed, 4 Dec 2024 16:44:10 +0800
Subject: [PATCH 2/2] fix: cascade layer is not applied when there is no style
 content

---
 src/hooks/useStyleRegister.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useStyleRegister.tsx b/src/hooks/useStyleRegister.tsx
index b859850..529d29d 100644
--- a/src/hooks/useStyleRegister.tsx
+++ b/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