@master/css-language-service 2.0.0-rc.6 → 2.0.0-rc.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -0
- package/dist/common.cjs +57 -0
- package/dist/common.d.ts +9 -0
- package/dist/common.mjs +48 -0
- package/dist/core.cjs +246 -0
- package/dist/core.d.ts +29 -0
- package/dist/core.mjs +244 -0
- package/dist/features/edit-syntax-colors.cjs +19 -0
- package/dist/features/edit-syntax-colors.d.ts +4 -0
- package/dist/features/edit-syntax-colors.mjs +17 -0
- package/dist/features/inspect-syntax.cjs +70 -0
- package/dist/features/inspect-syntax.d.ts +4 -0
- package/dist/features/inspect-syntax.mjs +68 -0
- package/dist/features/render-syntax-colors.cjs +88 -0
- package/dist/features/render-syntax-colors.d.ts +4 -0
- package/dist/features/render-syntax-colors.mjs +86 -0
- package/dist/features/suggest-syntax.cjs +20 -0
- package/dist/features/suggest-syntax.d.ts +4 -0
- package/dist/features/suggest-syntax.mjs +18 -0
- package/dist/index.cjs +29 -0
- package/dist/index.d.ts +7 -5
- package/dist/index.mjs +7 -0
- package/dist/settings.cjs +84 -0
- package/dist/settings.d.ts +19 -9
- package/dist/settings.mjs +82 -0
- package/dist/utils/beautify-css.cjs +13 -0
- package/dist/utils/beautify-css.d.ts +1 -0
- package/dist/utils/beautify-css.mjs +11 -0
- package/dist/utils/convert-color-space.cjs +40 -0
- package/dist/utils/convert-color-space.d.ts +2 -0
- package/dist/utils/convert-color-space.mjs +38 -0
- package/dist/utils/convert-color-token.cjs +28 -0
- package/dist/utils/convert-color-token.d.ts +3 -0
- package/dist/utils/convert-color-token.mjs +26 -0
- package/dist/utils/create-doc.cjs +26 -0
- package/dist/utils/create-doc.d.ts +16 -0
- package/dist/utils/create-doc.mjs +21 -0
- package/dist/utils/css-data-provider.cjs +9 -0
- package/dist/utils/css-data-provider.d.ts +3 -0
- package/dist/utils/css-data-provider.mjs +7 -0
- package/dist/utils/find-matching-brackets.cjs +29 -0
- package/dist/utils/find-matching-brackets.d.ts +1 -0
- package/dist/utils/find-matching-brackets.mjs +27 -0
- package/dist/utils/get-color-completion-items.cjs +29 -0
- package/dist/utils/get-color-completion-items.d.ts +3 -0
- package/dist/utils/get-color-completion-items.mjs +27 -0
- package/dist/utils/get-css-data-documentation.cjs +90 -0
- package/dist/utils/get-css-data-documentation.d.ts +5 -0
- package/dist/utils/get-css-data-documentation.mjs +88 -0
- package/dist/utils/get-main-completion-items.cjs +106 -0
- package/dist/utils/get-main-completion-items.d.ts +3 -0
- package/dist/utils/get-main-completion-items.mjs +104 -0
- package/dist/utils/get-position.cjs +12 -0
- package/dist/utils/get-position.d.ts +1 -0
- package/dist/utils/get-position.mjs +10 -0
- package/dist/utils/get-pseudo-class-completion-items.cjs +65 -0
- package/dist/utils/get-pseudo-class-completion-items.d.ts +3 -0
- package/dist/utils/get-pseudo-class-completion-items.mjs +63 -0
- package/dist/utils/get-pseudo-element-completion-items.cjs +56 -0
- package/dist/utils/get-pseudo-element-completion-items.d.ts +3 -0
- package/dist/utils/get-pseudo-element-completion-items.mjs +54 -0
- package/dist/utils/get-query-completion-items.cjs +102 -0
- package/dist/utils/get-query-completion-items.d.ts +3 -0
- package/dist/utils/get-query-completion-items.mjs +100 -0
- package/dist/utils/get-range.cjs +21 -0
- package/dist/utils/get-range.d.ts +2 -0
- package/dist/utils/get-range.mjs +19 -0
- package/dist/utils/get-utility-info.cjs +32 -0
- package/dist/utils/get-utility-info.d.ts +7 -0
- package/dist/utils/get-utility-info.mjs +30 -0
- package/dist/utils/get-value-completion-items.cjs +184 -0
- package/dist/utils/get-value-completion-items.d.ts +3 -0
- package/dist/utils/get-value-completion-items.mjs +182 -0
- package/dist/utils/query-syntax-completions.cjs +115 -0
- package/dist/utils/query-syntax-completions.d.ts +3 -0
- package/dist/utils/query-syntax-completions.mjs +113 -0
- package/dist/utils/regex.cjs +5 -0
- package/dist/utils/regex.mjs +3 -0
- package/dist/utils/sort-completion-items.cjs +11 -0
- package/dist/utils/sort-completion-items.d.ts +2 -0
- package/dist/utils/sort-completion-items.mjs +9 -0
- package/package.json +1 -1
- package/dist/constant.d.ts +0 -33
- package/dist/index.bundle.js +0 -33
- package/dist/position-check.d.ts +0 -20
- package/dist/providers/color.d.ts +0 -5
- package/dist/providers/completion.d.ts +0 -14
- package/dist/providers/hover.d.ts +0 -2
- package/dist/settings.bundle.js +0 -1
- package/dist/utils/get-css-entry-markdown-description.d.ts +0 -1
- package/dist/utils/hex-to-rgb.d.ts +0 -2
- package/dist/utils/oklab-to-rgb.d.ts +0 -1
- package/dist/utils/oklch-to-oklab.d.ts +0 -1
- package/dist/utils/to-two-digit-hex.d.ts +0 -1
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var beautifyCss = require('./beautify-css.cjs');
|
|
4
|
+
var css = require('@master/css');
|
|
5
|
+
|
|
6
|
+
function getCSSDataDocumentation(data, additional) {
|
|
7
|
+
const values = [];
|
|
8
|
+
const references = data?.references ? [
|
|
9
|
+
...data.references
|
|
10
|
+
] : [];
|
|
11
|
+
if (data?.status) {
|
|
12
|
+
values.push(getEntryStatus(data.status));
|
|
13
|
+
}
|
|
14
|
+
if (additional?.generatedCSS) {
|
|
15
|
+
values.push('```css\n' + beautifyCss(additional.generatedCSS).split('\n').slice(1).join('\n') + '\n```');
|
|
16
|
+
}
|
|
17
|
+
if (data?.description) if (typeof data.description === 'string') {
|
|
18
|
+
values.push(textToMarkedString(data.description));
|
|
19
|
+
} else {
|
|
20
|
+
values.push(data.description.kind === 'markdown' ? data.description.value : textToMarkedString(data.description.value));
|
|
21
|
+
}
|
|
22
|
+
const browserLabel = getBrowserLabel(data?.browsers);
|
|
23
|
+
if (browserLabel) {
|
|
24
|
+
values.push('(' + textToMarkedString(browserLabel) + ')');
|
|
25
|
+
}
|
|
26
|
+
if (data && 'syntax' in data && data.syntax) {
|
|
27
|
+
values.push(`Syntax: ${textToMarkedString(data.syntax)}`);
|
|
28
|
+
}
|
|
29
|
+
// todo: can i use
|
|
30
|
+
if (additional?.docs) {
|
|
31
|
+
references.unshift({
|
|
32
|
+
name: 'Master CSS',
|
|
33
|
+
url: new URL(additional.docs, css.OFFICIAL_URL).href
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
if (references.length) {
|
|
37
|
+
values.push(references.map((r)=>{
|
|
38
|
+
return `[${r.name}](${r.url})`;
|
|
39
|
+
}).join(' | '));
|
|
40
|
+
}
|
|
41
|
+
return values?.length ? {
|
|
42
|
+
kind: 'markdown',
|
|
43
|
+
value: values.join('\n\n')
|
|
44
|
+
} : undefined;
|
|
45
|
+
}
|
|
46
|
+
const browserNames = {
|
|
47
|
+
E: 'Edge',
|
|
48
|
+
FF: 'Firefox',
|
|
49
|
+
S: 'Safari',
|
|
50
|
+
C: 'Chrome',
|
|
51
|
+
IE: 'IE',
|
|
52
|
+
O: 'Opera'
|
|
53
|
+
};
|
|
54
|
+
function getEntryStatus(status) {
|
|
55
|
+
switch(status){
|
|
56
|
+
case 'experimental':
|
|
57
|
+
return '⚠️ Property is experimental. Be cautious when using it.️\n\n';
|
|
58
|
+
case 'nonstandard':
|
|
59
|
+
return '🚨️ Property is nonstandard. Avoid using it.\n\n';
|
|
60
|
+
case 'obsolete':
|
|
61
|
+
return '🚨️️️ Property is obsolete. Avoid using it.\n\n';
|
|
62
|
+
default:
|
|
63
|
+
return '';
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
function textToMarkedString(text) {
|
|
67
|
+
text = text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&') // escape markdown syntax tokens: http://daringfireball.net/projects/markdown/syntax#backslash
|
|
68
|
+
;
|
|
69
|
+
return text.replace(/</g, '<').replace(/>/g, '>');
|
|
70
|
+
}
|
|
71
|
+
function getBrowserLabel(browsers = []) {
|
|
72
|
+
if (browsers.length === 0) {
|
|
73
|
+
return null;
|
|
74
|
+
}
|
|
75
|
+
return browsers.map((b)=>{
|
|
76
|
+
let value = '';
|
|
77
|
+
const matches = b.match(/([A-Z]+)(\d+)?/) ?? '';
|
|
78
|
+
const name = matches[1];
|
|
79
|
+
const version = matches[2];
|
|
80
|
+
if (name in browserNames) {
|
|
81
|
+
value += browserNames[name];
|
|
82
|
+
}
|
|
83
|
+
if (version) {
|
|
84
|
+
value += ' ' + version;
|
|
85
|
+
}
|
|
86
|
+
return value;
|
|
87
|
+
}).join(', ');
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
exports.getCSSDataDocumentation = getCSSDataDocumentation;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { IPropertyData, IValueData, MarkupContent } from 'vscode-css-languageservice';
|
|
2
|
+
export declare function getCSSDataDocumentation(data?: IPropertyData | IValueData, additional?: {
|
|
3
|
+
generatedCSS?: string;
|
|
4
|
+
docs?: string | false;
|
|
5
|
+
}): MarkupContent | undefined;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import beautifyCSS from './beautify-css.mjs';
|
|
2
|
+
import { OFFICIAL_URL } from '@master/css';
|
|
3
|
+
|
|
4
|
+
function getCSSDataDocumentation(data, additional) {
|
|
5
|
+
const values = [];
|
|
6
|
+
const references = data?.references ? [
|
|
7
|
+
...data.references
|
|
8
|
+
] : [];
|
|
9
|
+
if (data?.status) {
|
|
10
|
+
values.push(getEntryStatus(data.status));
|
|
11
|
+
}
|
|
12
|
+
if (additional?.generatedCSS) {
|
|
13
|
+
values.push('```css\n' + beautifyCSS(additional.generatedCSS).split('\n').slice(1).join('\n') + '\n```');
|
|
14
|
+
}
|
|
15
|
+
if (data?.description) if (typeof data.description === 'string') {
|
|
16
|
+
values.push(textToMarkedString(data.description));
|
|
17
|
+
} else {
|
|
18
|
+
values.push(data.description.kind === 'markdown' ? data.description.value : textToMarkedString(data.description.value));
|
|
19
|
+
}
|
|
20
|
+
const browserLabel = getBrowserLabel(data?.browsers);
|
|
21
|
+
if (browserLabel) {
|
|
22
|
+
values.push('(' + textToMarkedString(browserLabel) + ')');
|
|
23
|
+
}
|
|
24
|
+
if (data && 'syntax' in data && data.syntax) {
|
|
25
|
+
values.push(`Syntax: ${textToMarkedString(data.syntax)}`);
|
|
26
|
+
}
|
|
27
|
+
// todo: can i use
|
|
28
|
+
if (additional?.docs) {
|
|
29
|
+
references.unshift({
|
|
30
|
+
name: 'Master CSS',
|
|
31
|
+
url: new URL(additional.docs, OFFICIAL_URL).href
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
if (references.length) {
|
|
35
|
+
values.push(references.map((r)=>{
|
|
36
|
+
return `[${r.name}](${r.url})`;
|
|
37
|
+
}).join(' | '));
|
|
38
|
+
}
|
|
39
|
+
return values?.length ? {
|
|
40
|
+
kind: 'markdown',
|
|
41
|
+
value: values.join('\n\n')
|
|
42
|
+
} : undefined;
|
|
43
|
+
}
|
|
44
|
+
const browserNames = {
|
|
45
|
+
E: 'Edge',
|
|
46
|
+
FF: 'Firefox',
|
|
47
|
+
S: 'Safari',
|
|
48
|
+
C: 'Chrome',
|
|
49
|
+
IE: 'IE',
|
|
50
|
+
O: 'Opera'
|
|
51
|
+
};
|
|
52
|
+
function getEntryStatus(status) {
|
|
53
|
+
switch(status){
|
|
54
|
+
case 'experimental':
|
|
55
|
+
return '⚠️ Property is experimental. Be cautious when using it.️\n\n';
|
|
56
|
+
case 'nonstandard':
|
|
57
|
+
return '🚨️ Property is nonstandard. Avoid using it.\n\n';
|
|
58
|
+
case 'obsolete':
|
|
59
|
+
return '🚨️️️ Property is obsolete. Avoid using it.\n\n';
|
|
60
|
+
default:
|
|
61
|
+
return '';
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
function textToMarkedString(text) {
|
|
65
|
+
text = text.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&') // escape markdown syntax tokens: http://daringfireball.net/projects/markdown/syntax#backslash
|
|
66
|
+
;
|
|
67
|
+
return text.replace(/</g, '<').replace(/>/g, '>');
|
|
68
|
+
}
|
|
69
|
+
function getBrowserLabel(browsers = []) {
|
|
70
|
+
if (browsers.length === 0) {
|
|
71
|
+
return null;
|
|
72
|
+
}
|
|
73
|
+
return browsers.map((b)=>{
|
|
74
|
+
let value = '';
|
|
75
|
+
const matches = b.match(/([A-Z]+)(\d+)?/) ?? '';
|
|
76
|
+
const name = matches[1];
|
|
77
|
+
const version = matches[2];
|
|
78
|
+
if (name in browserNames) {
|
|
79
|
+
value += browserNames[name];
|
|
80
|
+
}
|
|
81
|
+
if (version) {
|
|
82
|
+
value += ' ' + version;
|
|
83
|
+
}
|
|
84
|
+
return value;
|
|
85
|
+
}).join(', ');
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export { getCSSDataDocumentation };
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
|
|
4
|
+
var css = require('@master/css');
|
|
5
|
+
var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
|
|
6
|
+
var sortCompletionItems = require('./sort-completion-items.cjs');
|
|
7
|
+
var getUtilityInfo = require('./get-utility-info.cjs');
|
|
8
|
+
var cssDataProvider = require('./css-data-provider.cjs');
|
|
9
|
+
|
|
10
|
+
function getMainCompletionItems(css$1 = new css.MasterCSS()) {
|
|
11
|
+
const completionItems = [];
|
|
12
|
+
const addedKeys = new Set();
|
|
13
|
+
for (const eachDefinedRule of css$1.definedRules){
|
|
14
|
+
if (eachDefinedRule.definition.type === css.SyntaxRuleType.Utility) {
|
|
15
|
+
const { data, detail, docs } = getUtilityInfo(eachDefinedRule, css$1);
|
|
16
|
+
const utilityName = eachDefinedRule.id.slice(1);
|
|
17
|
+
completionItems.push({
|
|
18
|
+
label: utilityName,
|
|
19
|
+
kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
|
|
20
|
+
documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
|
|
21
|
+
generatedCSS: css.generateCSS([
|
|
22
|
+
utilityName
|
|
23
|
+
], css$1),
|
|
24
|
+
docs
|
|
25
|
+
}),
|
|
26
|
+
detail
|
|
27
|
+
});
|
|
28
|
+
} else {
|
|
29
|
+
const nativeProperties = cssDataProvider.provideProperties();
|
|
30
|
+
const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === eachDefinedRule.id);
|
|
31
|
+
const eachCompletionItem = {
|
|
32
|
+
kind: vscodeLanguageserverProtocol.CompletionItemKind.Property,
|
|
33
|
+
documentation: getCssDataDocumentation.getCSSDataDocumentation(nativeCSSPropertyData, {
|
|
34
|
+
docs: '/reference/' + css.isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
|
|
35
|
+
}),
|
|
36
|
+
detail: nativeCSSPropertyData?.syntax
|
|
37
|
+
};
|
|
38
|
+
eachDefinedRule.keys.forEach((key)=>{
|
|
39
|
+
addedKeys.delete(key);
|
|
40
|
+
completionItems.push({
|
|
41
|
+
...eachCompletionItem,
|
|
42
|
+
label: key + ':',
|
|
43
|
+
sortText: key,
|
|
44
|
+
command: {
|
|
45
|
+
title: 'triggerSuggest',
|
|
46
|
+
command: 'editor.action.triggerSuggest'
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
/**
|
|
51
|
+
* @example @ animation and ~ transition
|
|
52
|
+
*/ if (eachDefinedRule.definition?.sign && eachDefinedRule.definition.includeAnimations) {
|
|
53
|
+
css$1.animations.forEach((animation, animationName)=>{
|
|
54
|
+
completionItems.push({
|
|
55
|
+
...eachCompletionItem,
|
|
56
|
+
label: eachDefinedRule.definition.sign + animationName + '|1s',
|
|
57
|
+
kind: vscodeLanguageserverProtocol.CompletionItemKind.Value
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
if (eachDefinedRule.definition?.ambiguousKeys?.length) {
|
|
62
|
+
for (const ambiguousKey of eachDefinedRule.definition.ambiguousKeys){
|
|
63
|
+
if (addedKeys.has(ambiguousKey)) {
|
|
64
|
+
continue;
|
|
65
|
+
}
|
|
66
|
+
addedKeys.add(ambiguousKey);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
addedKeys.forEach((ambiguousKey)=>{
|
|
72
|
+
/**
|
|
73
|
+
* Ambiguous keys are added to the completion list
|
|
74
|
+
* @example text: t:
|
|
75
|
+
*/ completionItems.push({
|
|
76
|
+
kind: vscodeLanguageserverProtocol.CompletionItemKind.Property,
|
|
77
|
+
detail: 'ambiguous key',
|
|
78
|
+
label: ambiguousKey + ':',
|
|
79
|
+
sortText: ambiguousKey,
|
|
80
|
+
command: {
|
|
81
|
+
title: 'triggerSuggest',
|
|
82
|
+
command: 'editor.action.triggerSuggest'
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
if (css$1.config.components) {
|
|
87
|
+
for(const componentClass in css$1.config.components){
|
|
88
|
+
const componentTokens = css$1.components.get(componentClass);
|
|
89
|
+
if (!componentTokens) continue;
|
|
90
|
+
completionItems.push({
|
|
91
|
+
label: componentClass,
|
|
92
|
+
kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
|
|
93
|
+
documentation: getCssDataDocumentation.getCSSDataDocumentation({}, {
|
|
94
|
+
generatedCSS: css.generateCSS([
|
|
95
|
+
componentClass
|
|
96
|
+
], css$1),
|
|
97
|
+
docs: '/guide/components'
|
|
98
|
+
}),
|
|
99
|
+
detail: componentTokens.join(' ') + ' (style)'
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
return sortCompletionItems(completionItems);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
module.exports = getMainCompletionItems;
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { CompletionItemKind } from 'vscode-languageserver-protocol';
|
|
2
|
+
import { MasterCSS, SyntaxRuleType, generateCSS, isCoreRule } from '@master/css';
|
|
3
|
+
import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
|
|
4
|
+
import sortCompletionItems from './sort-completion-items.mjs';
|
|
5
|
+
import getUtilityInfo from './get-utility-info.mjs';
|
|
6
|
+
import cssDataProvider from './css-data-provider.mjs';
|
|
7
|
+
|
|
8
|
+
function getMainCompletionItems(css = new MasterCSS()) {
|
|
9
|
+
const completionItems = [];
|
|
10
|
+
const addedKeys = new Set();
|
|
11
|
+
for (const eachDefinedRule of css.definedRules){
|
|
12
|
+
if (eachDefinedRule.definition.type === SyntaxRuleType.Utility) {
|
|
13
|
+
const { data, detail, docs } = getUtilityInfo(eachDefinedRule, css);
|
|
14
|
+
const utilityName = eachDefinedRule.id.slice(1);
|
|
15
|
+
completionItems.push({
|
|
16
|
+
label: utilityName,
|
|
17
|
+
kind: CompletionItemKind.Value,
|
|
18
|
+
documentation: getCSSDataDocumentation(data, {
|
|
19
|
+
generatedCSS: generateCSS([
|
|
20
|
+
utilityName
|
|
21
|
+
], css),
|
|
22
|
+
docs
|
|
23
|
+
}),
|
|
24
|
+
detail
|
|
25
|
+
});
|
|
26
|
+
} else {
|
|
27
|
+
const nativeProperties = cssDataProvider.provideProperties();
|
|
28
|
+
const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === eachDefinedRule.id);
|
|
29
|
+
const eachCompletionItem = {
|
|
30
|
+
kind: CompletionItemKind.Property,
|
|
31
|
+
documentation: getCSSDataDocumentation(nativeCSSPropertyData, {
|
|
32
|
+
docs: '/reference/' + isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
|
|
33
|
+
}),
|
|
34
|
+
detail: nativeCSSPropertyData?.syntax
|
|
35
|
+
};
|
|
36
|
+
eachDefinedRule.keys.forEach((key)=>{
|
|
37
|
+
addedKeys.delete(key);
|
|
38
|
+
completionItems.push({
|
|
39
|
+
...eachCompletionItem,
|
|
40
|
+
label: key + ':',
|
|
41
|
+
sortText: key,
|
|
42
|
+
command: {
|
|
43
|
+
title: 'triggerSuggest',
|
|
44
|
+
command: 'editor.action.triggerSuggest'
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
/**
|
|
49
|
+
* @example @ animation and ~ transition
|
|
50
|
+
*/ if (eachDefinedRule.definition?.sign && eachDefinedRule.definition.includeAnimations) {
|
|
51
|
+
css.animations.forEach((animation, animationName)=>{
|
|
52
|
+
completionItems.push({
|
|
53
|
+
...eachCompletionItem,
|
|
54
|
+
label: eachDefinedRule.definition.sign + animationName + '|1s',
|
|
55
|
+
kind: CompletionItemKind.Value
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
if (eachDefinedRule.definition?.ambiguousKeys?.length) {
|
|
60
|
+
for (const ambiguousKey of eachDefinedRule.definition.ambiguousKeys){
|
|
61
|
+
if (addedKeys.has(ambiguousKey)) {
|
|
62
|
+
continue;
|
|
63
|
+
}
|
|
64
|
+
addedKeys.add(ambiguousKey);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
addedKeys.forEach((ambiguousKey)=>{
|
|
70
|
+
/**
|
|
71
|
+
* Ambiguous keys are added to the completion list
|
|
72
|
+
* @example text: t:
|
|
73
|
+
*/ completionItems.push({
|
|
74
|
+
kind: CompletionItemKind.Property,
|
|
75
|
+
detail: 'ambiguous key',
|
|
76
|
+
label: ambiguousKey + ':',
|
|
77
|
+
sortText: ambiguousKey,
|
|
78
|
+
command: {
|
|
79
|
+
title: 'triggerSuggest',
|
|
80
|
+
command: 'editor.action.triggerSuggest'
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
if (css.config.components) {
|
|
85
|
+
for(const componentClass in css.config.components){
|
|
86
|
+
const componentTokens = css.components.get(componentClass);
|
|
87
|
+
if (!componentTokens) continue;
|
|
88
|
+
completionItems.push({
|
|
89
|
+
label: componentClass,
|
|
90
|
+
kind: CompletionItemKind.Value,
|
|
91
|
+
documentation: getCSSDataDocumentation({}, {
|
|
92
|
+
generatedCSS: generateCSS([
|
|
93
|
+
componentClass
|
|
94
|
+
], css),
|
|
95
|
+
docs: '/guide/components'
|
|
96
|
+
}),
|
|
97
|
+
detail: componentTokens.join(' ') + ' (style)'
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
return sortCompletionItems(completionItems);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
export { getMainCompletionItems as default };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vscodeLanguageserverTextdocument = require('vscode-languageserver-textdocument');
|
|
4
|
+
|
|
5
|
+
function getPosition(searchString, text) {
|
|
6
|
+
const document = vscodeLanguageserverTextdocument.TextDocument.create('mockuri://test', 'plaintext', 1, text);
|
|
7
|
+
const offset = text.indexOf(searchString);
|
|
8
|
+
const position = document.positionAt(offset);
|
|
9
|
+
return position;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
module.exports = getPosition;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function getPosition(searchString: string, text: string): import("vscode-languageserver-textdocument").Position;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TextDocument } from 'vscode-languageserver-textdocument';
|
|
2
|
+
|
|
3
|
+
function getPosition(searchString, text) {
|
|
4
|
+
const document = TextDocument.create('mockuri://test', 'plaintext', 1, text);
|
|
5
|
+
const offset = text.indexOf(searchString);
|
|
6
|
+
const position = document.positionAt(offset);
|
|
7
|
+
return position;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export { getPosition as default };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css = require('@master/css');
|
|
4
|
+
var cssDataProvider = require('./css-data-provider.cjs');
|
|
5
|
+
var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
|
|
6
|
+
var sortCompletionItems = require('./sort-completion-items.cjs');
|
|
7
|
+
var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
|
|
8
|
+
|
|
9
|
+
const kind = vscodeLanguageserverProtocol.CompletionItemKind.Function;
|
|
10
|
+
function getPseudoClassCompletionItems(css$1 = new css.MasterCSS(), syntax) {
|
|
11
|
+
const pseudoClassDataList = cssDataProvider.providePseudoClasses().filter((data)=>{
|
|
12
|
+
// exclude @page pseudo-classes
|
|
13
|
+
if ([
|
|
14
|
+
':first',
|
|
15
|
+
':left',
|
|
16
|
+
':right',
|
|
17
|
+
':blank'
|
|
18
|
+
].includes(data.name)) return false;
|
|
19
|
+
return true;
|
|
20
|
+
});
|
|
21
|
+
const completionItems = pseudoClassDataList.map((data)=>{
|
|
22
|
+
// fix https://github.com/microsoft/vscode-custom-data/issues/78
|
|
23
|
+
const name = /:(?:dir|has|is|nth-col|where)/.test(data.name) ? data.name + '()' : data.name;
|
|
24
|
+
let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
|
|
25
|
+
if (sortText.endsWith('()')) sortText = 'y' + sortText;
|
|
26
|
+
return {
|
|
27
|
+
label: name,
|
|
28
|
+
sortText,
|
|
29
|
+
documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
|
|
30
|
+
generatedCSS: css.generateCSS([
|
|
31
|
+
syntax + name.slice(1)
|
|
32
|
+
], css$1),
|
|
33
|
+
docs: '/guide/syntax#selectors'
|
|
34
|
+
}),
|
|
35
|
+
kind,
|
|
36
|
+
data
|
|
37
|
+
};
|
|
38
|
+
});
|
|
39
|
+
for(const selectorName in css$1.config.selectors){
|
|
40
|
+
if (selectorName.startsWith('::')) continue;
|
|
41
|
+
const selectorValue = css$1.config.selectors[selectorName];
|
|
42
|
+
const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
|
|
43
|
+
const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
|
|
44
|
+
const data = pseudoClassDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
|
|
45
|
+
let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
|
|
46
|
+
if (sortText.endsWith('()')) sortText = 'y' + sortText;
|
|
47
|
+
const completionItem = {
|
|
48
|
+
label: name,
|
|
49
|
+
documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
|
|
50
|
+
generatedCSS: css.generateCSS([
|
|
51
|
+
syntax + name.slice(1)
|
|
52
|
+
], css$1),
|
|
53
|
+
docs: '/guide/syntax#selectors'
|
|
54
|
+
}),
|
|
55
|
+
sortText,
|
|
56
|
+
kind,
|
|
57
|
+
detail: String(value),
|
|
58
|
+
data
|
|
59
|
+
};
|
|
60
|
+
completionItems.push(completionItem);
|
|
61
|
+
}
|
|
62
|
+
return sortCompletionItems(completionItems);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
module.exports = getPseudoClassCompletionItems;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { MasterCSS, generateCSS } from '@master/css';
|
|
2
|
+
import cssDataProvider from './css-data-provider.mjs';
|
|
3
|
+
import { CompletionItemKind } from 'vscode-languageserver-protocol';
|
|
4
|
+
import sortCompletionItems from './sort-completion-items.mjs';
|
|
5
|
+
import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
|
|
6
|
+
|
|
7
|
+
const kind = CompletionItemKind.Function;
|
|
8
|
+
function getPseudoClassCompletionItems(css = new MasterCSS(), syntax) {
|
|
9
|
+
const pseudoClassDataList = cssDataProvider.providePseudoClasses().filter((data)=>{
|
|
10
|
+
// exclude @page pseudo-classes
|
|
11
|
+
if ([
|
|
12
|
+
':first',
|
|
13
|
+
':left',
|
|
14
|
+
':right',
|
|
15
|
+
':blank'
|
|
16
|
+
].includes(data.name)) return false;
|
|
17
|
+
return true;
|
|
18
|
+
});
|
|
19
|
+
const completionItems = pseudoClassDataList.map((data)=>{
|
|
20
|
+
// fix https://github.com/microsoft/vscode-custom-data/issues/78
|
|
21
|
+
const name = /:(?:dir|has|is|nth-col|where)/.test(data.name) ? data.name + '()' : data.name;
|
|
22
|
+
let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
|
|
23
|
+
if (sortText.endsWith('()')) sortText = 'y' + sortText;
|
|
24
|
+
return {
|
|
25
|
+
label: name,
|
|
26
|
+
sortText,
|
|
27
|
+
documentation: getCSSDataDocumentation(data, {
|
|
28
|
+
generatedCSS: generateCSS([
|
|
29
|
+
syntax + name.slice(1)
|
|
30
|
+
], css),
|
|
31
|
+
docs: '/guide/syntax#selectors'
|
|
32
|
+
}),
|
|
33
|
+
kind,
|
|
34
|
+
data
|
|
35
|
+
};
|
|
36
|
+
});
|
|
37
|
+
for(const selectorName in css.config.selectors){
|
|
38
|
+
if (selectorName.startsWith('::')) continue;
|
|
39
|
+
const selectorValue = css.config.selectors[selectorName];
|
|
40
|
+
const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
|
|
41
|
+
const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
|
|
42
|
+
const data = pseudoClassDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
|
|
43
|
+
let sortText = name.startsWith(':-') ? 'yyyy' + name.slice(2) : 'yy' + name.replace(/^:/, '');
|
|
44
|
+
if (sortText.endsWith('()')) sortText = 'y' + sortText;
|
|
45
|
+
const completionItem = {
|
|
46
|
+
label: name,
|
|
47
|
+
documentation: getCSSDataDocumentation(data, {
|
|
48
|
+
generatedCSS: generateCSS([
|
|
49
|
+
syntax + name.slice(1)
|
|
50
|
+
], css),
|
|
51
|
+
docs: '/guide/syntax#selectors'
|
|
52
|
+
}),
|
|
53
|
+
sortText,
|
|
54
|
+
kind,
|
|
55
|
+
detail: String(value),
|
|
56
|
+
data
|
|
57
|
+
};
|
|
58
|
+
completionItems.push(completionItem);
|
|
59
|
+
}
|
|
60
|
+
return sortCompletionItems(completionItems);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
export { getPseudoClassCompletionItems as default };
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css = require('@master/css');
|
|
4
|
+
var cssDataProvider = require('./css-data-provider.cjs');
|
|
5
|
+
var vscodeLanguageserverProtocol = require('vscode-languageserver-protocol');
|
|
6
|
+
var sortCompletionItems = require('./sort-completion-items.cjs');
|
|
7
|
+
var getCssDataDocumentation = require('./get-css-data-documentation.cjs');
|
|
8
|
+
|
|
9
|
+
const kind = vscodeLanguageserverProtocol.CompletionItemKind.Function;
|
|
10
|
+
function getPseudoElementCompletionItems(css$1 = new css.MasterCSS(), syntax) {
|
|
11
|
+
const pseudoElementDataList = cssDataProvider.providePseudoElements();
|
|
12
|
+
const completionItems = pseudoElementDataList.map((data)=>{
|
|
13
|
+
// fix https://github.com/microsoft/vscode-custom-data/issues/78
|
|
14
|
+
const name = /::(?:part|slotted)/.test(data.name) ? data.name + '()' : data.name;
|
|
15
|
+
let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
|
|
16
|
+
if (sortText.endsWith('()')) sortText = 'z' + sortText;
|
|
17
|
+
return {
|
|
18
|
+
label: name,
|
|
19
|
+
sortText,
|
|
20
|
+
documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
|
|
21
|
+
generatedCSS: css.generateCSS([
|
|
22
|
+
syntax + name.slice(2)
|
|
23
|
+
], css$1),
|
|
24
|
+
docs: '/guide/syntax#selectors'
|
|
25
|
+
}),
|
|
26
|
+
kind,
|
|
27
|
+
data
|
|
28
|
+
};
|
|
29
|
+
});
|
|
30
|
+
for(const selectorName in css$1.config.selectors){
|
|
31
|
+
if (!selectorName.startsWith('::')) continue;
|
|
32
|
+
const selectorValue = css$1.config.selectors[selectorName];
|
|
33
|
+
const name = selectorName.endsWith('(') ? selectorName + ')' : selectorName;
|
|
34
|
+
const value = typeof selectorValue === 'string' ? selectorValue.endsWith('(') ? selectorValue + ')' : selectorValue : selectorValue;
|
|
35
|
+
const data = pseudoElementDataList.find((data)=>typeof value === 'string' ? value.startsWith(data.name) : false);
|
|
36
|
+
let sortText = name.startsWith('::-') ? 'zzzz' + name.slice(3) : 'zz' + name.replace(/^::/, '');
|
|
37
|
+
if (sortText.endsWith('()')) sortText = 'z' + sortText;
|
|
38
|
+
const completionItem = {
|
|
39
|
+
label: name,
|
|
40
|
+
documentation: getCssDataDocumentation.getCSSDataDocumentation(data, {
|
|
41
|
+
generatedCSS: css.generateCSS([
|
|
42
|
+
syntax + name.slice(2)
|
|
43
|
+
], css$1),
|
|
44
|
+
docs: '/guide/syntax#selectors'
|
|
45
|
+
}),
|
|
46
|
+
sortText,
|
|
47
|
+
kind,
|
|
48
|
+
detail: String(value),
|
|
49
|
+
data
|
|
50
|
+
};
|
|
51
|
+
completionItems.push(completionItem);
|
|
52
|
+
}
|
|
53
|
+
return sortCompletionItems(completionItems);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
module.exports = getPseudoElementCompletionItems;
|