@master/css-language-service 2.0.0-rc.47 → 2.0.0-rc.48

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.
@@ -13,19 +13,19 @@ function inspectSyntax(document, position) {
13
13
  start: document.positionAt(classPosition.range.start),
14
14
  end: document.positionAt(classPosition.range.end)
15
15
  };
16
- const styleClasses = this.css.styles[token];
17
- if (styleClasses) {
16
+ const componentClasses = this.css.components[token];
17
+ if (componentClasses) {
18
18
  const documentation = getCssDataDocumentation.getCSSDataDocumentation({}, {
19
19
  generatedCSS: css.generateCSS([
20
20
  token
21
21
  ], this.css),
22
- docs: '/guide/styles'
22
+ docs: '/guide/components'
23
23
  });
24
24
  if (documentation) {
25
25
  return {
26
26
  contents: {
27
27
  kind: documentation.kind,
28
- value: `(style) ` + styleClasses.join(' ') + '\n' + documentation.value
28
+ value: `(style) ` + componentClasses.join(' ') + '\n' + documentation.value
29
29
  }
30
30
  };
31
31
  }
@@ -33,8 +33,8 @@ function inspectSyntax(document, position) {
33
33
  const rules = this.css.generate(token);
34
34
  const rule = rules[0];
35
35
  if (rule) {
36
- if (rule.layer === css.Layer.Utility) {
37
- const { data, docs } = getUtilityInfo(rule.RegisteredRule, this.css);
36
+ if (rule.type === css.SyntaxRuleType.Utility) {
37
+ const { data, docs } = getUtilityInfo(rule.registeredSyntax, this.css);
38
38
  const documentation = getCssDataDocumentation.getCSSDataDocumentation(data, {
39
39
  generatedCSS: css.generateCSS([
40
40
  token
@@ -1,5 +1,5 @@
1
1
  import { getCSSDataDocumentation } from '../utils/get-css-data-documentation.mjs';
2
- import { generateCSS, Layer, isCoreRule } from '@master/css';
2
+ import { generateCSS, SyntaxRuleType, isCoreRule } from '@master/css';
3
3
  import cssDataProvider from '../utils/css-data-provider.mjs';
4
4
  import getUtilityInfo from '../utils/get-utility-info.mjs';
5
5
 
@@ -11,19 +11,19 @@ function inspectSyntax(document, position) {
11
11
  start: document.positionAt(classPosition.range.start),
12
12
  end: document.positionAt(classPosition.range.end)
13
13
  };
14
- const styleClasses = this.css.styles[token];
15
- if (styleClasses) {
14
+ const componentClasses = this.css.components[token];
15
+ if (componentClasses) {
16
16
  const documentation = getCSSDataDocumentation({}, {
17
17
  generatedCSS: generateCSS([
18
18
  token
19
19
  ], this.css),
20
- docs: '/guide/styles'
20
+ docs: '/guide/components'
21
21
  });
22
22
  if (documentation) {
23
23
  return {
24
24
  contents: {
25
25
  kind: documentation.kind,
26
- value: `(style) ` + styleClasses.join(' ') + '\n' + documentation.value
26
+ value: `(style) ` + componentClasses.join(' ') + '\n' + documentation.value
27
27
  }
28
28
  };
29
29
  }
@@ -31,8 +31,8 @@ function inspectSyntax(document, position) {
31
31
  const rules = this.css.generate(token);
32
32
  const rule = rules[0];
33
33
  if (rule) {
34
- if (rule.layer === Layer.Utility) {
35
- const { data, docs } = getUtilityInfo(rule.RegisteredRule, this.css);
34
+ if (rule.type === SyntaxRuleType.Utility) {
35
+ const { data, docs } = getUtilityInfo(rule.registeredSyntax, this.css);
36
36
  const documentation = getCSSDataDocumentation(data, {
37
37
  generatedCSS: generateCSS([
38
38
  token
@@ -12,7 +12,7 @@ async function renderSyntaxColors(document) {
12
12
  const instanceStartIndex = instanceMatch.index;
13
13
  const syntax = instanceMatch[0];
14
14
  const rule = this.css.generate(syntax)[0];
15
- if (rule && rule.layer !== css.Layer.Utility) {
15
+ if (rule && rule.type !== css.SyntaxRuleType.Utility) {
16
16
  const keyTokenLength = rule.keyToken?.length ?? 0;
17
17
  let currentLength = 0;
18
18
  const resolveValueComponent = (valueComponent)=>{
@@ -1,6 +1,6 @@
1
1
  import { instancePattern } from '../utils/regex.mjs';
2
2
  import { parse, converter } from 'culori';
3
- import { Layer } from '@master/css';
3
+ import { SyntaxRuleType } from '@master/css';
4
4
 
5
5
  async function renderSyntaxColors(document) {
6
6
  const text = document.getText() ?? '';
@@ -10,7 +10,7 @@ async function renderSyntaxColors(document) {
10
10
  const instanceStartIndex = instanceMatch.index;
11
11
  const syntax = instanceMatch[0];
12
12
  const rule = this.css.generate(syntax)[0];
13
- if (rule && rule.layer !== Layer.Utility) {
13
+ if (rule && rule.type !== SyntaxRuleType.Utility) {
14
14
  const keyTokenLength = rule.keyToken?.length ?? 0;
15
15
  let currentLength = 0;
16
16
  const resolveValueComponent = (valueComponent)=>{
package/dist/settings.cjs CHANGED
@@ -62,8 +62,8 @@ var css = require('@master/css');
62
62
  ]
63
63
  },
64
64
  /**
65
- * @example const styles = 'a b'
66
- * @example { styles: { btn: 'a b' } }
65
+ * @example const components = 'a b'
66
+ * @example { components: { btn: 'a b' } }
67
67
  */ classDeclarations: css.CLASS_DECLARATIONS,
68
68
  /**
69
69
  * @example clsx('a b')
package/dist/settings.mjs CHANGED
@@ -60,8 +60,8 @@ import { CLASS_ATTRIBUTES, CLASS_DECLARATIONS, CLASS_FUNCTIONS } from '@master/c
60
60
  ]
61
61
  },
62
62
  /**
63
- * @example const styles = 'a b'
64
- * @example { styles: { btn: 'a b' } }
63
+ * @example const components = 'a b'
64
+ * @example { components: { btn: 'a b' } }
65
65
  */ classDeclarations: CLASS_DECLARATIONS,
66
66
  /**
67
67
  * @example clsx('a b')
@@ -12,7 +12,7 @@ function getCSSDataDocumentation(data, additional) {
12
12
  values.push(getEntryStatus(data.status));
13
13
  }
14
14
  if (additional?.generatedCSS) {
15
- values.push('```css\n' + beautifyCss(additional.generatedCSS) + '\n```');
15
+ values.push('```css\n' + beautifyCss(additional.generatedCSS).split('\n').slice(1).join('\n') + '\n```');
16
16
  }
17
17
  if (data?.description) if (typeof data.description === 'string') {
18
18
  values.push(textToMarkedString(data.description));
@@ -10,7 +10,7 @@ function getCSSDataDocumentation(data, additional) {
10
10
  values.push(getEntryStatus(data.status));
11
11
  }
12
12
  if (additional?.generatedCSS) {
13
- values.push('```css\n' + beautifyCSS(additional.generatedCSS) + '\n```');
13
+ values.push('```css\n' + beautifyCSS(additional.generatedCSS).split('\n').slice(1).join('\n') + '\n```');
14
14
  }
15
15
  if (data?.description) if (typeof data.description === 'string') {
16
16
  values.push(textToMarkedString(data.description));
@@ -10,10 +10,10 @@ var cssDataProvider = require('./css-data-provider.cjs');
10
10
  function getMainCompletionItems(css$1 = new css.MasterCSS()) {
11
11
  const completionItems = [];
12
12
  const addedKeys = new Set();
13
- for (const EachRule of css$1.Rules){
14
- if (EachRule.definition.layer === css.Layer.Utility) {
15
- const { data, detail, docs } = getUtilityInfo(EachRule, css$1);
16
- const utilityName = EachRule.id.slice(1);
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
17
  completionItems.push({
18
18
  label: utilityName,
19
19
  kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
@@ -27,15 +27,15 @@ function getMainCompletionItems(css$1 = new css.MasterCSS()) {
27
27
  });
28
28
  } else {
29
29
  const nativeProperties = cssDataProvider.provideProperties();
30
- const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === EachRule.id);
30
+ const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === eachDefinedRule.id);
31
31
  const eachCompletionItem = {
32
32
  kind: vscodeLanguageserverProtocol.CompletionItemKind.Property,
33
33
  documentation: getCssDataDocumentation.getCSSDataDocumentation(nativeCSSPropertyData, {
34
- docs: '/reference/' + css.isCoreRule(EachRule.id) && EachRule.id
34
+ docs: '/reference/' + css.isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
35
35
  }),
36
36
  detail: nativeCSSPropertyData?.syntax
37
37
  };
38
- EachRule.keys.forEach((key)=>{
38
+ eachDefinedRule.keys.forEach((key)=>{
39
39
  addedKeys.delete(key);
40
40
  completionItems.push({
41
41
  ...eachCompletionItem,
@@ -49,17 +49,17 @@ function getMainCompletionItems(css$1 = new css.MasterCSS()) {
49
49
  });
50
50
  /**
51
51
  * @example @ animation and ~ transition
52
- */ if (EachRule.definition?.sign && EachRule.definition.includeAnimations) {
52
+ */ if (eachDefinedRule.definition?.sign && eachDefinedRule.definition.includeAnimations) {
53
53
  for(const animationName in css$1.animations){
54
54
  completionItems.push({
55
55
  ...eachCompletionItem,
56
- label: EachRule.definition.sign + animationName + '|1s',
56
+ label: eachDefinedRule.definition.sign + animationName + '|1s',
57
57
  kind: vscodeLanguageserverProtocol.CompletionItemKind.Value
58
58
  });
59
59
  }
60
60
  }
61
- if (EachRule.definition?.ambiguousKeys?.length) {
62
- for (const ambiguousKey of EachRule.definition.ambiguousKeys){
61
+ if (eachDefinedRule.definition?.ambiguousKeys?.length) {
62
+ for (const ambiguousKey of eachDefinedRule.definition.ambiguousKeys){
63
63
  if (addedKeys.has(ambiguousKey)) {
64
64
  continue;
65
65
  }
@@ -83,9 +83,9 @@ function getMainCompletionItems(css$1 = new css.MasterCSS()) {
83
83
  }
84
84
  });
85
85
  });
86
- if (css$1.config.styles) {
87
- for(const styleName in css$1.config.styles){
88
- const styleClasses = css$1.styles[styleName];
86
+ if (css$1.config.components) {
87
+ for(const styleName in css$1.config.components){
88
+ const styleClasses = css$1.components[styleName];
89
89
  completionItems.push({
90
90
  label: styleName,
91
91
  kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
@@ -93,7 +93,7 @@ function getMainCompletionItems(css$1 = new css.MasterCSS()) {
93
93
  generatedCSS: css.generateCSS([
94
94
  styleName
95
95
  ], css$1),
96
- docs: '/guide/styles'
96
+ docs: '/guide/components'
97
97
  }),
98
98
  detail: styleClasses.join(' ') + ' (style)'
99
99
  });
@@ -1,5 +1,5 @@
1
1
  import { CompletionItemKind } from 'vscode-languageserver-protocol';
2
- import { Layer, generateCSS, isCoreRule, MasterCSS } from '@master/css';
2
+ import { SyntaxRuleType, generateCSS, isCoreRule, MasterCSS } from '@master/css';
3
3
  import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
4
4
  import sortCompletionItems from './sort-completion-items.mjs';
5
5
  import getUtilityInfo from './get-utility-info.mjs';
@@ -8,10 +8,10 @@ import cssDataProvider from './css-data-provider.mjs';
8
8
  function getMainCompletionItems(css = new MasterCSS()) {
9
9
  const completionItems = [];
10
10
  const addedKeys = new Set();
11
- for (const EachRule of css.Rules){
12
- if (EachRule.definition.layer === Layer.Utility) {
13
- const { data, detail, docs } = getUtilityInfo(EachRule, css);
14
- const utilityName = EachRule.id.slice(1);
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
15
  completionItems.push({
16
16
  label: utilityName,
17
17
  kind: CompletionItemKind.Value,
@@ -25,15 +25,15 @@ function getMainCompletionItems(css = new MasterCSS()) {
25
25
  });
26
26
  } else {
27
27
  const nativeProperties = cssDataProvider.provideProperties();
28
- const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === EachRule.id);
28
+ const nativeCSSPropertyData = nativeProperties.find(({ name })=>name === eachDefinedRule.id);
29
29
  const eachCompletionItem = {
30
30
  kind: CompletionItemKind.Property,
31
31
  documentation: getCSSDataDocumentation(nativeCSSPropertyData, {
32
- docs: '/reference/' + isCoreRule(EachRule.id) && EachRule.id
32
+ docs: '/reference/' + isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
33
33
  }),
34
34
  detail: nativeCSSPropertyData?.syntax
35
35
  };
36
- EachRule.keys.forEach((key)=>{
36
+ eachDefinedRule.keys.forEach((key)=>{
37
37
  addedKeys.delete(key);
38
38
  completionItems.push({
39
39
  ...eachCompletionItem,
@@ -47,17 +47,17 @@ function getMainCompletionItems(css = new MasterCSS()) {
47
47
  });
48
48
  /**
49
49
  * @example @ animation and ~ transition
50
- */ if (EachRule.definition?.sign && EachRule.definition.includeAnimations) {
50
+ */ if (eachDefinedRule.definition?.sign && eachDefinedRule.definition.includeAnimations) {
51
51
  for(const animationName in css.animations){
52
52
  completionItems.push({
53
53
  ...eachCompletionItem,
54
- label: EachRule.definition.sign + animationName + '|1s',
54
+ label: eachDefinedRule.definition.sign + animationName + '|1s',
55
55
  kind: CompletionItemKind.Value
56
56
  });
57
57
  }
58
58
  }
59
- if (EachRule.definition?.ambiguousKeys?.length) {
60
- for (const ambiguousKey of EachRule.definition.ambiguousKeys){
59
+ if (eachDefinedRule.definition?.ambiguousKeys?.length) {
60
+ for (const ambiguousKey of eachDefinedRule.definition.ambiguousKeys){
61
61
  if (addedKeys.has(ambiguousKey)) {
62
62
  continue;
63
63
  }
@@ -81,9 +81,9 @@ function getMainCompletionItems(css = new MasterCSS()) {
81
81
  }
82
82
  });
83
83
  });
84
- if (css.config.styles) {
85
- for(const styleName in css.config.styles){
86
- const styleClasses = css.styles[styleName];
84
+ if (css.config.components) {
85
+ for(const styleName in css.config.components){
86
+ const styleClasses = css.components[styleName];
87
87
  completionItems.push({
88
88
  label: styleName,
89
89
  kind: CompletionItemKind.Value,
@@ -91,7 +91,7 @@ function getMainCompletionItems(css = new MasterCSS()) {
91
91
  generatedCSS: generateCSS([
92
92
  styleName
93
93
  ], css),
94
- docs: '/guide/styles'
94
+ docs: '/guide/components'
95
95
  }),
96
96
  detail: styleClasses.join(' ') + ' (style)'
97
97
  });
@@ -30,7 +30,7 @@ function getPseudoClassCompletionItems(css$1 = new css.MasterCSS(), syntax) {
30
30
  generatedCSS: css.generateCSS([
31
31
  syntax + name.slice(1)
32
32
  ], css$1),
33
- docs: '/reference/syntaxes#selectors'
33
+ docs: '/guide/syntax#selectors'
34
34
  }),
35
35
  kind,
36
36
  data
@@ -50,7 +50,7 @@ function getPseudoClassCompletionItems(css$1 = new css.MasterCSS(), syntax) {
50
50
  generatedCSS: css.generateCSS([
51
51
  syntax + name.slice(1)
52
52
  ], css$1),
53
- docs: '/reference/syntaxes#selectors'
53
+ docs: '/guide/syntax#selectors'
54
54
  }),
55
55
  sortText,
56
56
  kind,
@@ -28,7 +28,7 @@ function getPseudoClassCompletionItems(css = new MasterCSS(), syntax) {
28
28
  generatedCSS: generateCSS([
29
29
  syntax + name.slice(1)
30
30
  ], css),
31
- docs: '/reference/syntaxes#selectors'
31
+ docs: '/guide/syntax#selectors'
32
32
  }),
33
33
  kind,
34
34
  data
@@ -48,7 +48,7 @@ function getPseudoClassCompletionItems(css = new MasterCSS(), syntax) {
48
48
  generatedCSS: generateCSS([
49
49
  syntax + name.slice(1)
50
50
  ], css),
51
- docs: '/reference/syntaxes#selectors'
51
+ docs: '/guide/syntax#selectors'
52
52
  }),
53
53
  sortText,
54
54
  kind,
@@ -21,7 +21,7 @@ function getPseudoElementCompletionItems(css$1 = new css.MasterCSS(), syntax) {
21
21
  generatedCSS: css.generateCSS([
22
22
  syntax + name.slice(2)
23
23
  ], css$1),
24
- docs: '/reference/syntaxes#selectors'
24
+ docs: '/guide/syntax#selectors'
25
25
  }),
26
26
  kind,
27
27
  data
@@ -41,7 +41,7 @@ function getPseudoElementCompletionItems(css$1 = new css.MasterCSS(), syntax) {
41
41
  generatedCSS: css.generateCSS([
42
42
  syntax + name.slice(2)
43
43
  ], css$1),
44
- docs: '/reference/syntaxes#selectors'
44
+ docs: '/guide/syntax#selectors'
45
45
  }),
46
46
  sortText,
47
47
  kind,
@@ -19,7 +19,7 @@ function getPseudoElementCompletionItems(css = new MasterCSS(), syntax) {
19
19
  generatedCSS: generateCSS([
20
20
  syntax + name.slice(2)
21
21
  ], css),
22
- docs: '/reference/syntaxes#selectors'
22
+ docs: '/guide/syntax#selectors'
23
23
  }),
24
24
  kind,
25
25
  data
@@ -39,7 +39,7 @@ function getPseudoElementCompletionItems(css = new MasterCSS(), syntax) {
39
39
  generatedCSS: generateCSS([
40
40
  syntax + name.slice(2)
41
41
  ], css),
42
- docs: '/reference/syntaxes#selectors'
42
+ docs: '/guide/syntax#selectors'
43
43
  }),
44
44
  sortText,
45
45
  kind,
@@ -19,7 +19,7 @@ function getQueryCompletionItems(css$1 = new css.MasterCSS(), triggerCharacter =
19
19
  generatedCSS: css.generateCSS([
20
20
  syntax + 'media()'
21
21
  ], css$1),
22
- docs: '/reference/syntaxes#at-rules'
22
+ docs: '/guide/syntax#at-rules'
23
23
  })
24
24
  }, {
25
25
  label: triggerCharacter + 'supports()',
@@ -30,7 +30,7 @@ function getQueryCompletionItems(css$1 = new css.MasterCSS(), triggerCharacter =
30
30
  generatedCSS: css.generateCSS([
31
31
  syntax + 'supports()'
32
32
  ], css$1),
33
- docs: '/reference/syntaxes#at-rules'
33
+ docs: '/guide/syntax#at-rules'
34
34
  })
35
35
  });
36
36
  }
@@ -42,7 +42,7 @@ function getQueryCompletionItems(css$1 = new css.MasterCSS(), triggerCharacter =
42
42
  generatedCSS: css.generateCSS([
43
43
  syntax + name
44
44
  ], css$1),
45
- docs: '/reference/syntaxes#at-rules'
45
+ docs: '/guide/syntax#at-rules'
46
46
  })
47
47
  };
48
48
  if ([
@@ -60,7 +60,7 @@ function getQueryCompletionItems(css$1 = new css.MasterCSS(), triggerCharacter =
60
60
  generatedCSS: css.generateCSS([
61
61
  syntax + name
62
62
  ], css$1),
63
- docs: '/reference/syntaxes#at-rules'
63
+ docs: '/guide/syntax#at-rules'
64
64
  }),
65
65
  detail: `screen width ${'>='} ${value}px`,
66
66
  kind: vscodeLanguageserverProtocol.CompletionItemKind.Keyword
@@ -88,7 +88,7 @@ function getQueryCompletionItems(css$1 = new css.MasterCSS(), triggerCharacter =
88
88
  generatedCSS: css.generateCSS([
89
89
  syntax + name
90
90
  ], css$1),
91
- docs: '/reference/syntaxes#at-rules'
91
+ docs: '/guide/syntax#at-rules'
92
92
  }),
93
93
  detail: `screen width ${comparisonCharacter} ${value}px`,
94
94
  kind: vscodeLanguageserverProtocol.CompletionItemKind.Keyword
@@ -17,7 +17,7 @@ function getQueryCompletionItems(css = new MasterCSS(), triggerCharacter = AT_SI
17
17
  generatedCSS: generateCSS([
18
18
  syntax + 'media()'
19
19
  ], css),
20
- docs: '/reference/syntaxes#at-rules'
20
+ docs: '/guide/syntax#at-rules'
21
21
  })
22
22
  }, {
23
23
  label: triggerCharacter + 'supports()',
@@ -28,7 +28,7 @@ function getQueryCompletionItems(css = new MasterCSS(), triggerCharacter = AT_SI
28
28
  generatedCSS: generateCSS([
29
29
  syntax + 'supports()'
30
30
  ], css),
31
- docs: '/reference/syntaxes#at-rules'
31
+ docs: '/guide/syntax#at-rules'
32
32
  })
33
33
  });
34
34
  }
@@ -40,7 +40,7 @@ function getQueryCompletionItems(css = new MasterCSS(), triggerCharacter = AT_SI
40
40
  generatedCSS: generateCSS([
41
41
  syntax + name
42
42
  ], css),
43
- docs: '/reference/syntaxes#at-rules'
43
+ docs: '/guide/syntax#at-rules'
44
44
  })
45
45
  };
46
46
  if ([
@@ -58,7 +58,7 @@ function getQueryCompletionItems(css = new MasterCSS(), triggerCharacter = AT_SI
58
58
  generatedCSS: generateCSS([
59
59
  syntax + name
60
60
  ], css),
61
- docs: '/reference/syntaxes#at-rules'
61
+ docs: '/guide/syntax#at-rules'
62
62
  }),
63
63
  detail: `screen width ${'>='} ${value}px`,
64
64
  kind: CompletionItemKind.Keyword
@@ -86,7 +86,7 @@ function getQueryCompletionItems(css = new MasterCSS(), triggerCharacter = AT_SI
86
86
  generatedCSS: generateCSS([
87
87
  syntax + name
88
88
  ], css),
89
- docs: '/reference/syntaxes#at-rules'
89
+ docs: '/guide/syntax#at-rules'
90
90
  }),
91
91
  detail: `screen width ${comparisonCharacter} ${value}px`,
92
92
  kind: CompletionItemKind.Keyword
@@ -2,9 +2,9 @@
2
2
 
3
3
  var cssDataProvider = require('./css-data-provider.cjs');
4
4
 
5
- function getUtilityInfo(EachRule, css = new MasterCSS()) {
5
+ function getUtilityInfo(syntax, css = new MasterCSS()) {
6
6
  const nativeProperties = cssDataProvider.provideProperties();
7
- const declarations = EachRule.definition.declarations;
7
+ const declarations = syntax.definition.declarations;
8
8
  const propsLength = Object.keys(declarations || {}).length;
9
9
  const propName = Object.keys(declarations || {})[0];
10
10
  const propValue = declarations?.[propName];
@@ -1,6 +1,6 @@
1
- import { RegisteredRule } from '@master/css';
1
+ import { DefinedRule } from '@master/css';
2
2
  import type { IPropertyData } from 'vscode-css-languageservice';
3
- export default function getUtilityInfo(EachRule: RegisteredRule, css?: import("@master/css").MasterCSS): {
3
+ export default function getUtilityInfo(syntax: DefinedRule, css?: import("@master/css").MasterCSS): {
4
4
  docs: string;
5
5
  data: IPropertyData | undefined;
6
6
  detail: string | undefined;
@@ -1,8 +1,8 @@
1
1
  import cssDataProvider from './css-data-provider.mjs';
2
2
 
3
- function getUtilityInfo(EachRule, css = new MasterCSS()) {
3
+ function getUtilityInfo(syntax, css = new MasterCSS()) {
4
4
  const nativeProperties = cssDataProvider.provideProperties();
5
- const declarations = EachRule.definition.declarations;
5
+ const declarations = syntax.definition.declarations;
6
6
  const propsLength = Object.keys(declarations || {}).length;
7
7
  const propName = Object.keys(declarations || {})[0];
8
8
  const propValue = declarations?.[propName];
@@ -13,7 +13,7 @@ const GLOBAL_VARIABLE_PRIORITY = 'zzzz';
13
13
  function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
14
14
  const nativeProperties = cssDataProvider.provideProperties();
15
15
  const completionItems = [];
16
- const nativeKey = css$1.Rules.find(({ keys })=>keys.includes(ruleKey))?.id;
16
+ const nativeKey = css$1.definedRules.find(({ keys })=>keys.includes(ruleKey))?.id;
17
17
  const nativePropertyData = nativeProperties.find(({ name })=>name === nativeKey);
18
18
  const generateVariableCompletionItem = (variable, { scoped } = {
19
19
  scoped: false
@@ -74,14 +74,14 @@ function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
74
74
  }
75
75
  return completionItem;
76
76
  };
77
- for (const EachRule of css$1.Rules){
77
+ for (const eachDefinedRule of css$1.definedRules){
78
78
  /**
79
79
  * Scoped variables
80
80
  * @example box: + content -> box-sizing:content
81
- */ if (EachRule.definition.key === ruleKey || EachRule.definition.subkey === ruleKey || EachRule.definition.ambiguousKeys?.includes(ruleKey)) {
82
- for(const variableName in EachRule.variables){
81
+ */ if (eachDefinedRule.definition.key === ruleKey || eachDefinedRule.definition.subkey === ruleKey || eachDefinedRule.definition.ambiguousKeys?.includes(ruleKey)) {
82
+ for(const variableName in eachDefinedRule.variables){
83
83
  if (completionItems.find(({ label })=>label === variableName)) continue;
84
- const variable = EachRule.variables[variableName];
84
+ const variable = eachDefinedRule.variables[variableName];
85
85
  const completionItem = generateVariableCompletionItem(variable, {
86
86
  scoped: true
87
87
  });
@@ -95,12 +95,12 @@ function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
95
95
  }
96
96
  /**
97
97
  * @example animation:fade
98
- */ if (EachRule.keys.includes(ruleKey) && EachRule.definition.includeAnimations) {
98
+ */ if (eachDefinedRule.keys.includes(ruleKey) && eachDefinedRule.definition.includeAnimations) {
99
99
  for(const animationName in css$1.animations){
100
- const isNative = EachRule.definition.layer && [
101
- css.Layer.Native,
102
- css.Layer.NativeShorthand
103
- ].includes(EachRule.definition.layer);
100
+ const isNative = eachDefinedRule.definition.type && [
101
+ css.SyntaxRuleType.Native,
102
+ css.SyntaxRuleType.NativeShorthand
103
+ ].includes(eachDefinedRule.definition.type);
104
104
  completionItems.push({
105
105
  label: animationName,
106
106
  kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
@@ -108,9 +108,9 @@ function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
108
108
  generatedCSS: css.generateCSS([
109
109
  ruleKey + ':' + animationName
110
110
  ], css$1),
111
- docs: '/reference/' + css.isCoreRule(EachRule.id) && EachRule.id
111
+ docs: '/reference/' + css.isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
112
112
  }),
113
- detail: isNative ? EachRule.id + ': ' + animationName : animationName
113
+ detail: isNative ? eachDefinedRule.id + ': ' + animationName : animationName
114
114
  });
115
115
  }
116
116
  }
@@ -118,15 +118,15 @@ function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
118
118
  * Ambiguous values
119
119
  * @example text: -> center, left, right, justify
120
120
  * @example t: -> center, left, right, justify
121
- */ if (EachRule.definition.ambiguousKeys?.includes(ruleKey) && EachRule.definition.ambiguousValues?.length) {
122
- const nativePropertyData = nativeProperties.find((x)=>x.name === EachRule.id);
123
- for (const ambiguousValue of EachRule.definition.ambiguousValues){
121
+ */ if (eachDefinedRule.definition.ambiguousKeys?.includes(ruleKey) && eachDefinedRule.definition.ambiguousValues?.length) {
122
+ const nativePropertyData = nativeProperties.find((x)=>x.name === eachDefinedRule.id);
123
+ for (const ambiguousValue of eachDefinedRule.definition.ambiguousValues){
124
124
  if (typeof ambiguousValue !== 'string') continue;
125
125
  const nativeValueData = nativePropertyData?.values?.find((x)=>x.name === ambiguousValue);
126
- const isNative = EachRule.definition.layer && [
127
- css.Layer.Native,
128
- css.Layer.NativeShorthand
129
- ].includes(EachRule.definition.layer);
126
+ const isNative = eachDefinedRule.definition.type && [
127
+ css.SyntaxRuleType.Native,
128
+ css.SyntaxRuleType.NativeShorthand
129
+ ].includes(eachDefinedRule.definition.type);
130
130
  completionItems.push({
131
131
  label: ambiguousValue,
132
132
  kind: vscodeLanguageserverProtocol.CompletionItemKind.Value,
@@ -139,9 +139,9 @@ function getValueCompletionItems(css$1 = new css.MasterCSS(), ruleKey) {
139
139
  generatedCSS: css.generateCSS([
140
140
  ruleKey + ':' + ambiguousValue
141
141
  ], css$1),
142
- docs: '/reference/' + css.isCoreRule(EachRule.id) && EachRule.id
142
+ docs: '/reference/' + css.isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
143
143
  }),
144
- detail: isNative ? EachRule.id + ': ' + ambiguousValue : ambiguousValue
144
+ detail: isNative ? eachDefinedRule.id + ': ' + ambiguousValue : ambiguousValue
145
145
  });
146
146
  }
147
147
  }
@@ -1,6 +1,6 @@
1
1
  import { CompletionItemKind } from 'vscode-languageserver-protocol';
2
2
  import cssDataProvider from './css-data-provider.mjs';
3
- import { Layer, generateCSS, isCoreRule, MasterCSS } from '@master/css';
3
+ import { SyntaxRuleType, generateCSS, isCoreRule, MasterCSS } from '@master/css';
4
4
  import { getCSSDataDocumentation } from './get-css-data-documentation.mjs';
5
5
  import sortCompletionItems from './sort-completion-items.mjs';
6
6
 
@@ -11,7 +11,7 @@ const GLOBAL_VARIABLE_PRIORITY = 'zzzz';
11
11
  function getValueCompletionItems(css = new MasterCSS(), ruleKey) {
12
12
  const nativeProperties = cssDataProvider.provideProperties();
13
13
  const completionItems = [];
14
- const nativeKey = css.Rules.find(({ keys })=>keys.includes(ruleKey))?.id;
14
+ const nativeKey = css.definedRules.find(({ keys })=>keys.includes(ruleKey))?.id;
15
15
  const nativePropertyData = nativeProperties.find(({ name })=>name === nativeKey);
16
16
  const generateVariableCompletionItem = (variable, { scoped } = {
17
17
  scoped: false
@@ -72,14 +72,14 @@ function getValueCompletionItems(css = new MasterCSS(), ruleKey) {
72
72
  }
73
73
  return completionItem;
74
74
  };
75
- for (const EachRule of css.Rules){
75
+ for (const eachDefinedRule of css.definedRules){
76
76
  /**
77
77
  * Scoped variables
78
78
  * @example box: + content -> box-sizing:content
79
- */ if (EachRule.definition.key === ruleKey || EachRule.definition.subkey === ruleKey || EachRule.definition.ambiguousKeys?.includes(ruleKey)) {
80
- for(const variableName in EachRule.variables){
79
+ */ if (eachDefinedRule.definition.key === ruleKey || eachDefinedRule.definition.subkey === ruleKey || eachDefinedRule.definition.ambiguousKeys?.includes(ruleKey)) {
80
+ for(const variableName in eachDefinedRule.variables){
81
81
  if (completionItems.find(({ label })=>label === variableName)) continue;
82
- const variable = EachRule.variables[variableName];
82
+ const variable = eachDefinedRule.variables[variableName];
83
83
  const completionItem = generateVariableCompletionItem(variable, {
84
84
  scoped: true
85
85
  });
@@ -93,12 +93,12 @@ function getValueCompletionItems(css = new MasterCSS(), ruleKey) {
93
93
  }
94
94
  /**
95
95
  * @example animation:fade
96
- */ if (EachRule.keys.includes(ruleKey) && EachRule.definition.includeAnimations) {
96
+ */ if (eachDefinedRule.keys.includes(ruleKey) && eachDefinedRule.definition.includeAnimations) {
97
97
  for(const animationName in css.animations){
98
- const isNative = EachRule.definition.layer && [
99
- Layer.Native,
100
- Layer.NativeShorthand
101
- ].includes(EachRule.definition.layer);
98
+ const isNative = eachDefinedRule.definition.type && [
99
+ SyntaxRuleType.Native,
100
+ SyntaxRuleType.NativeShorthand
101
+ ].includes(eachDefinedRule.definition.type);
102
102
  completionItems.push({
103
103
  label: animationName,
104
104
  kind: CompletionItemKind.Value,
@@ -106,9 +106,9 @@ function getValueCompletionItems(css = new MasterCSS(), ruleKey) {
106
106
  generatedCSS: generateCSS([
107
107
  ruleKey + ':' + animationName
108
108
  ], css),
109
- docs: '/reference/' + isCoreRule(EachRule.id) && EachRule.id
109
+ docs: '/reference/' + isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
110
110
  }),
111
- detail: isNative ? EachRule.id + ': ' + animationName : animationName
111
+ detail: isNative ? eachDefinedRule.id + ': ' + animationName : animationName
112
112
  });
113
113
  }
114
114
  }
@@ -116,15 +116,15 @@ function getValueCompletionItems(css = new MasterCSS(), ruleKey) {
116
116
  * Ambiguous values
117
117
  * @example text: -> center, left, right, justify
118
118
  * @example t: -> center, left, right, justify
119
- */ if (EachRule.definition.ambiguousKeys?.includes(ruleKey) && EachRule.definition.ambiguousValues?.length) {
120
- const nativePropertyData = nativeProperties.find((x)=>x.name === EachRule.id);
121
- for (const ambiguousValue of EachRule.definition.ambiguousValues){
119
+ */ if (eachDefinedRule.definition.ambiguousKeys?.includes(ruleKey) && eachDefinedRule.definition.ambiguousValues?.length) {
120
+ const nativePropertyData = nativeProperties.find((x)=>x.name === eachDefinedRule.id);
121
+ for (const ambiguousValue of eachDefinedRule.definition.ambiguousValues){
122
122
  if (typeof ambiguousValue !== 'string') continue;
123
123
  const nativeValueData = nativePropertyData?.values?.find((x)=>x.name === ambiguousValue);
124
- const isNative = EachRule.definition.layer && [
125
- Layer.Native,
126
- Layer.NativeShorthand
127
- ].includes(EachRule.definition.layer);
124
+ const isNative = eachDefinedRule.definition.type && [
125
+ SyntaxRuleType.Native,
126
+ SyntaxRuleType.NativeShorthand
127
+ ].includes(eachDefinedRule.definition.type);
128
128
  completionItems.push({
129
129
  label: ambiguousValue,
130
130
  kind: CompletionItemKind.Value,
@@ -137,9 +137,9 @@ function getValueCompletionItems(css = new MasterCSS(), ruleKey) {
137
137
  generatedCSS: generateCSS([
138
138
  ruleKey + ':' + ambiguousValue
139
139
  ], css),
140
- docs: '/reference/' + isCoreRule(EachRule.id) && EachRule.id
140
+ docs: '/reference/' + isCoreRule(eachDefinedRule.id) && eachDefinedRule.id
141
141
  }),
142
- detail: isNative ? EachRule.id + ': ' + ambiguousValue : ambiguousValue
142
+ detail: isNative ? eachDefinedRule.id + ': ' + ambiguousValue : ambiguousValue
143
143
  });
144
144
  }
145
145
  }
@@ -27,7 +27,7 @@ function querySyntaxCompletions(q = '', css$1 = new css.MasterCSS()) {
27
27
  field = field.slice(1);
28
28
  }
29
29
  }
30
- const signs = css$1.Rules.filter(({ definition })=>definition.sign).map(({ definition })=>definition.sign);
30
+ const signs = css$1.definedRules.filter(({ definition })=>definition.sign).map(({ definition })=>definition.sign);
31
31
  const keyMatch = field.match(new RegExp(`^[^${signs}'":\\s]+:`));
32
32
  const atMatches = Array.from(field.matchAll(/@(?=(?:[^'"]|'[^']*'|"[^"]*")*$)/g));
33
33
  const valueSeparatorMatch = field.match(/\|(?=(?:[^'"]|'[^']*'|"[^"]*")*$)/g);
@@ -35,11 +35,11 @@ function querySyntaxCompletions(q = '', css$1 = new css.MasterCSS()) {
35
35
  const firstColonIndex = keyMatch ? keyMatch[0].length - 1 : -1;
36
36
  const selectorInvokedRegex = new RegExp(`[${css.SELECTOR_SIGNS.join('')}](?=(?:[^'"]|'[^']*'|"[^"]*")*$)`);
37
37
  const key = keyMatch ? keyMatch[0].slice(0, firstColonIndex) : undefined;
38
- const styleNames = Object.keys(css$1.config.styles || {});
38
+ const componentNames = Object.keys(css$1.config.components || {});
39
39
  const utilityNames = Object.keys(css$1.config.utilities || {});
40
- const isStyle = !!styleNames.find((eachStyleName)=>new RegExp(`^${eachStyleName}(?:\\b|_)`).test(field));
40
+ const isStyle = !!componentNames.find((eachStyleName)=>new RegExp(`^${eachStyleName}(?:\\b|_)`).test(field));
41
41
  const isUtility = !!utilityNames.find((eachUtilityName)=>new RegExp(`^${eachUtilityName}(?:\\b|_)`).test(field));
42
- // check by utilities and styles
42
+ // check by utilities and components
43
43
  if (!isStyle && !isUtility) {
44
44
  if (key === undefined && !valueSeparatorMatch) {
45
45
  /**
@@ -102,7 +102,7 @@ function querySyntaxCompletions(q = '', css$1 = new css.MasterCSS()) {
102
102
  generatedCSS: css.generateCSS([
103
103
  field + '.class'
104
104
  ], css$1),
105
- docs: '/reference/syntaxes#selectors'
105
+ docs: '/guide/syntax#selectors'
106
106
  }),
107
107
  kind: vscodeLanguageserverProtocol.CompletionItemKind.Class
108
108
  });
@@ -25,7 +25,7 @@ function querySyntaxCompletions(q = '', css = new MasterCSS()) {
25
25
  field = field.slice(1);
26
26
  }
27
27
  }
28
- const signs = css.Rules.filter(({ definition })=>definition.sign).map(({ definition })=>definition.sign);
28
+ const signs = css.definedRules.filter(({ definition })=>definition.sign).map(({ definition })=>definition.sign);
29
29
  const keyMatch = field.match(new RegExp(`^[^${signs}'":\\s]+:`));
30
30
  const atMatches = Array.from(field.matchAll(/@(?=(?:[^'"]|'[^']*'|"[^"]*")*$)/g));
31
31
  const valueSeparatorMatch = field.match(/\|(?=(?:[^'"]|'[^']*'|"[^"]*")*$)/g);
@@ -33,11 +33,11 @@ function querySyntaxCompletions(q = '', css = new MasterCSS()) {
33
33
  const firstColonIndex = keyMatch ? keyMatch[0].length - 1 : -1;
34
34
  const selectorInvokedRegex = new RegExp(`[${SELECTOR_SIGNS.join('')}](?=(?:[^'"]|'[^']*'|"[^"]*")*$)`);
35
35
  const key = keyMatch ? keyMatch[0].slice(0, firstColonIndex) : undefined;
36
- const styleNames = Object.keys(css.config.styles || {});
36
+ const componentNames = Object.keys(css.config.components || {});
37
37
  const utilityNames = Object.keys(css.config.utilities || {});
38
- const isStyle = !!styleNames.find((eachStyleName)=>new RegExp(`^${eachStyleName}(?:\\b|_)`).test(field));
38
+ const isStyle = !!componentNames.find((eachStyleName)=>new RegExp(`^${eachStyleName}(?:\\b|_)`).test(field));
39
39
  const isUtility = !!utilityNames.find((eachUtilityName)=>new RegExp(`^${eachUtilityName}(?:\\b|_)`).test(field));
40
- // check by utilities and styles
40
+ // check by utilities and components
41
41
  if (!isStyle && !isUtility) {
42
42
  if (key === undefined && !valueSeparatorMatch) {
43
43
  /**
@@ -100,7 +100,7 @@ function querySyntaxCompletions(q = '', css = new MasterCSS()) {
100
100
  generatedCSS: generateCSS([
101
101
  field + '.class'
102
102
  ], css),
103
- docs: '/reference/syntaxes#selectors'
103
+ docs: '/guide/syntax#selectors'
104
104
  }),
105
105
  kind: CompletionItemKind.Class
106
106
  });
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@master/css-language-service","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","type-check":"tsc --noEmit","lint":"eslint","test":"vitest"},"description":"Master CSS Language Service","author":"Aoyue Design LLC.","license":"MIT","repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/language-service"},"dependencies":{"@babel/parser":"^7.26.3","@master/css":"^2.0.0-rc.47","@techor/extend":"^3.1.7","color-convert":"^2.0.1","color-rgba":"^3.0.0","color-space":"^2.0.1","culori":"^4.0.1","js-beautify":"^1.15.1","lodash.escaperegexp":"^4.1.2","minimatch":"^10.0.1","pex-color":"^2.2.0","vscode-css-languageservice":"^6.3.2","vscode-languageserver-protocol":"^3.17.5","vscode-languageserver-textdocument":"^1.0.12"},"devDependencies":{"@types/chroma-js":"^2.4.5","@types/color-convert":"^2.0.4","@types/color-rgba":"^2.1.3","@types/culori":"^2.1.1","@types/lodash.escaperegexp":"^4.1.9","@types/vscode":"^1.96.0","shared":"^2.0.0-rc.47","vscode-languageserver":"^9.0.1"},"sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"version":"2.0.0-rc.47"}
1
+ {"name":"@master/css-language-service","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","type-check":"tsc --noEmit","lint":"eslint","test":"vitest"},"description":"Master CSS Language Service","author":"Aoyue Design LLC.","license":"MIT","repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/language-service"},"dependencies":{"@babel/parser":"^7.26.3","@master/css":"^2.0.0-rc.48","@techor/extend":"^3.1.7","color-convert":"^2.0.1","color-rgba":"^3.0.0","color-space":"^2.0.1","culori":"^4.0.1","js-beautify":"^1.15.1","lodash.escaperegexp":"^4.1.2","minimatch":"^10.0.1","pex-color":"^2.2.0","vscode-css-languageservice":"^6.3.2","vscode-languageserver-protocol":"^3.17.5","vscode-languageserver-textdocument":"^1.0.12"},"devDependencies":{"@types/chroma-js":"^2.4.5","@types/color-convert":"^2.0.4","@types/color-rgba":"^2.1.3","@types/culori":"^2.1.1","@types/lodash.escaperegexp":"^4.1.9","@types/vscode":"^1.96.0","shared":"^2.0.0-rc.48","vscode-languageserver":"^9.0.1"},"sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"version":"2.0.0-rc.48"}