Ignore !important when sorting @apply classes (#4)

tailwindlabs · Jan 24, 2022 · b75ddb2 · b75ddb2
1 parent fbb565a
commit b75ddb2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/index.js b/src/index.js
@@ -288,7 +288,10 @@ function transformJavaScript(ast, { env }) {
 function transformCss(ast, { env }) {
   ast.walk((node) => {
     if (node.type === 'css-atrule' && node.name === 'apply') {
-      node.params = sortClasses(node.params, { env })
+      node.params = sortClasses(node.params, {
+        env,
+        ignoreLast: /\s+(?:!important|#{!important})\s*$/.test(node.params),
+      })
     }
   })
 }

diff --git a/tests/test.js b/tests/test.js
@@ -126,9 +126,9 @@ let tests = {
     ...vue.map((test) => test.map((t) => t.replace(/:class=/g, '[ngClass]='))),
     t`<div [ngClass]='\`${yes} \${someVar} ${yes} \${"${yes}"}\`'></div>`,
   ],
-  css,
-  scss: css,
-  less: css,
+  css: [...css, t`@apply ${yes} !important;`],
+  scss: [...css, t`@apply ${yes} #{!important};`],
+  less: [...css, t`@apply ${yes} !important;`],
   babel: javascript,
   typescript: javascript,
   'babel-ts': javascript,