1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

diff --git a/src/lsp/providers/codeActions/provideInvalidApplyCodeActions.ts b/src/lsp/providers/codeActions/provideInvalidApplyCodeActions.ts
index a0412aa590bac8f9d6c618571ce48593efbf7223..bc1be2b9db3a5ef4bebd9b7392d20b51c8e47aaa 100644
--- a/src/lsp/providers/codeActions/provideInvalidApplyCodeActions.ts
+++ b/src/lsp/providers/codeActions/provideInvalidApplyCodeActions.ts
@@ -19,6 +19,9 @@ import detectIndent from 'detect-indent'
 import isObject from '../../../util/isObject'
 import { cssObjToAst } from '../../util/cssObjToAst'
 import dset from 'dset'
+import selectorParser from 'postcss-selector-parser'
+import { logFull } from '../../util/logFull'
+import { flatten } from '../../../util/array'
 
 export async function provideInvalidApplyCodeActions(
   state: State,
@@ -119,7 +122,8 @@                       return m.replace(
                         new RegExp(outputIndent, 'g'),
                         documentIndent.indent
                       )
-                    }),
+                    })
+                    .replace(/^(\s+)(.*?[^{}]\n)(\S)/gm, '$1$2$1$3'),
               })
 
               return false
@@ -205,9 +209,12 @@   let obj = {}
   for (let i = 1; i <= path.length; i++) {
     dset(obj, path.slice(0, i), {})
   }
+
+  selector = appendPseudosToSelector(selector, pseudo)
+  if (selector === null) return null
+
   let rule = {
-    // TODO: use proper selector parser
-    [selector + pseudo.join('')]: {
+    [selector]: {
       [`@apply ${classNameParts[classNameParts.length - 1]}${
         important ? ' !important' : ''
       }`]: '',
@@ -221,3 +228,38 @@   }
 
   return cssObjToAst(obj, state.modules.postcss)
 }
+
+function appendPseudosToSelector(
+  selector: string,
+  pseudos: string[]
+): string | null {
+  if (pseudos.length === 0) return selector
+
+  let canTransform = true
+
+  let transformedSelector = selectorParser((selectors) => {
+    flatten(selectors.split((_) => true)).forEach((sel) => {
+      // @ts-ignore
+      for (let i = sel.nodes.length - 1; i >= 0; i--) {
+        // @ts-ignore
+        if (sel.nodes[i].type !== 'pseudo') {
+          break
+          // @ts-ignore
+        } else if (pseudos.includes(sel.nodes[i].value)) {
+          canTransform = false
+          break
+        }
+      }
+      if (canTransform) {
+        pseudos.forEach((p) => {
+          // @ts-ignore
+          sel.append(selectorParser.pseudo({ value: p }))
+        })
+      }
+    })
+  }).processSync(selector)
+
+  if (!canTransform) return null
+
+  return transformedSelector
+}