@astrojs/language-server 0.11.0 → 0.13.0

package/dist/plugins/css/CSSPlugin.js

@@ -1,85 +1,218 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CSSPlugin = void 0;
-const emmet_helper_1 = require("@vscode/emmet-helper");
 const vscode_languageserver_1 = require("vscode-languageserver");
-const utils_1 = require("../../core/documents/utils");
-const CSSDocument_1 = require("./CSSDocument");
-const service_1 = require("./service");
-const StyleAttributeDocument_1 = require("./StyleAttributeDocument");
 const documents_1 = require("../../core/documents");
+const emmet_helper_1 = require("@vscode/emmet-helper");
+const CSSDocument_1 = require("./CSSDocument");
+const language_service_1 = require("./language-service");
 const parseHtml_1 = require("../../core/documents/parseHtml");
-const getIdClassCompletion_1 = require("./features/getIdClassCompletion");
+const StyleAttributeDocument_1 = require("./StyleAttributeDocument");
+const getIdClassCompletions_1 = require("./features/getIdClassCompletions");
+const lodash_1 = require("lodash");
 class CSSPlugin {
-    constructor(docManager, configManager) {
-        this.documents = new WeakMap();
+    constructor(configManager) {
+        this.__name = 'css';
+        this.cssDocuments = new WeakMap();
         this.triggerCharacters = new Set(['.', ':', '-', '/']);
-        this.pluginName = 'CSS';
-        this.docManager = docManager;
         this.configManager = configManager;
-        this.docManager.on('documentChange', (document) => {
-            this.documents.set(document, new CSSDocument_1.CSSDocument(document));
-        });
     }
-    getCompletions(document, position, completionContext) {
-        const triggerCharacter = completionContext === null || completionContext === void 0 ? void 0 : completionContext.triggerCharacter;
-        const triggerKind = completionContext === null || completionContext === void 0 ? void 0 : completionContext.triggerKind;
-        const isCustomTriggerCharacter = triggerKind === vscode_languageserver_1.CompletionTriggerKind.TriggerCharacter;
-        if (isCustomTriggerCharacter && triggerCharacter && !this.triggerCharacters.has(triggerCharacter)) {
+    doHover(document, position) {
+        if (!this.featureEnabled('hover')) {
+            return null;
+        }
+        if ((0, documents_1.isInsideFrontmatter)(document.getText(), document.offsetAt(position))) {
             return null;
         }
-        if (this.isInsideFrontmatter(document, position)) {
+        const styleTag = this.getStyleTagForPosition(document, position);
+        if (!styleTag) {
+            const attributeContext = (0, parseHtml_1.getAttributeContextAtPosition)(document, position);
+            if (!attributeContext) {
+                return null;
+            }
+            if (this.inStyleAttributeWithoutInterpolation(attributeContext, document.getText())) {
+                const [start, end] = attributeContext.valueRange;
+                return this.doHoverInternal(new StyleAttributeDocument_1.StyleAttributeDocument(document, start, end), position);
+            }
             return null;
         }
-        const cssDocument = this.getCSSDoc(document);
-        if (cssDocument.isInGenerated(position)) {
-            return this.getCompletionsInternal(document, position, cssDocument);
+        const cssDocument = this.getCSSDocumentForStyleTag(styleTag, document);
+        if (shouldExcludeHover(cssDocument)) {
+            return null;
         }
-        const attributeContext = (0, parseHtml_1.getAttributeContextAtPosition)(document, position);
-        if (!attributeContext) {
+        return this.doHoverInternal(cssDocument, position);
+    }
+    doHoverInternal(cssDocument, position) {
+        const hoverInfo = (0, language_service_1.getLanguageService)(extractLanguage(cssDocument)).doHover(cssDocument, cssDocument.getGeneratedPosition(position), cssDocument.stylesheet);
+        return hoverInfo ? (0, documents_1.mapHoverToParent)(cssDocument, hoverInfo) : hoverInfo;
+    }
+    getCompletions(document, position, completionContext) {
+        if (!this.featureEnabled('completions')) {
             return null;
         }
-        if (this.inStyleAttributeWithoutInterpolation(attributeContext, document.getText())) {
-            const [start, end] = attributeContext.valueRange;
-            return this.getCompletionsInternal(document, position, new StyleAttributeDocument_1.StyleAttributeDocument(document, start, end));
+        if ((0, documents_1.isInsideFrontmatter)(document.getText(), document.offsetAt(position))) {
+            return null;
         }
-        else {
-            return (0, getIdClassCompletion_1.getIdClassCompletion)(cssDocument, attributeContext);
+        const triggerCharacter = completionContext === null || completionContext === void 0 ? void 0 : completionContext.triggerCharacter;
+        const triggerKind = completionContext === null || completionContext === void 0 ? void 0 : completionContext.triggerKind;
+        const isCustomTriggerCharacter = triggerKind === vscode_languageserver_1.CompletionTriggerKind.TriggerCharacter;
+        if (isCustomTriggerCharacter && triggerCharacter && !this.triggerCharacters.has(triggerCharacter)) {
+            return null;
+        }
+        const styleTag = this.getStyleTagForPosition(document, position);
+        // If we don't have a style tag at this position, we might be in a style property instead, let's check
+        if (!styleTag) {
+            const attributeContext = (0, parseHtml_1.getAttributeContextAtPosition)(document, position);
+            if (!attributeContext) {
+                return null;
+            }
+            if (this.inStyleAttributeWithoutInterpolation(attributeContext, document.getText())) {
+                const [start, end] = attributeContext.valueRange;
+                return this.getCompletionsInternal(document, position, new StyleAttributeDocument_1.StyleAttributeDocument(document, start, end));
+            }
+            // If we're not in a style attribute, instead give completions for ids and classes used in the current document
+            else if ((attributeContext.name == 'id' || attributeContext.name == 'class') && attributeContext.inValue) {
+                const stylesheets = this.getStylesheetsForDocument(document);
+                return (0, getIdClassCompletions_1.getIdClassCompletion)(stylesheets, attributeContext);
+            }
+            return null;
         }
+        const cssDocument = this.getCSSDocumentForStyleTag(styleTag, document);
+        return this.getCompletionsInternal(document, position, cssDocument);
     }
     getCompletionsInternal(document, position, cssDocument) {
         if (isSASS(cssDocument)) {
-            // the css language service does not support sass, still we can use
-            // the emmet helper directly to at least get emmet completions
+            // The CSS language service does not support SASS (not to be confused with SCSS)
+            // however we can at least still at least provide Emmet completions in SASS blocks
             return (0, emmet_helper_1.doComplete)(document, position, 'sass', this.configManager.getEmmetConfig()) || null;
         }
-        const type = extractLanguage(cssDocument);
-        const lang = (0, service_1.getLanguageService)(type);
+        const cssLang = extractLanguage(cssDocument);
+        const langService = (0, language_service_1.getLanguageService)(cssLang);
         const emmetResults = {
             isIncomplete: true,
             items: [],
         };
-        const results = lang.doComplete(cssDocument, cssDocument.getGeneratedPosition(position), cssDocument.stylesheet);
+        const results = langService.doComplete(cssDocument, cssDocument.getGeneratedPosition(position), cssDocument.stylesheet);
         return vscode_languageserver_1.CompletionList.create([...(results ? results.items : []), ...emmetResults.items].map((completionItem) => (0, documents_1.mapCompletionItemToOriginal)(cssDocument, completionItem)), 
         // Emmet completions change on every keystroke, so they are never complete
         emmetResults.items.length > 0);
     }
+    getDocumentColors(document) {
+        if (!this.featureEnabled('documentColors')) {
+            return [];
+        }
+        const allColorInfo = this.getCSSDocumentsForDocument(document).map((cssDoc) => {
+            const cssLang = extractLanguage(cssDoc);
+            const langService = (0, language_service_1.getLanguageService)(cssLang);
+            if (shouldExcludeColor(cssLang)) {
+                return [];
+            }
+            return langService
+                .findDocumentColors(cssDoc, cssDoc.stylesheet)
+                .map((colorInfo) => (0, documents_1.mapObjWithRangeToOriginal)(cssDoc, colorInfo));
+        });
+        return (0, lodash_1.flatten)(allColorInfo);
+    }
+    getColorPresentations(document, range, color) {
+        if (!this.featureEnabled('colorPresentations')) {
+            return [];
+        }
+        const allColorPres = this.getCSSDocumentsForDocument(document).map((cssDoc) => {
+            const cssLang = extractLanguage(cssDoc);
+            const langService = (0, language_service_1.getLanguageService)(cssLang);
+            if ((!cssDoc.isInGenerated(range.start) && !cssDoc.isInGenerated(range.end)) || shouldExcludeColor(cssLang)) {
+                return [];
+            }
+            return langService
+                .getColorPresentations(cssDoc, cssDoc.stylesheet, color, (0, documents_1.mapRangeToGenerated)(cssDoc, range))
+                .map((colorPres) => (0, documents_1.mapColorPresentationToOriginal)(cssDoc, colorPres));
+        });
+        return (0, lodash_1.flatten)(allColorPres);
+    }
+    getDocumentSymbols(document) {
+        if (!this.featureEnabled('documentSymbols')) {
+            return [];
+        }
+        const allDocumentSymbols = this.getCSSDocumentsForDocument(document).map((cssDoc) => {
+            return (0, language_service_1.getLanguageService)(extractLanguage(cssDoc))
+                .findDocumentSymbols(cssDoc, cssDoc.stylesheet)
+                .map((symbol) => (0, documents_1.mapSymbolInformationToOriginal)(cssDoc, symbol));
+        });
+        return (0, lodash_1.flatten)(allDocumentSymbols);
+    }
     inStyleAttributeWithoutInterpolation(attrContext, text) {
-        return attrContext.name === 'style' && !!attrContext.valueRange && !text.substring(attrContext.valueRange[0], attrContext.valueRange[1]).includes('{');
+        return (attrContext.name === 'style' &&
+            !!attrContext.valueRange &&
+            !text.substring(attrContext.valueRange[0], attrContext.valueRange[1]).includes('{'));
     }
-    getCSSDoc(document) {
-        let cssDoc = this.documents.get(document);
+    /**
+     * Get the associated CSS Document for a style tag
+     */
+    getCSSDocumentForStyleTag(tag, document) {
+        let cssDoc = this.cssDocuments.get(tag);
         if (!cssDoc || cssDoc.version < document.version) {
-            cssDoc = new CSSDocument_1.CSSDocument(document);
-            this.documents.set(document, cssDoc);
+            cssDoc = new CSSDocument_1.CSSDocument(document, tag);
+            this.cssDocuments.set(tag, cssDoc);
         }
         return cssDoc;
     }
-    isInsideFrontmatter(document, position) {
-        return (0, utils_1.isInsideFrontmatter)(document.getText(), document.offsetAt(position));
+    /**
+     * Get all the CSSDocuments in a document
+     */
+    getCSSDocumentsForDocument(document) {
+        return document.styleTags.map((tag) => this.getCSSDocumentForStyleTag(tag, document));
+    }
+    /**
+     * Get all the stylesheets (Stylesheet type) in a document
+     */
+    getStylesheetsForDocument(document) {
+        return this.getCSSDocumentsForDocument(document).map((cssDoc) => cssDoc.stylesheet);
+    }
+    /**
+     * Get style tag at position for a document
+     */
+    getStyleTagForPosition(document, position) {
+        return document.styleTags.find((styleTag) => {
+            return (0, documents_1.isInTag)(position, styleTag);
+        });
+    }
+    featureEnabled(feature) {
+        return this.configManager.enabled('css.enabled') && this.configManager.enabled(`css.${feature}.enabled`);
     }
 }
 exports.CSSPlugin = CSSPlugin;
+/**
+ * Exclude certain language when getting hover info
+ * The CSS language service only supports CSS, LESS and SCSS,
+ * which mean that we cannot support hover info in other languages
+ */
+function shouldExcludeHover(document) {
+    const language = typeof document === 'string' ? document : extractLanguage(document);
+    switch (language) {
+        case 'sass':
+        case 'stylus':
+        case 'styl':
+            return true;
+        default:
+            return false;
+    }
+}
+/**
+ * Exclude certain language when getting colors
+ * The CSS language service only supports CSS, LESS and SCSS,
+ * which mean that we cannot support colors in other languages
+ */
+function shouldExcludeColor(document) {
+    const language = typeof document === 'string' ? document : extractLanguage(document);
+    switch (language) {
+        case 'sass':
+        case 'stylus':
+        case 'styl':
+            return true;
+        default:
+            return false;
+    }
+}
 function isSASS(document) {
     switch (extractLanguage(document)) {
         case 'sass':

package/dist/plugins/css/StyleAttributeDocument.d.ts

@@ -1,6 +1,6 @@
 import { Stylesheet } from 'vscode-css-languageservice';
 import { Position } from 'vscode-languageserver';
-import { Document, DocumentMapper, ReadableDocument } from '../../core/documents';
+import { AstroDocument, DocumentMapper, ReadableDocument } from '../../core/documents';
 export declare class StyleAttributeDocument extends ReadableDocument implements DocumentMapper {
     private readonly parent;
     private readonly attrStart;
@@ -8,7 +8,7 @@ export declare class StyleAttributeDocument extends ReadableDocument implements
     readonly version: number;
     stylesheet: Stylesheet;
     languageId: string;
-    constructor(parent: Document, attrStart: number, attrEnd: number);
+    constructor(parent: AstroDocument, attrStart: number, attrEnd: number);
     /**
      * Get the fragment position relative to the parent
      * @param pos Position in fragment

package/dist/plugins/css/StyleAttributeDocument.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyleAttributeDocument = void 0;
-const service_1 = require("./service");
+const language_service_1 = require("./language-service");
 const documents_1 = require("../../core/documents");
 const PREFIX = '__ {';
 const SUFFIX = '}';
@@ -13,7 +13,7 @@ class StyleAttributeDocument extends documents_1.ReadableDocument {
         this.attrEnd = attrEnd;
         this.version = this.parent.version;
         this.languageId = 'css';
-        this.stylesheet = (0, service_1.getLanguageService)(this.languageId).parseStylesheet(this);
+        this.stylesheet = (0, language_service_1.getLanguageService)(this.languageId).parseStylesheet(this);
     }
     /**
      * Get the fragment position relative to the parent

package/dist/plugins/css/features/astro-selectors.d.ts

@@ -0,0 +1,2 @@
+import { IPseudoClassData } from 'vscode-css-languageservice';
+export declare const pseudoClass: IPseudoClassData[];

package/dist/plugins/css/features/astro-selectors.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pseudoClass = void 0;
+exports.pseudoClass = [
+    {
+        name: ':global()',
+        description: `[astro] :global modifier
+Apply styles to a selector globally`,
+        references: [
+            {
+                name: 'Astro documentation',
+                url: 'https://docs.astro.build/en/guides/styling/#global-styles-within-style-tag',
+            },
+        ],
+    },
+];

package/dist/plugins/css/features/{getIdClassCompletion.d.ts → getIdClassCompletions.d.ts}

@@ -1,7 +1,7 @@
 import { CompletionItem, CompletionList } from 'vscode-languageserver';
 import { AttributeContext } from '../../../core/documents/parseHtml';
-import { CSSDocument } from '../CSSDocument';
-export declare function getIdClassCompletion(cssDoc: CSSDocument, attributeContext: AttributeContext): CompletionList | null;
+import { Stylesheet } from 'vscode-css-languageservice';
+export declare function getIdClassCompletion(stylesheets: Stylesheet[], attributeContext: AttributeContext): CompletionList | null;
 /**
  * incomplete see
  * https://github.com/microsoft/vscode-css-languageservice/blob/master/src/parser/cssNodes.ts#L14
@@ -16,4 +16,4 @@ export declare type CSSNode = {
     children: CSSNode[] | undefined;
     getText(): string;
 };
-export declare function collectSelectors(stylesheet: CSSNode, type: number): CompletionItem[];
+export declare function collectSelectors(stylesheets: CSSNode[], type: number): CompletionItem[];

package/dist/plugins/css/features/{getIdClassCompletion.js → getIdClassCompletions.js}

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.collectSelectors = exports.NodeType = exports.getIdClassCompletion = void 0;
 const vscode_languageserver_1 = require("vscode-languageserver");
-function getIdClassCompletion(cssDoc, attributeContext) {
+function getIdClassCompletion(stylesheets, attributeContext) {
     const collectingType = getCollectingType(attributeContext);
     if (!collectingType) {
         return null;
     }
-    const items = collectSelectors(cssDoc.stylesheet, collectingType);
-    console.log('getIdClassCompletion items', items.length);
+    const items = collectSelectors(stylesheets, collectingType);
     return vscode_languageserver_1.CompletionList.create(items);
 }
 exports.getIdClassCompletion = getIdClassCompletion;
@@ -35,12 +34,14 @@ var NodeType;
     NodeType[NodeType["ClassSelector"] = 14] = "ClassSelector";
     NodeType[NodeType["IdentifierSelector"] = 15] = "IdentifierSelector";
 })(NodeType = exports.NodeType || (exports.NodeType = {}));
-function collectSelectors(stylesheet, type) {
+function collectSelectors(stylesheets, type) {
     const result = [];
-    walk(stylesheet, (node) => {
-        if (node.type === type) {
-            result.push(node);
-        }
+    stylesheets.forEach((stylesheet) => {
+        walk(stylesheet, (node) => {
+            if (node.type === type) {
+                result.push(node);
+            }
+        });
     });
     return result.map((node) => ({
         label: node.getText().substring(1),
@@ -51,6 +52,6 @@ exports.collectSelectors = collectSelectors;
 function walk(node, callback) {
     callback(node);
     if (node.children) {
-        node.children.forEach((node) => walk(node, callback));
+        node.children.forEach((childrenNode) => walk(childrenNode, callback));
     }
 }

package/dist/plugins/css/{service.js → language-service.js}

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLanguageService = exports.getLanguage = void 0;
 const vscode_css_languageservice_1 = require("vscode-css-languageservice");
+const astro_selectors_1 = require("./features/astro-selectors");
 const customDataProvider = {
     providePseudoClasses() {
-        return [];
+        return astro_selectors_1.pseudoClass;
     },
     provideProperties() {
         return [];

package/dist/plugins/html/HTMLPlugin.d.ts

@@ -1,24 +1,25 @@
-import { CompletionsProvider, FoldingRangeProvider } from '../interfaces';
-import { FoldingRange } from 'vscode-html-languageservice';
-import { CompletionList, Position } from 'vscode-languageserver';
-import type { Document, DocumentManager } from '../../core/documents';
-import type { ConfigManager } from '../../core/config';
-export declare class HTMLPlugin implements CompletionsProvider, FoldingRangeProvider {
+import { CompletionList, Position, FoldingRange, Hover, SymbolInformation } from 'vscode-languageserver';
+import type { Plugin } from '../interfaces';
+import { ConfigManager } from '../../core/config/ConfigManager';
+import { AstroDocument } from '../../core/documents/AstroDocument';
+export declare class HTMLPlugin implements Plugin {
+    __name: string;
     private lang;
-    private documents;
+    private componentLang;
     private styleScriptTemplate;
     private configManager;
-    pluginName: string;
-    constructor(docManager: DocumentManager, configManager: ConfigManager);
-    getCompletions(document: Document, position: Position): CompletionList | null;
-    getFoldingRanges(document: Document): FoldingRange[] | null;
-    doTagComplete(document: Document, position: Position): string | null;
+    constructor(configManager: ConfigManager);
+    doHover(document: AstroDocument, position: Position): Hover | null;
     /**
-     * The HTML language service uses newer types which clash
-     * without the stable ones. Transform to the stable types.
+     * Get HTML completions
+     */
+    getCompletions(document: AstroDocument, position: Position): CompletionList | null;
+    getFoldingRanges(document: AstroDocument): FoldingRange[] | null;
+    doTagComplete(document: AstroDocument, position: Position): string | null;
+    getDocumentSymbols(document: AstroDocument): SymbolInformation[];
+    /**
+     * Get lang completions for style tags (ex: `<style lang="scss">`)
      */
-    private toCompletionItems;
     private getLangCompletions;
-    private isInsideExpression;
-    private isInsideFrontmatter;
+    private featureEnabled;
 }

package/dist/plugins/html/HTMLPlugin.js

@@ -1,81 +1,114 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLPlugin = void 0;
+const vscode_languageserver_1 = require("vscode-languageserver");
 const emmet_helper_1 = require("@vscode/emmet-helper");
 const vscode_html_languageservice_1 = require("vscode-html-languageservice");
-const vscode_languageserver_1 = require("vscode-languageserver");
 const utils_1 = require("../../core/documents/utils");
+const utils_2 = require("../../utils");
+const astro_attributes_1 = require("./features/astro-attributes");
 class HTMLPlugin {
-    constructor(docManager, configManager) {
-        this.lang = (0, vscode_html_languageservice_1.getLanguageService)();
-        this.documents = new WeakMap();
-        this.styleScriptTemplate = new Set(['template', 'style', 'script']);
-        this.pluginName = 'HTML';
-        docManager.on('documentChange', (document) => {
-            this.documents.set(document, document.html);
+    constructor(configManager) {
+        this.__name = 'html';
+        this.lang = (0, vscode_html_languageservice_1.getLanguageService)({
+            customDataProviders: [astro_attributes_1.astroAttributes],
         });
+        this.componentLang = (0, vscode_html_languageservice_1.getLanguageService)({
+            customDataProviders: [astro_attributes_1.astroAttributes, astro_attributes_1.astroDirectives],
+            useDefaultDataProvider: false,
+        });
+        this.styleScriptTemplate = new Set(['style']);
         this.configManager = configManager;
     }
-    getCompletions(document, position) {
-        const html = this.documents.get(document);
+    doHover(document, position) {
+        if (!this.featureEnabled('hover')) {
+            return null;
+        }
+        const html = document.html;
         if (!html) {
             return null;
         }
-        if (this.isInsideFrontmatter(document, position) || this.isInsideExpression(html, document, position)) {
+        const node = html.findNodeAt(document.offsetAt(position));
+        if (!node) {
+            return null;
+        }
+        // If the node we're hovering on is a component, instead only provide astro-specific hover info
+        if ((0, utils_2.isPossibleComponent)(node)) {
+            return this.componentLang.doHover(document, position, html);
+        }
+        return this.lang.doHover(document, position, html);
+    }
+    /**
+     * Get HTML completions
+     */
+    getCompletions(document, position) {
+        if (!this.featureEnabled('completions')) {
             return null;
         }
+        const html = document.html;
+        const offset = document.offsetAt(position);
+        if (!html ||
+            (0, utils_1.isInsideFrontmatter)(document.getText(), offset) ||
+            (0, utils_1.isInsideExpression)(document.getText(), html.findNodeAt(offset).start, offset)) {
+            return null;
+        }
+        // Get Emmet completions
         let emmetResults = {
             isIncomplete: true,
             items: [],
         };
         this.lang.setCompletionParticipants([
             {
-                onHtmlContent: () => (emmetResults = (0, emmet_helper_1.doComplete)(document, position, 'html', this.configManager.getEmmetConfig()) || emmetResults),
+                onHtmlContent: () => (emmetResults =
+                    (0, emmet_helper_1.doComplete)(document, position, 'html', this.configManager.getEmmetConfig()) || emmetResults),
             },
         ]);
-        // For components, we only want Emmet completions inside the component (aka slots) because HTML properties are not necessarily valid for a component
-        const results = (0, utils_1.isInComponentStartTag)(html, document.offsetAt(position)) ? vscode_languageserver_1.CompletionList.create([]) : this.lang.doComplete(document, position, html);
-        const items = this.toCompletionItems(results.items);
-        return vscode_languageserver_1.CompletionList.create([...this.toCompletionItems(items), ...this.getLangCompletions(items), ...emmetResults.items], 
+        // If we're in a component starting tag, we do not want HTML language completions
+        // as HTML attributes are not valid for components
+        const results = (0, utils_1.isInComponentStartTag)(html, document.offsetAt(position))
+            ? vscode_languageserver_1.CompletionList.create([])
+            : this.lang.doComplete(document, position, html);
+        return vscode_languageserver_1.CompletionList.create([...results.items, ...this.getLangCompletions(results.items), ...emmetResults.items], 
         // Emmet completions change on every keystroke, so they are never complete
         emmetResults.items.length > 0);
     }
     getFoldingRanges(document) {
-        const html = this.documents.get(document);
+        const html = document.html;
         if (!html) {
             return null;
         }
         return this.lang.getFoldingRanges(document);
     }
     doTagComplete(document, position) {
-        const html = this.documents.get(document);
-        if (!html) {
+        if (!this.featureEnabled('tagComplete')) {
             return null;
         }
-        if (this.isInsideFrontmatter(document, position) || this.isInsideExpression(html, document, position)) {
+        const html = document.html;
+        const offset = document.offsetAt(position);
+        if (!html ||
+            (0, utils_1.isInsideFrontmatter)(document.getText(), offset) ||
+            (0, utils_1.isInsideExpression)(document.getText(), html.findNodeAt(offset).start, offset)) {
             return null;
         }
         return this.lang.doTagComplete(document, position, html);
     }
+    getDocumentSymbols(document) {
+        if (!this.featureEnabled('documentSymbols')) {
+            return [];
+        }
+        const html = document.html;
+        if (!html) {
+            return [];
+        }
+        return this.lang.findDocumentSymbols(document, html);
+    }
     /**
-     * The HTML language service uses newer types which clash
-     * without the stable ones. Transform to the stable types.
+     * Get lang completions for style tags (ex: `<style lang="scss">`)
      */
-    toCompletionItems(items) {
-        return items.map((item) => {
-            if (!item.textEdit || vscode_languageserver_1.TextEdit.is(item.textEdit)) {
-                return item;
-            }
-            return {
-                ...item,
-                textEdit: vscode_languageserver_1.TextEdit.replace(item.textEdit.replace, item.textEdit.newText),
-            };
-        });
-    }
     getLangCompletions(completions) {
         const styleScriptTemplateCompletions = completions.filter((completion) => completion.kind === vscode_languageserver_1.CompletionItemKind.Property && this.styleScriptTemplate.has(completion.label));
         const langCompletions = [];
-        addLangCompletion('style', ['scss', 'sass']);
+        addLangCompletion('style', ['scss', 'sass', 'less', 'styl', 'stylus']);
         return langCompletions;
         /** Add language completions */
         function addLangCompletion(tag, languages) {
@@ -96,13 +129,8 @@ class HTMLPlugin {
             }));
         }
     }
-    isInsideExpression(html, document, position) {
-        const offset = document.offsetAt(position);
-        const node = html.findNodeAt(offset);
-        return (0, utils_1.isInsideExpression)(document.getText(), node.start, offset);
-    }
-    isInsideFrontmatter(document, position) {
-        return (0, utils_1.isInsideFrontmatter)(document.getText(), document.offsetAt(position));
+    featureEnabled(feature) {
+        return this.configManager.enabled('html.enabled') && this.configManager.enabled(`html.${feature}.enabled`);
     }
 }
 exports.HTMLPlugin = HTMLPlugin;

package/dist/plugins/html/features/astro-attributes.d.ts

@@ -0,0 +1,2 @@
+export declare const astroAttributes: import("vscode-html-languageservice").IHTMLDataProvider;
+export declare const astroDirectives: import("vscode-html-languageservice").IHTMLDataProvider;