Don’t break @apply … #{'!important'} sorting (#212)

* Don’t break `@apply … #{'!important'}` sorting

`#{!important}` was already handled but SCSS allows one to wrap it in any number of matched single or double quotes so we check for that as well

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Type `tailwindFunctions` and `tailwindAttributes` as optional ([#206](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/206))
+- Don’t break `@apply … #{'!important'}` sorting ([#212](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/212))
 
 ## [0.5.3] - 2023-08-15
 

src/index.js

@@ -533,7 +533,9 @@ function transformCss(ast, { env }) {
     if (node.type === 'css-atrule' && node.name === 'apply') {
       node.params = sortClasses(node.params, {
         env,
-        ignoreLast: /\s+(?:!important|#{!important})\s*$/.test(node.params),
+        ignoreLast: /\s+(?:!important|#{(['"]*)!important\1})\s*$/.test(
+          node.params,
+        ),
       })
     }
   })

tests/format.test.js

@@ -145,7 +145,18 @@ let tests = {
     // t`<div [ngClass]="{ '${no}': foo && definitely&a:syntax*error }" class="${yes}"></div>`,
   ],
   css: [...css, t`@apply ${yes} !important;`],
-  scss: [...css, t`@apply ${yes} #{!important};`],
+  scss: [
+    ...css,
+    t`@apply ${yes} #{!important};`,
+    t`@apply ${yes} #{'!important'};`,
+    t`@apply ${yes} #{"!important"};`,
+
+    // These shouldn't ever be used but they are valid
+    // syntax so we might as well not break them
+    t`@apply ${yes} #{""!important""};`,
+    t`@apply ${yes} #{'''!important'''};`,
+    t`@apply ${yes} #{"'"'"!important"'"'"};`,
+  ],
   less: [...css, t`@apply ${yes} !important;`],
   babel: javascript,
   typescript: javascript,