fix: order of layer (#181)

docs/examples/layer.tsx

@@ -21,7 +21,7 @@ const Div = ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
         color: 'blue',
 
         a: {
-          color: 'orange',
+          color: 'pink',
           cursor: 'pointer',
 
           '&:hover': {
@@ -56,9 +56,9 @@ export default function App() {
   return (
     <StyleProvider layer>
       <Div>
-        Text should be pink:
+        Text should be blue.
         <div>
-          A simple <a>link</a>
+          The link should be <a>pink</a>
         </div>
       </Div>
     </StyleProvider>

src/hooks/useStyleRegister.tsx

@@ -464,7 +464,7 @@ export default function useStyleRegister(
         if (isMergedClientSide && styleStr !== CSS_FILE_STYLE) {
           const mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
             mark: ATTR_MARK,
-            prepend: 'queue',
+            prepend: enableLayer ? false : 'queue',
             attachTo: container,
             priority: order,
           };
@@ -494,7 +494,7 @@ export default function useStyleRegister(
             updateCSS(
               normalizeStyle(effectStyle[effectKey]),
               `_layer-${effectKey}`,
-              mergedCSSConfig,
+              { ...mergedCSSConfig, prepend: true },
             );
           });
 

tests/layer.spec.tsx

@@ -0,0 +1,69 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { createCache, createTheme, StyleProvider } from '../src';
+import useStyleRegister from '../src/hooks/useStyleRegister';
+
+vi.mock('../src/util', async () => {
+  const origin: any = await vi.importActual('../src/util');
+  return {
+    ...origin,
+    supportLayer: () => true,
+  };
+});
+
+describe('layer', () => {
+  beforeEach(() => {
+    // Clear header
+    document.head.innerHTML = '';
+  });
+
+  it('order', () => {
+    const theme = createTheme(() => ({}));
+    const Demo = () => {
+      // Button
+      useStyleRegister(
+        {
+          theme,
+          token: { _tokenKey: 'test' },
+          path: ['button'],
+          layer: {
+            name: 'button',
+            dependencies: ['shared'],
+          },
+        },
+        () => ({
+          p: {
+            color: 'red',
+          },
+        }),
+      );
+
+      // Shared
+      useStyleRegister(
+        {
+          theme,
+          token: { _tokenKey: 'test' },
+          path: ['shared'],
+          layer: {
+            name: 'shared',
+          },
+        },
+        () => ({
+          p: {
+            color: 'red',
+          },
+        }),
+      );
+      return null;
+    };
+
+    render(
+      <StyleProvider layer cache={createCache()}>
+        <Demo />
+      </StyleProvider>,
+    );
+
+    const styles = Array.from(document.head.querySelectorAll('style'));
+    expect(styles[0].innerHTML.trim()).toEqual('@layer shared,button;');
+  });
+});