feat: support important prefix

src/interfaces.ts

@@ -214,4 +214,5 @@ export interface Element {
   content?: Element[] | string;
   func?: string;
   type: 'group' | 'func' | 'utility';
+  important: boolean;
 }

src/lib/index.ts

@@ -327,7 +327,8 @@ export class Processor {
     const _gStyle = (
       baseClass: string,
       variants: string[],
-      selector: string
+      selector: string,
+      important = false,
     ) => {
       if (this._config.exclude && testRegexr(selector, this._config.exclude)) {
         // filter exclude className
@@ -339,9 +340,9 @@ export class Processor {
         success.push(selector);
         if (result instanceof Style) {
           result.selector = '.' + cssEscape(selector);
-          this.markAsImportant(result);
+          this.markAsImportant(result, important);
         }
-        if (Array.isArray(result)) result.forEach((i) => this.markAsImportant(i));
+        if (Array.isArray(result)) result.forEach((i) => this.markAsImportant(i, important));
         styleSheet.add(this.wrapWithVariants(variants, result));
       } else {
         _hIgnored(selector);
@@ -360,9 +361,10 @@ export class Processor {
               ...obj.variants,
               ...u.variants,
             ];
-            const selector = [...variants, u.content].join(':');
+            const important = obj.important || u.important;
+            const selector = (important ? '!' : '') + [...variants, u.content].join(':');
             typeof u.content === 'string' &&
-              _gStyle(this.removePrefix(u.content), variants, selector);
+              _gStyle(this.removePrefix(u.content), variants, selector, important);
           }
         });
     };
@@ -374,7 +376,7 @@ export class Processor {
           if (Array.isArray(obj.content)) {
             // #functions stuff
           } else if (obj.content) {
-            _gStyle(this.removePrefix(obj.content), obj.variants, obj.raw);
+            _gStyle(this.removePrefix(obj.content), obj.variants, obj.raw, obj.important);
           }
         } else if (obj.type === 'group') {
           _hGroup(obj);
@@ -429,7 +431,8 @@ export class Processor {
     const _gStyle = (
       baseClass: string,
       variants: string[],
-      selector: string
+      selector: string,
+      important = false
     ) => {
       if (this._config.exclude && testRegexr(selector, this._config.exclude)) {
         // filter exclude className
@@ -442,11 +445,11 @@ export class Processor {
         if (Array.isArray(result)) {
           result.forEach((i) => {
             i.selector = buildSelector;
-            this.markAsImportant(i);
+            this.markAsImportant(i, important);
           });
         } else {
           result.selector = buildSelector;
-          this.markAsImportant(result);
+          this.markAsImportant(result, important);
         }
         styleSheet.add(this.wrapWithVariants(variants, result));
       } else {
@@ -468,7 +471,7 @@ export class Processor {
             ];
             const selector = [...variants, u.content].join(':');
             typeof u.content === 'string' &&
-              _gStyle(this.removePrefix(u.content), variants, selector);
+              _gStyle(this.removePrefix(u.content), variants, selector, obj.important || u.important);
           }
         });
     };
@@ -478,7 +481,7 @@ export class Processor {
         if (Array.isArray(obj.content)) {
           // #functions stuff
         } else if (obj.content) {
-          _gStyle(this.removePrefix(obj.content), obj.variants, obj.raw);
+          _gStyle(this.removePrefix(obj.content), obj.variants, obj.raw, obj.important);
         }
       } else if (obj.type === 'group') {
         _hGroup(obj);

src/utils/parser/class.ts

@@ -16,19 +16,25 @@ export default class ClassParser {
     let char;
     let group;
     let func;
+    let variant;
     let variants = [];
     let variantStart = this.index + 1;
     let classStart = this.index + 1;
     let groupStart = this.index + 1;
     let ignoreSpace = false;
+    let important = false;
     const parts: Element[] = [];
     const length = this.classNames.length;
     while (this.index < length) {
       this.index++;
       char = this.classNames.charAt(this.index);
       switch (char) {
+      case '!':
+        important = true;
+        break;
       case this.separator:
-        variants.push(this.classNames.slice(variantStart, this.index));
+        variant = this.classNames.slice(variantStart, this.index);
+        variants.push(variant.charAt(0) === '!' ? variant.slice(1,): variant);
         variantStart = this.index + 1;
         ignoreSpace = true;
         break;
@@ -52,15 +58,17 @@ export default class ClassParser {
             const start = classStart - 1;
             const end = this.index - 1;
             if (Array.isArray(group)) {
-              parts.push({ raw, start, end, variants, content: group, type: 'group' });
+              parts.push({ raw, start, end, variants, content: group, type: 'group', important });
               group = undefined;
             } else if (func) {
-              parts.push({ raw, start, end, variants, func, content: group, type: 'func' });
+              parts.push({ raw, start, end, variants, func, content: group, type: 'func', important });
               func = undefined;
             } else {
-              parts.push({ raw, start, end, variants, content: this.classNames.slice(variantStart, this.index), type: 'utility' });
+              const utility = this.classNames.slice(variantStart, this.index);
+              parts.push({ raw, start, end, variants, content: utility.charAt(0) === '!' ? utility.slice(1,): utility, type: 'utility', important });
             }
             variants = [];
+            important = false;
           }
           groupStart = this.index + 1;
           classStart = this.index + 1;