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

Author: bradlc

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),
+      })
     }
   })
 }

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,