make "invalid @apply" quick fix work in mixed-language documents

src/lsp/providers/codeActionProvider/index.ts

@@ -6,7 +6,6 @@ import {
   TextEdit,
 } from 'vscode-languageserver'
 import { State } from '../../util/state'
-import { findLast } from '../../util/find'
 import { isWithinRange } from '../../util/isWithinRange'
 import { getClassNameParts } from '../../util/getClassNameAtPosition'
 const dlv = require('dlv')
@@ -31,6 +30,9 @@ import {
 } from '../diagnostics/types'
 import { flatten, dedupeBy } from '../../../util/array'
 import { joinWithAnd } from '../../util/joinWithAnd'
+import { getLanguageBoundaries } from '../../util/getLanguageBoundaries'
+import { isCssDoc } from '../../util/css'
+import { absoluteRange } from '../../util/absoluteRange'
 
 async function getDiagnosticsFromCodeActionParams(
   state: State,
@@ -210,6 +212,8 @@ async function provideInvalidApplyCodeActions(
 ): Promise<CodeAction[]> {
   let document = state.editor.documents.get(params.textDocument.uri)
   let documentText = document.getText()
+  let cssRange: Range
+  let cssText = documentText
   const { postcss } = state.modules
   let change: TextEdit
 
@@ -217,6 +221,17 @@ async function provideInvalidApplyCodeActions(
     /\s+/
   ).length
 
+  if (!isCssDoc(state, document)) {
+    let languageBoundaries = getLanguageBoundaries(state, document)
+    if (!languageBoundaries) return []
+    cssRange = languageBoundaries.css.find((range) =>
+      isWithinRange(diagnostic.range.start, range)
+    )
+    if (!cssRange) return []
+    cssText = document.getText(cssRange)
+  }
+
+  try {
     await postcss([
       postcss.plugin('', (_options = {}) => {
         return (root) => {
@@ -225,7 +240,7 @@ async function provideInvalidApplyCodeActions(
 
             rule.walkAtRules('apply', (atRule) => {
               let { start, end } = atRule.source
-            let range: Range = {
+              let atRuleRange: Range = {
                 start: {
                   line: start.line - 1,
                   character: start.column - 1,
@@ -235,13 +250,16 @@ async function provideInvalidApplyCodeActions(
                   character: end.column - 1,
                 },
               }
+              if (cssRange) {
+                atRuleRange = absoluteRange(atRuleRange, cssRange)
+              }
 
-            if (!isWithinRange(diagnostic.range.start, range)) {
+              if (!isWithinRange(diagnostic.range.start, atRuleRange)) {
                 // keep looking
                 return true
               }
 
-            let className = document.getText(diagnostic.range)
+              let className = diagnostic.className.className
               let ast = classNameToAst(
                 state,
                 className,
@@ -263,8 +281,7 @@ async function provideInvalidApplyCodeActions(
               let outputIndent: string
               let documentIndent = detectIndent(documentText)
 
-            change = {
-              range: {
+              let ruleRange: Range = {
                 start: {
                   line: rule.source.start.line - 1,
                   character: rule.source.start.column - 1,
@@ -273,7 +290,13 @@ async function provideInvalidApplyCodeActions(
                   line: rule.source.end.line - 1,
                   character: rule.source.end.column,
                 },
-              },
+              }
+              if (cssRange) {
+                ruleRange = absoluteRange(ruleRange, cssRange)
+              }
+
+              change = {
+                range: ruleRange,
                 newText:
                   rule.toString() +
                   (insertedRule.raws.before || '\n\n') +
@@ -296,7 +319,10 @@ async function provideInvalidApplyCodeActions(
           })
         }
       }),
-  ]).process(documentText, { from: undefined })
+    ]).process(cssText, { from: undefined })
+  } catch (_) {
+    return []
+  }
 
   if (!change) {
     return []