Fix(Language Service): Class is incorrectly positioned in literals

master-co · Apr 2, 2024 · cab746e · cab746e
1 parent 15e1b08
commit cab746e
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 9 deletions.
diff --git a/packages/language-service/playground/suggest-syntax.tsx b/packages/language-service/playground/suggest-syntax.tsx
@@ -1,6 +1,9 @@
 import React from 'react'
 import styled from '@master/styled.react'
+import clsx from 'clsx'
 
-export default () => <div className="">hello world</div>
+export const A = () => <div className={`block ${'content:\'123\''}`}>hello world</div>
+export const B = () => <div className={clsx('class-a class-b', `class-c class-d
+class-d`)}></div>
 
 const Button = styled.button('text:center')
diff --git a/packages/language-service/src/core.ts b/packages/language-service/src/core.ts
@@ -139,10 +139,30 @@ export default class CSSLanguageService extends EventEmitter {
                         token: ''
                     }
                 }
-                for (const classExpressionMatch of eachClassPositionExpression.matchAll(/(['"`])([\s\S]*?)\1/g)) {
+
+                // 1. "
+                for (const classExpressionMatch of eachClassPositionExpression.matchAll(/(?<!\\)"([\s\S]*?)(?<!\\)"/g)) {
+                    if (classExpressionMatch.index === undefined) continue
+                    const eachClassName = classExpressionMatch[1]
+                    const classNameStart = eachAttrStart + classExpressionMatch.index + 1 // " length
+                    const classPosition = normalizeClassNamePosition(eachClassName, classNameStart)
+                    if (classPosition) return classPosition
+                }
+
+                // 2. '
+                for (const classExpressionMatch of eachClassPositionExpression.matchAll(/(?<!\\)'([\s\S]*?)(?<!\\)'/g)) {
+                    if (classExpressionMatch.index === undefined) continue
+                    const eachClassName = classExpressionMatch[1]
+                    const classNameStart = eachAttrStart + classExpressionMatch.index + 1 // ' length
+                    const classPosition = normalizeClassNamePosition(eachClassName, classNameStart)
+                    if (classPosition) return classPosition
+                }
+
+                // 3. `
+                for (const classExpressionMatch of eachClassPositionExpression.matchAll(/(?<!\\)`([\s\S]*?)(?<!\\)`/g)) {
                     if (classExpressionMatch.index === undefined) continue
-                    const eachClassName = classExpressionMatch[2]
-                    const classNameStart = eachAttrStart + classExpressionMatch.index + classExpressionMatch[1].length
+                    const eachClassName = classExpressionMatch[1]
+                    const classNameStart = eachAttrStart + classExpressionMatch.index + 1 // ` length
                     const classPosition = normalizeClassNamePosition(eachClassName, classNameStart)
                     if (classPosition) return classPosition
                 }

diff --git a/packages/language-service/src/settings.ts b/packages/language-service/src/settings.ts
@@ -21,7 +21,8 @@ const settings: Settings = {
         ["class=", "\"", "\""],
         ["class=", "'", "'"],
         ["className=", "\"", "\""],
-        ["className=", "'", "'"]
+        ["className=", "'", "'"],
+        ["styled(?:\\s+)?(?:\\.\\w+)", "`", "`"]
     ],
     classAssignments: [
         // react
@@ -40,6 +41,7 @@ const settings: Settings = {
         // invoke
         ["clsx", "(", ")"],
         ["styled", "(", ")"],
+        ["styled(?:\\s+)?(?:\\.\\w+)", "(", ")"],
         ["cva", "(", ")"]
     ],
     exclude: ["**/.git/**", "**/node_modules/**", "**/.hg/**"],

diff --git a/...e/tests/get-class-position/invoke.test.ts → ...ts/get-class-position/assignments.test.ts b/...e/tests/get-class-position/invoke.test.ts → ...ts/get-class-position/assignments.test.ts
@@ -12,3 +12,8 @@ test('styled', () => {
     expectClassPosition(target, contents, 'tsx')
 })
 
+// test('escaped single quotes', () => {
+//     const target = `content:\\'\\'`
+//     const contents = [`export default () => <div className={'block `, target, '}></div>']
+//     expectClassPosition(target, contents, 'tsx')
+// })
diff --git a/packages/language-service/tests/get-class-position/styled.test.ts b/packages/language-service/tests/get-class-position/styled.test.ts
@@ -0,0 +1,22 @@
+import dedent from 'ts-dedent'
+import { expectClassPosition } from './test'
+
+test('styled template literal', () => {
+    const target = 'class-b'
+    const contents = ['const Button = styled.button`class-a ', target, '`']
+    expectClassPosition(target, contents, 'tsx')
+})
+
+test('styled template literal and new lines', () => {
+    const target = 'class-b'
+    const contents = [dedent`
+        const Button = styled
+            .button\`class-a `, target, '`']
+    expectClassPosition(target, contents, 'tsx')
+})
+
+test('styled invoked', () => {
+    const target = 'class-b'
+    const contents = ['const Button = styled.button("class-a ', target, '")']
+    expectClassPosition(target, contents, 'tsx')
+})
diff --git a/packages/language-service/tests/get-class-position/test.ts b/packages/language-service/tests/get-class-position/test.ts
@@ -56,4 +56,8 @@ test('group syntax', () => {
     expectClassPosition(target, contents)
 })
 
-test.todo('nested `text:center ${"block"}`')
+test('nested strings and literals', () => {
+    const target = `content:\\'\\'`
+    const contents = [`export default () => <div className={'block `, target, `'}>hello world</div>`]
+    expectClassPosition(target, contents)
+})
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -177,9 +177,10 @@
                         [ "[className]=", "\"", "\"" ],
                         [ "[ngClass]=", "\"", "\"" ],
                         [ "class:list=", "{", "}" ],
-                        [ "clsx", "(", ")" ],
-                        [ "styled", "(", ")" ],
-                        [ "cva", "(", ")" ]
+                        ["clsx", "(", ")"],
+                        ["styled", "(", ")"],
+                        ["styled(?:\\s+)?(?:\\.\\w+)", "(", ")"],
+                        ["cva", "(", ")"]
                     ]
                 },
                 "masterCSS.suggestSyntax": {