refactor: override order (#38)

ant-design · Aug 19, 2022 · 57b90f0 · 57b90f0
1 parent 165ca70
commit 57b90f0
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/docs/examples/basic.less b/docs/examples/basic.less
@@ -0,0 +1,3 @@
+.btn-override {
+  background: rgb(255, 200, 200);
+}
diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from './components/Button';
+import './basic.less';
 
 export default function App() {
   const [show, setShow] = React.useState(true);
@@ -23,6 +24,8 @@ export default function App() {
           <Button>Default</Button>
           <Button type="primary">Primary</Button>
           <Button type="ghost">Ghost</Button>
+
+          <Button className="btn-override">Override By ClassName</Button>
         </>
       )}
     </div>

diff --git a/src/StyleContext.tsx b/src/StyleContext.tsx
@@ -14,7 +14,8 @@ export function createCache() {
     const styles = document.body.querySelectorAll(`style[${ATTR_MARK}]`);
 
     Array.from(styles).forEach((style) => {
-      (style as any)[CSS_IN_JS_INSTANCE] ??= CSS_IN_JS_INSTANCE_ID;
+      (style as any)[CSS_IN_JS_INSTANCE] =
+        (style as any)[CSS_IN_JS_INSTANCE] || CSS_IN_JS_INSTANCE_ID;
       document.head.appendChild(style);
     });
 

diff --git a/src/useStyleRegister.tsx b/src/useStyleRegister.tsx
@@ -269,7 +269,10 @@ export default function useStyleRegister(
       animationStatistics = {};
 
       if (isMergedClientSide) {
-        const style = updateCSS(styleStr, styleId, { mark: ATTR_MARK });
+        const style = updateCSS(styleStr, styleId, {
+          mark: ATTR_MARK,
+          prepend: true,
+        });
 
         (style as any)[CSS_IN_JS_INSTANCE] = CSS_IN_JS_INSTANCE_ID;
 

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -389,8 +389,8 @@ describe('csssinjs', () => {
     const styles = Array.from(document.head.querySelectorAll('style'));
     expect(styles).toHaveLength(2);
 
-    expect(styles[0].innerHTML).toBe('a{color:red;}div{color:blue;}');
-    expect(styles[1].innerHTML).toBe(
+    expect(styles[1].innerHTML).toBe('a{color:red;}div{color:blue;}');
+    expect(styles[0].innerHTML).toBe(
       `.${hash} a{color:red;}.${hash} div{color:blue;}`,
     );
   });