@astrojs/language-server 0.9.3 → 0.12.1

package/dist/plugins/astro/AstroPlugin.js

@@ -1,40 +1,22 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AstroPlugin = void 0;
+const typescript_1 = __importDefault(require("typescript"));
 const vscode_languageserver_1 = require("vscode-languageserver");
+const documents_1 = require("../../core/documents");
 const utils_1 = require("../../utils");
-const utils_2 = require("../typescript/utils");
-const utils_3 = require("../../core/documents/utils");
-const ts = __importStar(require("typescript"));
 const LanguageServiceManager_1 = require("../typescript/LanguageServiceManager");
-const utils_4 = require("../typescript/utils");
-const vscode_languageserver_types_1 = require("vscode-languageserver-types");
-const CompletionProvider_1 = require("./features/CompletionProvider");
+const utils_2 = require("../typescript/utils");
+const CompletionsProvider_1 = require("./features/CompletionsProvider");
 class AstroPlugin {
     constructor(docManager, configManager, workspaceUris) {
-        this.pluginName = 'Astro';
+        this.__name = 'astro';
         this.configManager = configManager;
-        this.tsLanguageServiceManager = new LanguageServiceManager_1.LanguageServiceManager(docManager, configManager, workspaceUris);
-        this.completionProvider = new CompletionProvider_1.CompletionProvider(docManager, this.tsLanguageServiceManager);
+        this.languageServiceManager = new LanguageServiceManager_1.LanguageServiceManager(docManager, workspaceUris, configManager);
+        this.completionProvider = new CompletionsProvider_1.CompletionsProviderImpl(docManager, this.languageServiceManager);
     }
     async getCompletions(document, position, completionContext) {
         const completions = this.completionProvider.getCompletions(document, position, completionContext);
@@ -42,7 +24,7 @@ class AstroPlugin {
     }
     async getFoldingRanges(document) {
         const foldingRanges = [];
-        const { frontmatter } = document.astro;
+        const { frontmatter } = document.astroMeta;
         // Currently editing frontmatter, don't fold
         if (frontmatter.state !== 'closed')
             return foldingRanges;
@@ -54,7 +36,7 @@ class AstroPlugin {
                 startCharacter: start.character,
                 endLine: end.line,
                 endCharacter: end.character,
-                kind: vscode_languageserver_types_1.FoldingRangeKind.Imports,
+                kind: vscode_languageserver_1.FoldingRangeKind.Imports,
             },
         ];
     }
@@ -69,20 +51,20 @@ class AstroPlugin {
             return [];
         }
         const [componentName] = node.tag.split(':');
-        const { lang } = await this.tsLanguageServiceManager.getTypeScriptDoc(document);
+        const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
         const defs = this.getDefinitionsForComponentName(document, lang, componentName);
         if (!defs || !defs.length) {
             return [];
         }
         const startRange = vscode_languageserver_1.Range.create(vscode_languageserver_1.Position.create(0, 0), vscode_languageserver_1.Position.create(0, 0));
         const links = defs.map((def) => {
-            const defFilePath = (0, utils_4.ensureRealFilePath)(def.fileName);
+            const defFilePath = (0, utils_2.ensureRealFilePath)(def.fileName);
             return vscode_languageserver_1.LocationLink.create((0, utils_1.pathToUrl)(defFilePath), startRange, startRange);
         });
         return links;
     }
     isInsideFrontmatter(document, position) {
-        return (0, utils_3.isInsideFrontmatter)(document.getText(), document.offsetAt(position));
+        return (0, documents_1.isInsideFrontmatter)(document.getText(), document.offsetAt(position));
     }
     isComponentTag(node) {
         if (!node.tag) {
@@ -111,15 +93,15 @@ class AstroPlugin {
     }
     getImportSpecifierForIdentifier(sourceFile, identifier) {
         let importSpecifier = undefined;
-        ts.forEachChild(sourceFile, (tsNode) => {
-            if (ts.isImportDeclaration(tsNode)) {
+        typescript_1.default.forEachChild(sourceFile, (tsNode) => {
+            if (typescript_1.default.isImportDeclaration(tsNode)) {
                 if (tsNode.importClause) {
                     const { name, namedBindings } = tsNode.importClause;
                     if (name && name.getText() === identifier) {
                         importSpecifier = tsNode.moduleSpecifier;
                         return true;
                     }
-                    else if (namedBindings && namedBindings.kind === ts.SyntaxKind.NamedImports) {
+                    else if (namedBindings && namedBindings.kind === typescript_1.default.SyntaxKind.NamedImports) {
                         const elements = namedBindings.elements;
                         for (let elem of elements) {
                             if (elem.name.getText() === identifier) {
@@ -135,6 +117,3 @@ class AstroPlugin {
     }
 }
 exports.AstroPlugin = AstroPlugin;
-function isNodeExported(node) {
-    return (ts.getCombinedModifierFlags(node) & ts.ModifierFlags.Export) !== 0 || (!!node.parent && node.parent.kind === ts.SyntaxKind.SourceFile);
-}

package/dist/plugins/astro/features/{CompletionProvider.d.ts → CompletionsProvider.d.ts}

@@ -1,12 +1,12 @@
 import type { AppCompletionList } from '../../interfaces';
-import type { Document, DocumentManager } from '../../../core/documents';
+import type { AstroDocument, DocumentManager } from '../../../core/documents';
 import { CompletionContext, Position } from 'vscode-languageserver';
 import { LanguageServiceManager as TypeScriptLanguageServiceManager } from '../../typescript/LanguageServiceManager';
-export declare class CompletionProvider {
+export declare class CompletionsProviderImpl {
     private readonly docManager;
-    private readonly tsLanguageServiceManager;
-    constructor(docManager: DocumentManager, tsLanguageServiceManager: TypeScriptLanguageServiceManager);
-    getCompletions(document: Document, position: Position, completionContext?: CompletionContext): Promise<AppCompletionList | null>;
+    private readonly languageServiceManager;
+    constructor(docManager: DocumentManager, languageServiceManager: TypeScriptLanguageServiceManager);
+    getCompletions(document: AstroDocument, position: Position, completionContext?: CompletionContext): Promise<AppCompletionList | null>;
     private getClientHintCompletion;
     private getComponentScriptCompletion;
     private getPropCompletions;

package/dist/plugins/astro/features/{CompletionProvider.js → CompletionsProvider.js}

@@ -1,34 +1,18 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompletionProvider = void 0;
+exports.CompletionsProviderImpl = void 0;
 const vscode_languageserver_1 = require("vscode-languageserver");
-const ts = __importStar(require("typescript"));
+const typescript_1 = __importDefault(require("typescript"));
 const utils_1 = require("../../../core/documents/utils");
 const utils_2 = require("../../../utils");
 const utils_3 = require("../../typescript/utils");
-class CompletionProvider {
-    constructor(docManager, tsLanguageServiceManager) {
+class CompletionsProviderImpl {
+    constructor(docManager, languageServiceManager) {
         this.docManager = docManager;
-        this.tsLanguageServiceManager = tsLanguageServiceManager;
+        this.languageServiceManager = languageServiceManager;
     }
     async getCompletions(document, position, completionContext) {
         const doc = this.docManager.get(document.uri);
@@ -76,8 +60,8 @@ class CompletionProvider {
             {
                 label: ':media',
                 insertText: 'media',
-                commitCharacters: ['m']
-            }
+                commitCharacters: ['m'],
+            },
         ];
     }
     getComponentScriptCompletion(document, position, completionContext) {
@@ -91,18 +75,22 @@ class CompletionProvider {
             commitCharacters: ['-'],
         };
         const prefix = document.getLineUntilOffset(document.offsetAt(position));
-        if (document.astro.frontmatter.state === null) {
+        if (document.astroMeta.frontmatter.state === null) {
             return {
                 ...base,
                 insertText: '---\n$0\n---',
-                textEdit: prefix.match(/^\s*\-+/) ? vscode_languageserver_1.TextEdit.replace({ start: { ...position, character: 0 }, end: position }, '---\n$0\n---') : undefined,
+                textEdit: prefix.match(/^\s*\-+/)
+                    ? vscode_languageserver_1.TextEdit.replace({ start: { ...position, character: 0 }, end: position }, '---\n$0\n---')
+                    : undefined,
             };
         }
-        if (document.astro.frontmatter.state === 'open') {
+        if (document.astroMeta.frontmatter.state === 'open') {
             return {
                 ...base,
                 insertText: '---',
-                textEdit: prefix.match(/^\s*\-+/) ? vscode_languageserver_1.TextEdit.replace({ start: { ...position, character: 0 }, end: position }, '---') : undefined,
+                textEdit: prefix.match(/^\s*\-+/)
+                    ? vscode_languageserver_1.TextEdit.replace({ start: { ...position, character: 0 }, end: position }, '---')
+                    : undefined,
             };
         }
         return null;
@@ -123,15 +111,17 @@ class CompletionProvider {
             return [];
         }
         // If inside of attribute value, skip.
-        if (completionContext && completionContext.triggerKind === vscode_languageserver_1.CompletionTriggerKind.TriggerCharacter && completionContext.triggerCharacter === '"') {
+        if (completionContext &&
+            completionContext.triggerKind === vscode_languageserver_1.CompletionTriggerKind.TriggerCharacter &&
+            completionContext.triggerCharacter === '"') {
             return [];
         }
         const componentName = node.tag;
-        const { lang: thisLang } = await this.tsLanguageServiceManager.getTypeScriptDoc(document);
+        const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
         // Get the source file
         const filePath = (0, utils_2.urlToPath)(document.uri);
         const tsFilePath = (0, utils_3.toVirtualAstroFilePath)(filePath);
-        const program = thisLang.getProgram();
+        const program = lang.getProgram();
         const sourceFile = program === null || program === void 0 ? void 0 : program.getSourceFile(tsFilePath);
         const typeChecker = program === null || program === void 0 ? void 0 : program.getTypeChecker();
         if (!sourceFile || !typeChecker) {
@@ -152,14 +142,14 @@ class CompletionProvider {
         // Add completions for this types props
         for (let baseType of componentType.getBaseTypes() || []) {
             const members = ((_a = baseType.getSymbol()) === null || _a === void 0 ? void 0 : _a.members) || [];
-            members.forEach(mem => {
+            members.forEach((mem) => {
                 let completionItem = this.getCompletionItemForTypeMember(mem, typeChecker);
                 completionItems.push(completionItem);
             });
         }
         // Add completions for this types base members
         const members = ((_b = componentType.getSymbol()) === null || _b === void 0 ? void 0 : _b.members) || [];
-        members.forEach(mem => {
+        members.forEach((mem) => {
             let completionItem = this.getCompletionItemForTypeMember(mem, typeChecker);
             completionItems.push(completionItem);
         });
@@ -168,19 +158,20 @@ class CompletionProvider {
     getImportedSymbol(sourceFile, identifier) {
         for (let list of sourceFile.getChildren()) {
             for (let node of list.getChildren()) {
-                if (ts.isImportDeclaration(node)) {
+                if (typescript_1.default.isImportDeclaration(node)) {
                     let clauses = node.importClause;
                     if (!clauses)
                         return null;
                     let namedImport = clauses.getChildAt(0);
-                    if (ts.isNamedImports(namedImport)) {
-                        for (let imp of namedImport.elements) { // Iterate the named imports
+                    if (typescript_1.default.isNamedImports(namedImport)) {
+                        for (let imp of namedImport.elements) {
+                            // Iterate the named imports
                             if (imp.name.getText() === identifier) {
                                 return imp;
                             }
                         }
                     }
-                    else if (ts.isIdentifier(namedImport)) {
+                    else if (typescript_1.default.isIdentifier(namedImport)) {
                         if (namedImport.getText() === identifier) {
                             return namedImport;
                         }
@@ -196,21 +187,9 @@ class CompletionProvider {
             return null;
         }
         for (const decl of (sym === null || sym === void 0 ? void 0 : sym.getDeclarations()) || []) {
-            const fileName = decl.getSourceFile().fileName;
-            if ((0, utils_3.isVirtualAstroFilePath)(fileName)) {
-                if (!ts.isFunctionDeclaration(decl)) {
-                    console.error(`Unexpected: .astro files should export a default function for the component definition.`);
-                    continue;
-                }
-                const fn = decl;
-                if (!fn.parameters.length)
-                    continue;
-                const param1 = fn.parameters[0];
-                const type = typeChecker.getTypeAtLocation(param1);
-                return type;
-            }
-            else if (fileName.endsWith('.tsx') || fileName.endsWith('.jsx')) {
-                if (!ts.isFunctionDeclaration(decl)) {
+            const fileName = (0, utils_3.toVirtualFilePath)(decl.getSourceFile().fileName);
+            if (fileName.endsWith('.tsx') || fileName.endsWith('.jsx')) {
+                if (!typescript_1.default.isFunctionDeclaration(decl)) {
                     console.error(`We only support function components for tsx/jsx at the moment.`);
                     continue;
                 }
@@ -255,4 +234,4 @@ class CompletionProvider {
         return (0, utils_1.isInsideFrontmatter)(document.getText(), document.offsetAt(position));
     }
 }
-exports.CompletionProvider = CompletionProvider;
+exports.CompletionsProviderImpl = CompletionsProviderImpl;

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

@@ -1,6 +1,6 @@
 import { Stylesheet, TextDocument } from 'vscode-css-languageservice';
 import { Position } from 'vscode-languageserver';
-import { Document, DocumentMapper, ReadableDocument } from '../../core/documents/index';
+import { AstroDocument, DocumentMapper, ReadableDocument, TagInformation } from '../../core/documents';
 export interface CSSDocumentBase extends DocumentMapper, TextDocument {
     languageId: string;
     stylesheet: Stylesheet;
@@ -11,7 +11,7 @@ export declare class CSSDocument extends ReadableDocument implements DocumentMap
     readonly version: number;
     stylesheet: Stylesheet;
     languageId: string;
-    constructor(parent: Document);
+    constructor(parent: AstroDocument, styleInfo: Pick<TagInformation, 'attributes' | 'start' | 'end'>);
     /**
      * Get the fragment position relative to the parent
      * @param pos Position in fragment
@@ -32,7 +32,7 @@ export declare class CSSDocument extends ReadableDocument implements DocumentMap
      */
     getText(): string;
     /**
-     * Returns the length of the fragment as calculated from the start and end positon
+     * Returns the length of the fragment as calculated from the start and end position
      */
     getTextLength(): number;
     /**

package/dist/plugins/css/CSSDocument.js

@@ -1,25 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CSSDocument = void 0;
-const service_1 = require("./service");
-const index_1 = require("../../core/documents/index");
-class CSSDocument extends index_1.ReadableDocument {
-    constructor(parent) {
+const language_service_1 = require("./language-service");
+const documents_1 = require("../../core/documents");
+class CSSDocument extends documents_1.ReadableDocument {
+    constructor(parent, styleInfo) {
         super();
         this.parent = parent;
+        this.styleInfo = styleInfo;
         this.version = this.parent.version;
-        if (this.parent.styleInfo) {
-            this.styleInfo = this.parent.styleInfo;
-        }
-        else {
-            this.styleInfo = {
-                attributes: {},
-                start: -1,
-                end: -1,
-            };
-        }
         this.languageId = this.language;
-        this.stylesheet = (0, service_1.getLanguageService)(this.language).parseStylesheet(this);
+        this.stylesheet = (0, language_service_1.getLanguageService)(this.language).parseStylesheet(this);
     }
     /**
      * Get the fragment position relative to the parent
@@ -52,7 +43,7 @@ class CSSDocument extends index_1.ReadableDocument {
         return this.parent.getText().slice(this.styleInfo.start, this.styleInfo.end);
     }
     /**
-     * Returns the length of the fragment as calculated from the start and end positon
+     * Returns the length of the fragment as calculated from the start and end position
      */
     getTextLength() {
         return this.styleInfo.end - this.styleInfo.start;

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

@@ -1,17 +1,27 @@
-import type { CompletionsProvider } from '../interfaces';
-import type { Document, DocumentManager } from '../../core/documents';
-import type { ConfigManager } from '../../core/config';
-import { CompletionContext, CompletionList, Position } from 'vscode-languageserver';
-export declare class CSSPlugin implements CompletionsProvider {
-    private docManager;
+import { Color, ColorInformation, ColorPresentation, CompletionContext, CompletionList, Position, Range } from 'vscode-languageserver';
+import { ConfigManager } from '../../core/config/ConfigManager';
+import { AstroDocument } from '../../core/documents';
+import type { Plugin } from '../interfaces';
+export declare class CSSPlugin implements Plugin {
+    __name: string;
     private configManager;
-    private documents;
+    private cssDocuments;
     private triggerCharacters;
-    pluginName: string;
-    constructor(docManager: DocumentManager, configManager: ConfigManager);
-    getCompletions(document: Document, position: Position, completionContext?: CompletionContext): CompletionList | null;
+    constructor(configManager: ConfigManager);
+    getCompletions(document: AstroDocument, position: Position, completionContext?: CompletionContext): CompletionList | null;
     private getCompletionsInternal;
+    getDocumentColors(document: AstroDocument): ColorInformation[];
+    getColorPresentations(document: AstroDocument, range: Range, color: Color): ColorPresentation[];
     private inStyleAttributeWithoutInterpolation;
-    private getCSSDoc;
-    private isInsideFrontmatter;
+    /**
+     * Get the associated CSS Document for a style tag
+     */
+    private getCSSDocumentForStyleTag;
+    private getCSSDocumentsForDocument;
+    private getStylesheetsForDocument;
+    /**
+     * Get style tag at position for a document
+     */
+    private getStyleTagForPosition;
+    private featureEnabled;
 }

package/dist/plugins/css/CSSPlugin.js

@@ -1,85 +1,156 @@
 "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) {
+        if (!this.featureEnabled('completions')) {
+            return null;
+        }
+        if ((0, documents_1.isInsideFrontmatter)(document.getText(), document.offsetAt(position))) {
+            return null;
+        }
         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;
         }
-        if (this.isInsideFrontmatter(document, position)) {
-            return null;
-        }
-        const cssDocument = this.getCSSDoc(document);
-        if (cssDocument.isInGenerated(position)) {
-            return this.getCompletionsInternal(document, position, cssDocument);
-        }
-        const attributeContext = (0, parseHtml_1.getAttributeContextAtPosition)(document, position);
-        if (!attributeContext) {
+        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;
         }
-        if (this.inStyleAttributeWithoutInterpolation(attributeContext, document.getText())) {
-            const [start, end] = attributeContext.valueRange;
-            return this.getCompletionsInternal(document, position, new StyleAttributeDocument_1.StyleAttributeDocument(document, start, end));
-        }
-        else {
-            return (0, getIdClassCompletion_1.getIdClassCompletion)(cssDocument, attributeContext);
-        }
+        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);
+    }
     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));
+    getCSSDocumentsForDocument(document) {
+        return document.styleTags.map((tag) => this.getCSSDocumentForStyleTag(tag, 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 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