@master/css-language-service 2.0.0-rc.3 → 2.0.0-rc.30

package/dist/utils/get-main-completion-items.mjs

@@ -0,0 +1,103 @@
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import { Layer, generateCSS, isCoreRule, MasterCSS } from '@master/css';
+import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+import sortCompletionItems from './sort-completion-items.mjs';
+import getUtilityInfo from './get-utility-info.mjs';
+import cssDataProvider from './css-data-provider.mjs';
+
+function getMainCompletionItems(css = new MasterCSS()) {
+    const completionItems = [];
+    const addedKeys = new Set();
+    for (const EachRule of css.Rules){
+        if (EachRule.definition.layer === Layer.Utility) {
+            const { data, detail, docs } = getUtilityInfo(EachRule, css);
+            const utilityName = EachRule.id.slice(1);
+            completionItems.push({
+                label: utilityName,
+                kind: CompletionItemKind.Value,
+                documentation: getCSSDataDocumentation(data, {
+                    generatedCSS: generateCSS([
+                        utilityName
+                    ], css),
+                    docs
+                }),
+                detail
+            });
+        } else {
+            const nativeProperties = cssDataProvider.provideProperties();
+            const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === EachRule.id);
+            const eachCompletionItem = {
+                kind: CompletionItemKind.Property,
+                documentation: getCSSDataDocumentation(nativeCSSPropertyData, {
+                    docs: isCoreRule(EachRule.id) && EachRule.id
+                }),
+                detail: nativeCSSPropertyData?.syntax
+            };
+            EachRule.keys.forEach((key)=>{
+                addedKeys.delete(key);
+                completionItems.push({
+                    ...eachCompletionItem,
+                    label: key + ':',
+                    sortText: key,
+                    command: {
+                        title: 'triggerSuggest',
+                        command: 'editor.action.triggerSuggest'
+                    }
+                });
+            });
+            /**
+             * @example @ animation and ~ transition
+             */ if (EachRule.definition?.sign && EachRule.definition.includeAnimations) {
+                for(const animationName in css.animations){
+                    completionItems.push({
+                        ...eachCompletionItem,
+                        label: EachRule.definition.sign + animationName + '|1s',
+                        kind: CompletionItemKind.Value
+                    });
+                }
+            }
+            if (EachRule.definition?.ambiguousKeys?.length) {
+                for (const ambiguousKey of EachRule.definition.ambiguousKeys){
+                    if (addedKeys.has(ambiguousKey)) {
+                        continue;
+                    }
+                    addedKeys.add(ambiguousKey);
+                }
+            }
+        }
+    }
+    addedKeys.forEach((ambiguousKey)=>{
+        /**
+         * Ambiguous keys are added to the completion list
+         * @example text: t:
+         */ completionItems.push({
+            kind: CompletionItemKind.Property,
+            detail: 'ambiguous key',
+            label: ambiguousKey + ':',
+            sortText: ambiguousKey,
+            command: {
+                title: 'triggerSuggest',
+                command: 'editor.action.triggerSuggest'
+            }
+        });
+    });
+    if (css.config.styles) {
+        for(const styleName in css.config.styles){
+            const styleClasses = css.styles[styleName];
+            completionItems.push({
+                label: styleName,
+                kind: CompletionItemKind.Value,
+                documentation: getCSSDataDocumentation({}, {
+                    generatedCSS: generateCSS([
+                        styleName
+                    ], css),
+                    docs: 'styles'
+                }),
+                detail: styleClasses.join(' ') + ' (style)'
+            });
+        }
+    }
+    return sortCompletionItems(completionItems);
+}
+
+export { getMainCompletionItems as default };

package/dist/utils/get-position.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var vscodeLanguageserverTextdocument = require('vscode-languageserver-textdocument');
+
+function getPosition(searchString, text) {
+    const document = vscodeLanguageserverTextdocument.TextDocument.create('mockuri://test', 'plaintext', 1, text);
+    const offset = text.indexOf(searchString);
+    const position = document.positionAt(offset);
+    return position;
+}
+
+module.exports = getPosition;

package/dist/utils/get-position.d.ts

@@ -0,0 +1 @@
+export default function getPosition(searchString: string, text: string): import("vscode-languageserver-textdocument").Position;

package/dist/utils/get-position.mjs

@@ -0,0 +1,10 @@
+import { TextDocument } from 'vscode-languageserver-textdocument';
+
+function getPosition(searchString, text) {
+    const document = TextDocument.create('mockuri://test', 'plaintext', 1, text);
+    const offset = text.indexOf(searchString);
+    const position = document.positionAt(offset);
+    return position;
+}
+
+export { getPosition as default };

package/dist/utils/get-pseudo-class-completion-items.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+var css = require('@master/css');
+var cssDataProvider = require('./css-data-provider.cjs');
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var sortCompletionItems = require('./sort-completion-items.cjs');
+var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
+
+const kind = vscodeLanguageserverProtocol.CompletionItemKind.Function;
+function getPseudoClassCompletionItems(css$1 = new css.MasterCSS(), syntax) {
+    const pseudoClassDataList = cssDataProvider.providePseudoClasses().filter((data)=>{
+        // exclude @page pseudo-classes
+        if ([
+            ':first',
+            ':left',
+            ':right',
+            ':blank'
+        ].includes(data.name)) return false;
+        return true;
+    });
+    const completionItems = pseudoClassDataList.map((data)=>{
+        // fix https://github.com/microsoft/vscode-custom-data/issues/78
+        const name = /:(?:dir|has|is|nth-col|where)/.test(data.name) ? data.name + '()' : data.name;
+        let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
+        if (sortText.endsWith('()')) sortText = 'y' + sortText;
+        return {
+            label: name,
+            sortText,
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
+                generatedCSS: css.generateCSS([
+                    syntax + name.slice(1)
+                ], css$1),
+                docs: 'selectors'
+            }),
+            kind,
+            data
+        };
+    });
+    for(const selectorName in css$1.config.selectors){
+        if (selectorName.startsWith('::')) continue;
+        const selectorValue = css$1.config.selectors[selectorName];
+        const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
+        const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
+        const data = pseudoClassDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
+        let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
+        if (sortText.endsWith('()')) sortText = 'y' + sortText;
+        const completionItem = {
+            label: name,
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
+                generatedCSS: css.generateCSS([
+                    syntax + name.slice(1)
+                ], css$1),
+                docs: 'selectors'
+            }),
+            sortText,
+            kind,
+            detail: String(value),
+            data
+        };
+        completionItems.push(completionItem);
+    }
+    return sortCompletionItems(completionItems);
+}
+
+module.exports = getPseudoClassCompletionItems;

package/dist/utils/get-pseudo-class-completion-items.d.ts

@@ -0,0 +1,3 @@
+import { MasterCSS } from '@master/css';
+import { type CompletionItem } from 'vscode-languageserver-protocol';
+export default function getPseudoClassCompletionItems(css: MasterCSS | undefined, syntax: string): CompletionItem[];

package/dist/utils/get-pseudo-class-completion-items.mjs

@@ -0,0 +1,63 @@
+import { generateCSS, MasterCSS } from '@master/css';
+import cssDataProvider from './css-data-provider.mjs';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import sortCompletionItems from './sort-completion-items.mjs';
+import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+
+const kind = CompletionItemKind.Function;
+function getPseudoClassCompletionItems(css = new MasterCSS(), syntax) {
+    const pseudoClassDataList = cssDataProvider.providePseudoClasses().filter((data)=>{
+        // exclude @page pseudo-classes
+        if ([
+            ':first',
+            ':left',
+            ':right',
+            ':blank'
+        ].includes(data.name)) return false;
+        return true;
+    });
+    const completionItems = pseudoClassDataList.map((data)=>{
+        // fix https://github.com/microsoft/vscode-custom-data/issues/78
+        const name = /:(?:dir|has|is|nth-col|where)/.test(data.name) ? data.name + '()' : data.name;
+        let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
+        if (sortText.endsWith('()')) sortText = 'y' + sortText;
+        return {
+            label: name,
+            sortText,
+            documentation: getCSSDataDocumentation(data, {
+                generatedCSS: generateCSS([
+                    syntax + name.slice(1)
+                ], css),
+                docs: 'selectors'
+            }),
+            kind,
+            data
+        };
+    });
+    for(const selectorName in css.config.selectors){
+        if (selectorName.startsWith('::')) continue;
+        const selectorValue = css.config.selectors[selectorName];
+        const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
+        const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
+        const data = pseudoClassDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
+        let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
+        if (sortText.endsWith('()')) sortText = 'y' + sortText;
+        const completionItem = {
+            label: name,
+            documentation: getCSSDataDocumentation(data, {
+                generatedCSS: generateCSS([
+                    syntax + name.slice(1)
+                ], css),
+                docs: 'selectors'
+            }),
+            sortText,
+            kind,
+            detail: String(value),
+            data
+        };
+        completionItems.push(completionItem);
+    }
+    return sortCompletionItems(completionItems);
+}
+
+export { getPseudoClassCompletionItems as default };

package/dist/utils/get-pseudo-element-completion-items.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var css = require('@master/css');
+var cssDataProvider = require('./css-data-provider.cjs');
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var sortCompletionItems = require('./sort-completion-items.cjs');
+var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
+
+const kind = vscodeLanguageserverProtocol.CompletionItemKind.Function;
+function getPseudoElementCompletionItems(css$1 = new css.MasterCSS(), syntax) {
+    const pseudoElementDataList = cssDataProvider.providePseudoElements();
+    const completionItems = pseudoElementDataList.map((data)=>{
+        // fix https://github.com/microsoft/vscode-custom-data/issues/78
+        const name = /::(?:part|slotted)/.test(data.name) ? data.name + '()' : data.name;
+        let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
+        if (sortText.endsWith('()')) sortText = 'z' + sortText;
+        return {
+            label: name,
+            sortText,
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
+                generatedCSS: css.generateCSS([
+                    syntax + name.slice(2)
+                ], css$1),
+                docs: 'selectors'
+            }),
+            kind,
+            data
+        };
+    });
+    for(const selectorName in css$1.config.selectors){
+        if (!selectorName.startsWith('::')) continue;
+        const selectorValue = css$1.config.selectors[selectorName];
+        const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
+        const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
+        const data = pseudoElementDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
+        let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
+        if (sortText.endsWith('()')) sortText = 'z' + sortText;
+        const completionItem = {
+            label: name,
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
+                generatedCSS: css.generateCSS([
+                    syntax + name.slice(2)
+                ], css$1),
+                docs: 'selectors'
+            }),
+            sortText,
+            kind,
+            detail: String(value),
+            data
+        };
+        completionItems.push(completionItem);
+    }
+    return sortCompletionItems(completionItems);
+}
+
+module.exports = getPseudoElementCompletionItems;

package/dist/utils/get-pseudo-element-completion-items.d.ts

@@ -0,0 +1,3 @@
+import { MasterCSS } from '@master/css';
+import { type CompletionItem } from 'vscode-languageserver-protocol';
+export default function getPseudoElementCompletionItems(css: MasterCSS | undefined, syntax: string): CompletionItem[];

package/dist/utils/get-pseudo-element-completion-items.mjs

@@ -0,0 +1,54 @@
+import { generateCSS, MasterCSS } from '@master/css';
+import cssDataProvider from './css-data-provider.mjs';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import sortCompletionItems from './sort-completion-items.mjs';
+import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+
+const kind = CompletionItemKind.Function;
+function getPseudoElementCompletionItems(css = new MasterCSS(), syntax) {
+    const pseudoElementDataList = cssDataProvider.providePseudoElements();
+    const completionItems = pseudoElementDataList.map((data)=>{
+        // fix https://github.com/microsoft/vscode-custom-data/issues/78
+        const name = /::(?:part|slotted)/.test(data.name) ? data.name + '()' : data.name;
+        let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
+        if (sortText.endsWith('()')) sortText = 'z' + sortText;
+        return {
+            label: name,
+            sortText,
+            documentation: getCSSDataDocumentation(data, {
+                generatedCSS: generateCSS([
+                    syntax + name.slice(2)
+                ], css),
+                docs: 'selectors'
+            }),
+            kind,
+            data
+        };
+    });
+    for(const selectorName in css.config.selectors){
+        if (!selectorName.startsWith('::')) continue;
+        const selectorValue = css.config.selectors[selectorName];
+        const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
+        const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
+        const data = pseudoElementDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
+        let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
+        if (sortText.endsWith('()')) sortText = 'z' + sortText;
+        const completionItem = {
+            label: name,
+            documentation: getCSSDataDocumentation(data, {
+                generatedCSS: generateCSS([
+                    syntax + name.slice(2)
+                ], css),
+                docs: 'selectors'
+            }),
+            sortText,
+            kind,
+            detail: String(value),
+            data
+        };
+        completionItems.push(completionItem);
+    }
+    return sortCompletionItems(completionItems);
+}
+
+export { getPseudoElementCompletionItems as default };

package/dist/utils/get-query-completion-items.cjs

@@ -0,0 +1,102 @@
+'use strict';
+
+var css = require('@master/css');
+var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
+var sortCompletionItems = require('./sort-completion-items.cjs');
+var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
+var cssDataProvider = require('./css-data-provider.cjs');
+
+function getQueryCompletionItems(css$1 = new css.MasterCSS(), triggerCharacter = css.AT_SIGN, syntax) {
+    const atDataList = cssDataProvider.provideAtDirectives();
+    const completionItems = [];
+    if (!css.QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {
+        completionItems.push({
+            label: triggerCharacter + 'media()',
+            filterText: 'media()',
+            insertText: 'media()',
+            sortText: 'media()',
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(atDataList.find(({ name })=>name === '@media'), {
+                generatedCSS: css.generateCSS([
+                    syntax + 'media()'
+                ], css$1),
+                docs: 'queries'
+            })
+        }, {
+            label: triggerCharacter + 'supports()',
+            filterText: 'supports()',
+            insertText: 'supports()',
+            sortText: 'supports()',
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(atDataList.find(({ name })=>name === '@supports'), {
+                generatedCSS: css.generateCSS([
+                    syntax + 'supports()'
+                ], css$1),
+                docs: 'queries'
+            })
+        });
+    }
+    Object.entries(css$1.queries).forEach(([name, value])=>{
+        const completionItem = {
+            filterText: name,
+            insertText: name,
+            documentation: getCssDataDocumentation.getCSSDataDocumentation(undefined, {
+                generatedCSS: css.generateCSS([
+                    syntax + name
+                ], css$1),
+                docs: 'queries'
+            })
+        };
+        if ([
+            css.AT_SIGN,
+            ...css.QUERY_LOGICAL_OPERATORS
+        ].includes(triggerCharacter)) {
+            if (typeof value === 'number') {
+                completionItems.push({
+                    ...completionItem,
+                    label: triggerCharacter + name,
+                    sortText: String(value).padStart(8, '0'),
+                    filterText: name,
+                    insertText: name,
+                    documentation: getCssDataDocumentation.getCSSDataDocumentation(undefined, {
+                        generatedCSS: css.generateCSS([
+                            syntax + name
+                        ], css$1),
+                        docs: 'queries'
+                    }),
+                    detail: `screen width ${'>='} ${value}px`,
+                    kind: vscodeLanguageserverProtocol.CompletionItemKind.Keyword
+                });
+            } else {
+                completionItems.push({
+                    ...completionItem,
+                    label: triggerCharacter + name,
+                    detail: value,
+                    sortText: name,
+                    kind: vscodeLanguageserverProtocol.CompletionItemKind.Keyword
+                });
+            }
+        } else if (css.QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {
+            if (typeof value === 'number') {
+                const prevComparisonCharacter = syntax.charAt(syntax.length - 2);
+                const comparisonCharacter = prevComparisonCharacter === '>' || prevComparisonCharacter === '<' ? prevComparisonCharacter + triggerCharacter : triggerCharacter;
+                completionItems.push({
+                    ...completionItem,
+                    label: comparisonCharacter + name,
+                    sortText: comparisonCharacter + String(value).padStart(8, '0'),
+                    filterText: name,
+                    insertText: name,
+                    documentation: getCssDataDocumentation.getCSSDataDocumentation(undefined, {
+                        generatedCSS: css.generateCSS([
+                            syntax + name
+                        ], css$1),
+                        docs: 'queries'
+                    }),
+                    detail: `screen width ${comparisonCharacter} ${value}px`,
+                    kind: vscodeLanguageserverProtocol.CompletionItemKind.Keyword
+                });
+            }
+        }
+    });
+    return sortCompletionItems(completionItems);
+}
+
+module.exports = getQueryCompletionItems;

package/dist/utils/get-query-completion-items.d.ts

@@ -0,0 +1,3 @@
+import { MasterCSS } from '@master/css';
+import { CompletionItem } from 'vscode-languageserver-protocol';
+export default function getQueryCompletionItems(css: MasterCSS | undefined, triggerCharacter: string | undefined, syntax: string): CompletionItem[];

package/dist/utils/get-query-completion-items.mjs

@@ -0,0 +1,100 @@
+import { QUERY_COMPARISON_OPERATORS, generateCSS, AT_SIGN, QUERY_LOGICAL_OPERATORS, MasterCSS } from '@master/css';
+import { CompletionItemKind } from 'vscode-languageserver-protocol';
+import sortCompletionItems from './sort-completion-items.mjs';
+import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
+import cssDataProvider from './css-data-provider.mjs';
+
+function getQueryCompletionItems(css = new MasterCSS(), triggerCharacter = AT_SIGN, syntax) {
+    const atDataList = cssDataProvider.provideAtDirectives();
+    const completionItems = [];
+    if (!QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {
+        completionItems.push({
+            label: triggerCharacter + 'media()',
+            filterText: 'media()',
+            insertText: 'media()',
+            sortText: 'media()',
+            documentation: getCSSDataDocumentation(atDataList.find(({ name })=>name === '@media'), {
+                generatedCSS: generateCSS([
+                    syntax + 'media()'
+                ], css),
+                docs: 'queries'
+            })
+        }, {
+            label: triggerCharacter + 'supports()',
+            filterText: 'supports()',
+            insertText: 'supports()',
+            sortText: 'supports()',
+            documentation: getCSSDataDocumentation(atDataList.find(({ name })=>name === '@supports'), {
+                generatedCSS: generateCSS([
+                    syntax + 'supports()'
+                ], css),
+                docs: 'queries'
+            })
+        });
+    }
+    Object.entries(css.queries).forEach(([name, value])=>{
+        const completionItem = {
+            filterText: name,
+            insertText: name,
+            documentation: getCSSDataDocumentation(undefined, {
+                generatedCSS: generateCSS([
+                    syntax + name
+                ], css),
+                docs: 'queries'
+            })
+        };
+        if ([
+            AT_SIGN,
+            ...QUERY_LOGICAL_OPERATORS
+        ].includes(triggerCharacter)) {
+            if (typeof value === 'number') {
+                completionItems.push({
+                    ...completionItem,
+                    label: triggerCharacter + name,
+                    sortText: String(value).padStart(8, '0'),
+                    filterText: name,
+                    insertText: name,
+                    documentation: getCSSDataDocumentation(undefined, {
+                        generatedCSS: generateCSS([
+                            syntax + name
+                        ], css),
+                        docs: 'queries'
+                    }),
+                    detail: `screen width ${'>='} ${value}px`,
+                    kind: CompletionItemKind.Keyword
+                });
+            } else {
+                completionItems.push({
+                    ...completionItem,
+                    label: triggerCharacter + name,
+                    detail: value,
+                    sortText: name,
+                    kind: CompletionItemKind.Keyword
+                });
+            }
+        } else if (QUERY_COMPARISON_OPERATORS.includes(triggerCharacter)) {
+            if (typeof value === 'number') {
+                const prevComparisonCharacter = syntax.charAt(syntax.length - 2);
+                const comparisonCharacter = prevComparisonCharacter === '>' || prevComparisonCharacter === '<' ? prevComparisonCharacter + triggerCharacter : triggerCharacter;
+                completionItems.push({
+                    ...completionItem,
+                    label: comparisonCharacter + name,
+                    sortText: comparisonCharacter + String(value).padStart(8, '0'),
+                    filterText: name,
+                    insertText: name,
+                    documentation: getCSSDataDocumentation(undefined, {
+                        generatedCSS: generateCSS([
+                            syntax + name
+                        ], css),
+                        docs: 'queries'
+                    }),
+                    detail: `screen width ${comparisonCharacter} ${value}px`,
+                    kind: CompletionItemKind.Keyword
+                });
+            }
+        }
+    });
+    return sortCompletionItems(completionItems);
+}
+
+export { getQueryCompletionItems as default };

package/dist/utils/get-range.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+// todo: unstable range calculation
+function getRange(searchString, doc) {
+    const text = doc.getText();
+    const regex = new RegExp(`(\\b(?:className|class)\\s?=\\s?(['"\`]))(.*?)\\2`, 'g');
+    const classAttMatch = regex.exec(text);
+    if (classAttMatch) {
+        const attrIndex = classAttMatch.index + classAttMatch[1].length;
+        const className = classAttMatch[3];
+        const index = className.indexOf(searchString);
+        return {
+            start: doc.positionAt(attrIndex + index),
+            end: doc.positionAt(attrIndex + index + searchString.length)
+        };
+    } else {
+        throw new Error(`Cannot find ${searchString} in ${text}`);
+    }
+}
+
+module.exports = getRange;

package/dist/utils/get-range.d.ts

@@ -0,0 +1,2 @@
+import { TextDocument, Range } from 'vscode-languageserver-textdocument';
+export default function getRange(searchString: string, doc: TextDocument): Range;

package/dist/utils/get-range.mjs

@@ -0,0 +1,19 @@
+// todo: unstable range calculation
+function getRange(searchString, doc) {
+    const text = doc.getText();
+    const regex = new RegExp(`(\\b(?:className|class)\\s?=\\s?(['"\`]))(.*?)\\2`, 'g');
+    const classAttMatch = regex.exec(text);
+    if (classAttMatch) {
+        const attrIndex = classAttMatch.index + classAttMatch[1].length;
+        const className = classAttMatch[3];
+        const index = className.indexOf(searchString);
+        return {
+            start: doc.positionAt(attrIndex + index),
+            end: doc.positionAt(attrIndex + index + searchString.length)
+        };
+    } else {
+        throw new Error(`Cannot find ${searchString} in ${text}`);
+    }
+}
+
+export { getRange as default };

package/dist/utils/get-utility-info.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var cssDataProvider = require('./css-data-provider.cjs');
+
+function getUtilityInfo(EachRule, css = new MasterCSS()) {
+    const nativeProperties = cssDataProvider.provideProperties();
+    const declarations = EachRule.definition.declarations;
+    const propsLength = Object.keys(declarations || {}).length;
+    const propName = Object.keys(declarations || {})[0];
+    const propValue = declarations?.[propName];
+    let data;
+    let detail;
+    /**
+     * Remaps to native CSS properties when only one property is declared
+     * */ if (propsLength === 1) {
+        const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === propName);
+        data = nativeCSSPropertyData?.values?.find(({ name })=>name === propValue || name.replace(/^-(ms|moz)-/, '') === propValue);
+        if (data) {
+            detail = `${propName}: ${propValue}`;
+        } else {
+            data = nativeCSSPropertyData;
+            detail = nativeCSSPropertyData?.syntax;
+        }
+    }
+    return {
+        docs: data ? propName : 'utilities',
+        data,
+        detail
+    };
+}
+
+module.exports = getUtilityInfo;