@master/css 2.0.0-rc.67 → 2.0.0-rc.68

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.
Files changed (12) hide show
  1. package/dist/config/variables.cjs +179 -179
  2. package/dist/config/variables.mjs +179 -179
  3. package/dist/core.cjs +33 -51
  4. package/dist/core.mjs +33 -51
  5. package/dist/syntax-rule.cjs +9 -4
  6. package/dist/syntax-rule.mjs +9 -4
  7. package/dist/utils/generate-selector.cjs +2 -1
  8. package/dist/utils/generate-selector.mjs +2 -1
  9. package/dist/utils/parse-selector.cjs +4 -2
  10. package/dist/utils/parse-selector.d.ts +1 -1
  11. package/dist/utils/parse-selector.mjs +4 -2
  12. package/package.json +1 -1
package/dist/core.mjs CHANGED
@@ -247,25 +247,6 @@ class MasterCSS {
247
247
  for (const name of flatNames){
248
248
  resolve(name);
249
249
  }
250
- // Second pass: convert to grouped syntax rule strings
251
- this.components.forEach((compClasses, componentName)=>{
252
- const syntaxRulesByStateToken = {};
253
- for (const syntax of compClasses){
254
- const parsed = this.create(syntax);
255
- if (parsed?.valid) {
256
- const group = syntaxRulesByStateToken[parsed.stateToken] ||= [];
257
- group.push(parsed);
258
- } else {
259
- console.error(`Invalid class "${syntax}" found in ${componentName} component.`);
260
- }
261
- }
262
- const result = Object.entries(syntaxRulesByStateToken).map(([stateToken, syntaxRules])=>{
263
- if (syntaxRules.length === 1) return syntaxRules[0].name;
264
- const namesWithoutToken = syntaxRules.map((s)=>s.name.slice(0, s.name.length - s.stateToken.length));
265
- return `{${namesWithoutToken.join(';')}}${stateToken}`;
266
- });
267
- this.components.set(componentName, result);
268
- });
269
250
  }
270
251
  resolveSelectors() {
271
252
  const { selectors } = this.config;
@@ -403,46 +384,47 @@ class MasterCSS {
403
384
  value: variableDefinition * -1
404
385
  });
405
386
  } else if (typeof variableDefinition === 'string') {
406
- const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
387
+ const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$|^\$([a-zA-Z0-9-]+)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
407
388
  const flatName = name.join('-');
408
389
  if (aliasResult) {
390
+ const alias = aliasResult[1] ?? aliasResult[3];
391
+ const modeSuffix = aliasResult[2] ?? aliasResult[4];
409
392
  let aliasVariableModeResolver = aliasVariableModeResolvers.get(flatName);
410
393
  if (!aliasVariableModeResolver) {
411
394
  aliasVariableModeResolvers.set(flatName, aliasVariableModeResolver = {});
412
395
  }
413
396
  aliasVariableModeResolver[mode] = ()=>{
414
397
  delete aliasVariableModeResolver[mode];
415
- const [alias, aliasMode] = aliasResult[1].split('@');
416
- if (alias) {
417
- const eachAliasModeVariableResolver = aliasVariableModeResolvers.get(alias);
418
- if (eachAliasModeVariableResolver) {
419
- for (const mode of Object.keys(eachAliasModeVariableResolver)){
420
- eachAliasModeVariableResolver[mode]?.();
421
- }
398
+ if (!alias) return;
399
+ const [baseAlias, aliasMode] = alias.split('@');
400
+ const eachAliasModeVariableResolver = aliasVariableModeResolvers.get(baseAlias);
401
+ if (eachAliasModeVariableResolver) {
402
+ for (const mode of Object.keys(eachAliasModeVariableResolver)){
403
+ eachAliasModeVariableResolver[mode]?.();
422
404
  }
423
- const aliasVariable = this.variables.get(alias);
424
- if (aliasVariable) {
425
- if (aliasMode === undefined && aliasVariable.modes) {
426
- addVariable(name, {
427
- type: aliasVariable.type,
428
- value: aliasVariable.value,
429
- space: aliasVariable.space
430
- }, '', aliasResult[2]);
431
- for(const mode in aliasVariable.modes){
432
- addVariable(name, aliasVariable.modes[mode], mode, aliasResult[2]);
433
- }
434
- } else {
435
- const variable = aliasMode !== undefined ? aliasVariable.modes?.[aliasMode] : aliasVariable;
436
- if (variable) {
437
- const newVariable = {
438
- type: variable.type,
439
- value: variable.value
440
- };
441
- if (variable.type === 'color') {
442
- newVariable.space = variable.space;
443
- }
444
- addVariable(name, newVariable, undefined, aliasResult[2]);
445
- }
405
+ }
406
+ const aliasVariable = this.variables.get(baseAlias);
407
+ if (aliasVariable) {
408
+ if (aliasMode === undefined && aliasVariable.modes) {
409
+ addVariable(name, {
410
+ type: aliasVariable.type,
411
+ value: aliasVariable.value,
412
+ space: aliasVariable.space
413
+ }, '', modeSuffix);
414
+ for(const mode in aliasVariable.modes){
415
+ addVariable(name, aliasVariable.modes[mode], mode, modeSuffix);
416
+ }
417
+ } else {
418
+ const variable = aliasMode !== undefined ? aliasVariable.modes?.[aliasMode] : aliasVariable;
419
+ if (variable) {
420
+ const newVariable = {
421
+ type: variable.type,
422
+ value: variable.value,
423
+ ...variable.type === 'color' ? {
424
+ space: variable.space
425
+ } : {}
426
+ };
427
+ addVariable(name, newVariable, undefined, modeSuffix);
446
428
  }
447
429
  }
448
430
  }
@@ -548,7 +530,7 @@ class MasterCSS {
548
530
  if (syntaxRule && syntaxRule.valid) {
549
531
  syntaxRules.push(syntaxRule);
550
532
  } else {
551
- console.error(`Invalid syntax class "${cls}" is in ${className} component.`);
533
+ console.error(`Invalid class "${cls}" found in ${className} component.`);
552
534
  }
553
535
  });
554
536
  } else {
package/dist/syntax-rule.cjs CHANGED
@@ -158,10 +158,15 @@ class SyntaxRule {
158
158
  }
159
159
  }
160
160
  };
161
- handleVariable(currentValue);
162
- if (!handled) {
163
- const [colorName, alpha] = currentValue.split('/');
164
- handleVariable(colorName, alpha);
161
+ if (/^\$[a-zA-Z0-9-]+(?:\/[^\/]+)?$/.test(currentValue)) {
162
+ const [raw, alpha] = currentValue.slice(1).split('/');
163
+ handleVariable(raw, alpha);
164
+ } else {
165
+ handleVariable(currentValue);
166
+ if (!handled) {
167
+ const [colorName, alpha] = currentValue.split('/');
168
+ handleVariable(colorName, alpha);
169
+ }
165
170
  }
166
171
  }
167
172
  if (!handled) {
package/dist/syntax-rule.mjs CHANGED
@@ -156,10 +156,15 @@ class SyntaxRule {
156
156
  }
157
157
  }
158
158
  };
159
- handleVariable(currentValue);
160
- if (!handled) {
161
- const [colorName, alpha] = currentValue.split('/');
162
- handleVariable(colorName, alpha);
159
+ if (/^\$[a-zA-Z0-9-]+(?:\/[^\/]+)?$/.test(currentValue)) {
160
+ const [raw, alpha] = currentValue.slice(1).split('/');
161
+ handleVariable(raw, alpha);
162
+ } else {
163
+ handleVariable(currentValue);
164
+ if (!handled) {
165
+ const [colorName, alpha] = currentValue.split('/');
166
+ handleVariable(colorName, alpha);
167
+ }
163
168
  }
164
169
  }
165
170
  if (!handled) {
package/dist/utils/generate-selector.cjs CHANGED
@@ -7,7 +7,8 @@ const prefixMap = {
7
7
  'pseudo-class': ':',
8
8
  'pseudo-element': '::',
9
9
  'attribute': '',
10
- 'combinator': ''
10
+ 'combinator': '',
11
+ 'id': '#'
11
12
  };
12
13
  function generateSelector(nodes, body = '') {
13
14
  const generate = (node)=>{
package/dist/utils/generate-selector.mjs CHANGED
@@ -5,7 +5,8 @@ const prefixMap = {
5
5
  'pseudo-class': ':',
6
6
  'pseudo-element': '::',
7
7
  'attribute': '',
8
- 'combinator': ''
8
+ 'combinator': '',
9
+ 'id': '#'
9
10
  };
10
11
  function generateSelector(nodes, body = '') {
11
12
  const generate = (node)=>{
package/dist/utils/parse-selector.cjs CHANGED
@@ -4,7 +4,7 @@ var common = require('../common.cjs');
4
4
  var core = require('../core.cjs');
5
5
  var parsePair = require('./parse-pair.cjs');
6
6
 
7
- const SELECTOR_REGEX = new RegExp(`(?:[a-zA-Z0-9-]+)|([${common.SELECTOR_COMBINATORS.join('')}.:,*])|(a-zA-Z0-9-)`, 'g');
7
+ const SELECTOR_REGEX = new RegExp(`(?:[a-zA-Z0-9-]+)|([${common.SELECTOR_COMBINATORS.join('')}#.:,*])|(a-zA-Z0-9-)`, 'g');
8
8
  function parseSelector(token, css = new core(), isRaw = true) {
9
9
  const resolve = (eachToken)=>{
10
10
  const nodes = [];
@@ -13,7 +13,7 @@ function parseSelector(token, css = new core(), isRaw = true) {
13
13
  for (const match of eachToken.matchAll(SELECTOR_REGEX)){
14
14
  const raw = match[0];
15
15
  tokenIndex += raw.length;
16
- if (raw === ':' || raw === '.') {
16
+ if (raw === ':' || raw === '.' || raw === '#') {
17
17
  currentPrefix += raw;
18
18
  continue;
19
19
  }
@@ -52,6 +52,8 @@ function parseSelector(token, css = new core(), isRaw = true) {
52
52
  type = 'pseudo-element';
53
53
  } else if (currentPrefix === '.') {
54
54
  type = 'class';
55
+ } else if (currentPrefix === '#') {
56
+ type = 'id';
55
57
  }
56
58
  nodes.push({
57
59
  value,
package/dist/utils/parse-selector.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import MasterCSS from '../core';
2
2
  export declare type SelectorLiteralNode = {
3
- type?: 'attribute' | 'pseudo-class' | 'pseudo-element' | 'class' | 'universal';
3
+ type?: 'attribute' | 'pseudo-class' | 'pseudo-element' | 'class' | 'universal' | 'id';
4
4
  raw?: string;
5
5
  value?: string;
6
6
  children?: SelectorNode[];
package/dist/utils/parse-selector.mjs CHANGED
@@ -2,7 +2,7 @@ import { SELECTOR_COMBINATORS } from '../common.mjs';
2
2
  import MasterCSS from '../core.mjs';
3
3
  import parsePair from './parse-pair.mjs';
4
4
 
5
- const SELECTOR_REGEX = new RegExp(`(?:[a-zA-Z0-9-]+)|([${SELECTOR_COMBINATORS.join('')}.:,*])|(a-zA-Z0-9-)`, 'g');
5
+ const SELECTOR_REGEX = new RegExp(`(?:[a-zA-Z0-9-]+)|([${SELECTOR_COMBINATORS.join('')}#.:,*])|(a-zA-Z0-9-)`, 'g');
6
6
  function parseSelector(token, css = new MasterCSS(), isRaw = true) {
7
7
  const resolve = (eachToken)=>{
8
8
  const nodes = [];
@@ -11,7 +11,7 @@ function parseSelector(token, css = new MasterCSS(), isRaw = true) {
11
11
  for (const match of eachToken.matchAll(SELECTOR_REGEX)){
12
12
  const raw = match[0];
13
13
  tokenIndex += raw.length;
14
- if (raw === ':' || raw === '.') {
14
+ if (raw === ':' || raw === '.' || raw === '#') {
15
15
  currentPrefix += raw;
16
16
  continue;
17
17
  }
@@ -50,6 +50,8 @@ function parseSelector(token, css = new MasterCSS(), isRaw = true) {
50
50
  type = 'pseudo-element';
51
51
  } else if (currentPrefix === '.') {
52
52
  type = 'class';
53
+ } else if (currentPrefix === '#') {
54
+ type = 'id';
53
55
  }
54
56
  nodes.push({
55
57
  value,
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.1.1","@master/normal.css":"^3.2.0","@techor/extend":"^3.2.0","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.67"},"version":"2.0.0-rc.67"}
1
+ {"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.1.1","@master/normal.css":"^3.2.0","@techor/extend":"^3.2.0","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.68"},"version":"2.0.0-rc.68"}