feat: inject support priority (#456)

* feat: inject support priority

* fix: lint

Author: zombieJ

docs/examples/dynaymicCSS.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
-import { updateCSS, removeCSS } from 'rc-util/es/Dom/dynamicCSS';
 import type { Prepend } from 'rc-util/es/Dom/dynamicCSS';
+import { removeCSS, updateCSS } from 'rc-util/es/Dom/dynamicCSS';
+import React from 'react';
 
-function injectStyle(id: number, prepend?: Prepend) {
+function injectStyle(id: number, prepend?: Prepend, priority?: number) {
   const randomColor = Math.floor(Math.random() * 16777215).toString(16);
 
   updateCSS(`body { background: #${randomColor} }`, `style-${id}`, {
     prepend,
+    priority,
   });
 }
 
@@ -35,6 +36,15 @@ export default () => {
         Prepend Queue: {id}
       </button>
 
+      <button
+        onClick={() => {
+          injectStyle(id, 'queue', -1);
+          setId(id + 1);
+        }}
+      >
+        Prepend Queue Priority: {id}
+      </button>
+
       <button
         onClick={() => {
           injectStyle(-1);

src/Dom/dynamicCSS.ts

@@ -2,6 +2,7 @@ import canUseDom from './canUseDom';
 import contains from './contains';
 
 const APPEND_ORDER = 'data-rc-order';
+const APPEND_PRIORITY = 'data-rc-priority';
 const MARK_KEY = `rc-util-key`;
 
 const containerCache = new Map<ContainerType, Node & ParentNode>();
@@ -14,6 +15,11 @@ interface Options {
   attachTo?: ContainerType;
   csp?: { nonce?: string };
   prepend?: Prepend;
+  /**
+   * Config the `priority` of `prependQueue`. Default is `0`.
+   * It's useful if you need to insert style before other style.
+   */
+  priority?: number;
   mark?: string;
 }
 
@@ -55,10 +61,16 @@ export function injectCSS(css: string, option: Options = {}) {
     return null;
   }
 
-  const { csp, prepend } = option;
+  const { csp, prepend, priority = 0 } = option;
+  const mergedOrder = getOrder(prepend);
+  const isPrependQueue = mergedOrder === 'prependQueue';
 
   const styleNode = document.createElement('style');
-  styleNode.setAttribute(APPEND_ORDER, getOrder(prepend));
+  styleNode.setAttribute(APPEND_ORDER, mergedOrder);
+
+  if (isPrependQueue && priority) {
+    styleNode.setAttribute(APPEND_PRIORITY, `${priority}`);
+  }
 
   if (csp?.nonce) {
     styleNode.nonce = csp?.nonce;
@@ -70,10 +82,20 @@ export function injectCSS(css: string, option: Options = {}) {
 
   if (prepend) {
     // If is queue `prepend`, it will prepend first style and then append rest style
-    if (prepend === 'queue') {
-      const existStyle = findStyles(container).filter(node =>
-        ['prepend', 'prependQueue'].includes(node.getAttribute(APPEND_ORDER)),
-      );
+    if (isPrependQueue) {
+      const existStyle = findStyles(container).filter(node => {
+        // Ignore style which not injected by rc-util with prepend
+        if (
+          !['prepend', 'prependQueue'].includes(node.getAttribute(APPEND_ORDER))
+        ) {
+          return false;
+        }
+
+        // Ignore style which priority less then new style
+        const nodePriority = Number(node.getAttribute(APPEND_PRIORITY) || 0);
+        return priority >= nodePriority;
+      });
+
       if (existStyle.length) {
         container.insertBefore(
           styleNode,

tests/dynamicCSS.test.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable no-eval */
 import {
+  clearContainerCache,
   injectCSS,
-  updateCSS,
   removeCSS,
-  clearContainerCache,
+  updateCSS,
 } from '../src/Dom/dynamicCSS';
 
 const TEST_STYLE = '.bamboo { context: "light" }';
@@ -86,6 +86,24 @@ describe('dynamicCSS', () => {
         expect(nextStyleNodes[2]).toBe(prependStyle);
         expect(nextStyleNodes[3]).toBe(appendStyle);
       });
+
+      it('prepend with queue and priority', () => {
+        const style2 = injectCSS(TEST_STYLE, { prepend: 'queue', priority: 2 });
+        const style1 = injectCSS(TEST_STYLE, { prepend: 'queue', priority: 1 });
+        const style0 = injectCSS(TEST_STYLE, { prepend: 'queue', priority: 0 });
+        const style = injectCSS(TEST_STYLE, { prepend: 'queue' });
+        const stylePrepend = injectCSS(TEST_STYLE, { prepend: true });
+
+        const head = document.querySelector('head');
+        const styleNodes = Array.from(head.querySelectorAll('style'));
+        expect(styleNodes).toHaveLength(5);
+
+        const styles = [stylePrepend, style0, style, style1, style2];
+
+        for (let i = 0; i < styleNodes.length; i += 1) {
+          expect(styles[i]).toBe(styleNodes[i]);
+        }
+      });
     });
   });
 

tests/index.test.js

@@ -1,4 +1,4 @@
-/* eslint-disable react/prefer-es6-class, react/no-render-return-value */
+/* eslint-disable react/prefer-es6-class, react/no-render-return-value, react/no-deprecated */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import createReactClass from 'create-react-class';