Add css based completions

Author: JoviDeCroock

.gitignore

@@ -21,3 +21,4 @@ package-lock.json
 packages/theme-check-docs-updater/data
 packages/lang-jsonc/src/parser.*
 .vscode-test-web
+.shopify

packages/theme-language-server-common/package.json

@@ -32,6 +32,7 @@
     "@vscode/web-custom-data": "^0.4.6",
     "vscode-json-languageservice": "^5.3.10",
     "vscode-languageserver": "^8.0.2",
+    "vscode-css-languageservice": "6.3.2",
     "vscode-languageserver-textdocument": "^1.0.8",
     "vscode-uri": "^3.0.7"
   }

packages/theme-language-server-common/src/completions/CompletionsProvider.ts

@@ -30,6 +30,7 @@ import { GetSnippetNamesForURI } from './providers/RenderSnippetCompletionProvid
 import { RenderSnippetParameterCompletionProvider } from './providers/RenderSnippetParameterCompletionProvider';
 import { LiquidDocTagCompletionProvider } from './providers/LiquidDocTagCompletionProvider';
 import { LiquidDocParamTypeCompletionProvider } from './providers/LiquidDocParamTypeCompletionProvider';
+import { CompletionsForStyleSheetProvider } from './providers/CompletionsForStyleSheetProvider';
 
 export interface CompletionProviderDependencies {
   documentManager: DocumentManager;
@@ -72,6 +73,7 @@ export class CompletionsProvider {
     );
 
     this.providers = [
+      new CompletionsForStyleSheetProvider(),
       new ContentForCompletionProvider(),
       new ContentForBlockTypeCompletionProvider(getThemeBlockNames),
       new ContentForParameterCompletionProvider(),

packages/theme-language-server-common/src/completions/providers/CompletionsForStyleSheetProvider.ts

@@ -0,0 +1,33 @@
+import { CompletionItem, TextDocument } from 'vscode-languageserver';
+import { LiquidCompletionParams } from '../params';
+import { Provider } from './common';
+import { getCssLanguageService } from '../../plugins/css';
+import { Position } from 'vscode-json-languageservice';
+
+export class CompletionsForStyleSheetProvider implements Provider {
+  constructor(
+  ) {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { node } = params.completionContext;
+    const { document } = params;
+    if (node && document.stylesheet && document.stylesheet.cssStart >= node.position.start && document.stylesheet.cssEnd <= node.position.end) {
+      const cssLanguageService = getCssLanguageService('css');
+      const offset = document.stylesheet.cssStart;
+      const position = offsetToPosition(document.stylesheet.source, offset);
+      const stylesheet = cssLanguageService.parseStylesheet(document.stylesheet.source);
+      const completions = cssLanguageService.doComplete(document.stylesheet.source, position, stylesheet, {triggerPropertyValueCompletion: true });
+      return completions.items;
+    } else {
+        return [];
+    }
+  }
+}
+
+function offsetToPosition(source: TextDocument, offset: number): Position {
+  const line = source.getText().slice(0, offset).split('\n').length - 1;
+  const character = offset - source.getText().slice(0, offset).lastIndexOf('\n');
+  return { line, character };
+}

packages/theme-language-server-common/src/documents/DocumentManager.ts

@@ -181,10 +181,17 @@ export class DocumentManager {
           textDocument,
         };
       case SourceCodeType.LiquidHtml:
+        const stylesheet = sourceCode.source.match(/{% stylesheet %}([\s\S]*?){% endstylesheet %}/)?.[1];
         return {
           ...sourceCode,
           textDocument,
-
+          stylesheet: stylesheet ? {
+            source: TextDocument.create(uri + '-css', 'css', sourceCode.version ?? 0, stylesheet),
+            tagStart: stylesheet.indexOf('{% stylesheet %}'),
+            tagEnd: stylesheet.indexOf('{% stylesheet %}'),
+            cssStart: stylesheet.indexOf('{% stylesheet %}') + '{% stylesheet %}'.length,
+            cssEnd: stylesheet.indexOf('{% endstylesheet %}') + '{% endstylesheet %}'.length,
+          } : undefined,
           /** Lazy and only computed once per file version */
           getSchema: memo(async () => {
             if (!this.getModeForUri || !this.isValidSchema) return undefined;

packages/theme-language-server-common/src/documents/types.ts

@@ -16,6 +16,14 @@ type _AugmentedSourceCode<SCT extends SourceCodeType = SourceCodeType> = SourceC
 /** JsonSourceCode + textDocument */
 export type AugmentedJsonSourceCode = _AugmentedSourceCode<SourceCodeType.JSON>;
 
+export type StyleSheetTag = {
+  source: TextDocument;
+  tagStart: number;
+  tagEnd: number;
+  cssStart: number;
+  cssEnd: number;
+}
+
 /**
  * AugmentedLiquidSourceCode may hold the schema for the section or block.
  *
@@ -25,6 +33,7 @@ export type AugmentedJsonSourceCode = _AugmentedSourceCode<SourceCodeType.JSON>;
 export type AugmentedLiquidSourceCode = _AugmentedSourceCode<SourceCodeType.LiquidHtml> & {
   getSchema: () => Promise<SectionSchema | ThemeBlockSchema | AppBlockSchema | undefined>;
   getLiquidDoc: (snippetName: string) => Promise<SnippetDefinition | undefined>;
+  stylesheet: StyleSheetTag | undefined;
 };
 
 /**

packages/theme-language-server-common/src/hover/HoverProvider.ts

@@ -24,7 +24,7 @@ import { HtmlAttributeValueHoverProvider } from './providers/HtmlAttributeValueH
 import { findCurrentNode } from '@shopify/theme-check-common';
 import { GetThemeSettingsSchemaForURI } from '../settings';
 import { LiquidDocTagHoverProvider } from './providers/LiquidDocTagHoverProvider';
-
+import { CssHoverProvider } from './providers/CssHoverProvider';
 export class HoverProvider {
   private providers: BaseHoverProvider[] = [];
 
@@ -47,6 +47,7 @@ export class HoverProvider {
       getMetafieldDefinitions,
     );
     this.providers = [
+      new CssHoverProvider(documentManager),
       new LiquidTagHoverProvider(themeDocset),
       new LiquidFilterHoverProvider(themeDocset),
       new LiquidObjectHoverProvider(typeSystem),

packages/theme-language-server-common/src/hover/providers/CssHoverProvider.ts

@@ -0,0 +1,42 @@
+import { Hover, TextDocument, HoverParams } from 'vscode-languageserver';
+import { BaseHoverProvider } from '../BaseHoverProvider';
+import { getCssLanguageService } from '../../plugins/css';
+import { Position } from 'vscode-json-languageservice';
+import { LiquidHtmlNode } from '@shopify/liquid-html-parser';
+import { DocumentManager } from '../../documents';
+
+export class CssHoverProvider implements BaseHoverProvider {
+  constructor(private documentManager: DocumentManager) {}
+
+  async hover(currentNode: LiquidHtmlNode, ancestors: LiquidHtmlNode[], params: HoverParams): Promise<Hover | null> {
+    const node = currentNode;
+    const document = this.documentManager.get(params.textDocument.uri);
+
+    if (document && node && 'stylesheet' in document && document.stylesheet && document.stylesheet.cssStart >= node.position.start && document.stylesheet.cssEnd <= node.position.end) {
+      const cssLanguageService = getCssLanguageService('css');
+      const offset = document.stylesheet.cssStart;
+      const position = offsetToPosition(document.stylesheet.source, offset);
+      const stylesheet = cssLanguageService.parseStylesheet(document.stylesheet.source);
+      const information = cssLanguageService.doHover(document.stylesheet.source, position, stylesheet);
+      return information ? {
+        contents: information.contents,
+        range: information.range ? {
+          start: offsetToPosition(document.stylesheet.source, positionToOffset(document.stylesheet.source, information.range.start) + offset),
+          end: offsetToPosition(document.stylesheet.source, positionToOffset(document.stylesheet.source, information.range.end) + offset),
+        } : undefined,
+      } : null;
+    } else {
+        return null;
+    }
+  }
+}
+
+function offsetToPosition(source: TextDocument, offset: number): Position {
+  const line = source.getText().slice(0, offset).split('\n').length - 1;
+  const character = offset - source.getText().slice(0, offset).lastIndexOf('\n');
+  return { line, character };
+}
+
+function positionToOffset(source: TextDocument, position: Position): number {
+  return source.getText().slice(0, position.line).lastIndexOf('\n') + position.character;
+}

packages/theme-language-server-common/src/plugins/css.ts

@@ -0,0 +1,15 @@
+import {
+    getCSSLanguageService,
+    LanguageService,
+} from 'vscode-css-languageservice';
+
+const cssLanguageService = getCSSLanguageService();
+
+const languageServices = {
+    css: cssLanguageService,
+}
+export type CSSLanguageServices = Record<'css' | 'less' | 'scss', LanguageService>;
+
+export function getCssLanguageService( kind: 'css'): LanguageService {
+    return languageServices[kind];
+}

yarn.lock

@@ -6679,6 +6679,16 @@ vitest@^2.1.1:
     vite-node "2.1.1"
     why-is-node-running "^2.3.0"
 
+[email protected]:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-6.3.2.tgz#dd54161776f1663fa514a1b5df0d3990bda604bb"
+  integrity sha512-GEpPxrUTAeXWdZWHev1OJU9lz2Q2/PPBxQ2TIRmLGvQiH3WZbqaNoute0n0ewxlgtjzTW3AKZT+NHySk5Rf4Eg==
+  dependencies:
+    "@vscode/l10n" "^0.0.18"
+    vscode-languageserver-textdocument "^1.0.12"
+    vscode-languageserver-types "3.17.5"
+    vscode-uri "^3.0.8"
+
 vscode-json-languageservice@^5.3.10:
   version "5.3.10"
   resolved "https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-5.3.10.tgz#7d56872cbb7460baf0491cea31807e537244dbae"
@@ -6717,12 +6727,17 @@ vscode-languageserver-textdocument@^1.0.11, vscode-languageserver-textdocument@^
   resolved "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.11.tgz#0822a000e7d4dc083312580d7575fe9e3ba2e2bf"
   integrity sha512-X+8T3GoiwTVlJbicx/sIAF+yuJAqz8VvwJyoMVhwEMoEKE/fkDmrqUgDMyBECcM2A2frVZIUj5HI/ErRXCfOeA==
 
+vscode-languageserver-textdocument@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz#457ee04271ab38998a093c68c2342f53f6e4a631"
+  integrity sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==
+
 [email protected]:
   version "3.17.3"
   resolved "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.3.tgz"
   integrity sha512-SYU4z1dL0PyIMd4Vj8YOqFvHu7Hz/enbWtpfnVbJHU4Nd1YNYx8u0ennumc6h48GQNeOLxmwySmnADouT/AuZA==
 
-vscode-languageserver-types@^3.17.5:
+vscode-languageserver-types@3.17.5, vscode-languageserver-types@^3.17.5:
   version "3.17.5"
   resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz#3273676f0cf2eab40b3f44d085acbb7f08a39d8a"
   integrity sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==