@master/css-runtime 2.0.0-rc.61 → 2.0.0-rc.62

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 (7) hide show
  1. package/dist/global.min.js +1 -1
  2. package/dist/index.cjs +76 -77
  3. package/dist/index.development.cjs +81 -82
  4. package/dist/index.development.mjs +82 -83
  5. package/dist/index.mjs +77 -78
  6. package/dist/layer.d.ts +3 -3
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -38,43 +38,29 @@ class RuntimeLayer extends css.Layer {
38
38
  }
39
39
  insert(rule, index = this.rules.length) {
40
40
  const insertedIndex = super.insert(rule, index);
41
- if (insertedIndex === undefined) return;
42
- if (this.native) {
43
- let cssRuleIndex = 0;
44
- const lastCssRule = function getLastCssRule(layer, index) {
45
- let lastCssRule;
46
- const previouRule = layer.rules[index];
47
- if (previouRule && 'nodes' in previouRule) {
48
- if (!previouRule.nodes.length) return getLastCssRule(layer, index - 1);
49
- const lastNativeRule = previouRule.nodes[previouRule.nodes.length - 1];
50
- lastCssRule = lastNativeRule.native;
51
- }
52
- return lastCssRule;
53
- }(this, insertedIndex - 1);
54
- if (lastCssRule) {
55
- for(let i = 0; i < this.native.cssRules.length; i++){
56
- if (this.native.cssRules[i] === lastCssRule) {
57
- cssRuleIndex = i + 1;
58
- break;
59
- }
60
- }
61
- }
62
- for(let i = 0; i < rule.nodes.length;){
63
- const node = rule.nodes[i];
64
- try {
65
- const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
66
- node.native = this.native.cssRules.item(insertedIndex);
67
- cssRuleIndex++;
68
- i++;
69
- } catch (error) {
70
- console.error(error, node);
71
- rule.nodes.splice(i, 1);
72
- }
41
+ if (insertedIndex === undefined || !this.native) return;
42
+ const insertRuleSafely = (text, position)=>{
43
+ try {
44
+ const insertedIndex = this.native.insertRule(text, position);
45
+ return this.native.cssRules.item(insertedIndex);
46
+ } catch (error) {
47
+ console.error(error, rule);
48
+ return;
73
49
  }
50
+ };
51
+ if ('nodes' in rule) {
52
+ let currentIndex = insertedIndex;
53
+ rule.nodes.forEach((node)=>{
54
+ node.native = insertRuleSafely(node.text, currentIndex);
55
+ if (node.native) currentIndex++;
56
+ });
57
+ } else {
58
+ rule.native = insertRuleSafely(rule.text, index);
74
59
  }
75
60
  return insertedIndex;
76
61
  }
77
62
  detach() {
63
+ super.detach();
78
64
  const nativeSheet = this.cssRuntime.style?.sheet;
79
65
  if (nativeSheet && this.native?.parentStyleSheet) {
80
66
  const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
@@ -85,17 +71,22 @@ class RuntimeLayer extends css.Layer {
85
71
  }
86
72
  delete(key) {
87
73
  const deletedRule = super.delete(key);
88
- if (!deletedRule) return;
89
- if (this.native?.cssRules && 'nodes' in deletedRule) {
90
- for (const node of deletedRule.nodes){
91
- if (node.native) {
92
- const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, node.native);
93
- if (foundIndex !== -1) {
94
- // todo: Firefox throw "Uncaught NS_ERROR_FAILURE". Reproduce: Add '@fade|1s @fade|2s' and remove '@fade|1s @fade|2s'
95
- this.native.deleteRule(foundIndex);
96
- }
74
+ if (!deletedRule || !this.native) return;
75
+ const deleteRuleSafely = (rule)=>{
76
+ if (!rule) return;
77
+ const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, rule);
78
+ if (foundIndex !== -1) {
79
+ try {
80
+ this.native.deleteRule(foundIndex);
81
+ } catch (error) {
82
+ console.error(error, rule);
97
83
  }
98
84
  }
85
+ };
86
+ if ('nodes' in deletedRule) {
87
+ deletedRule.nodes.forEach((node)=>deleteRuleSafely(node.native));
88
+ } else {
89
+ deleteRuleSafely(deletedRule.native);
99
90
  }
100
91
  return deletedRule;
101
92
  }
@@ -187,7 +178,7 @@ class CSSRuntime extends css.MasterCSS {
187
178
  this.style.id = 'master';
188
179
  this.container.append(this.style);
189
180
  this.style.sheet.insertRule(this.layerStatementRule.text);
190
- this.layerStatementRule.nodes[0].native = this.style.sheet.cssRules.item(0);
181
+ this.layerStatementRule.native = this.style.sheet.cssRules.item(0);
191
182
  for (const eachConnectedName of connectedNames){
192
183
  this.add(eachConnectedName);
193
184
  }
@@ -326,20 +317,32 @@ class CSSRuntime extends css.MasterCSS {
326
317
  if (eachNativeCSSRule.name === 'theme') {
327
318
  this.themeLayer.native = eachCSSLayerRule;
328
319
  let variableRule;
329
- let lastVariableName;
330
- for(let j = 0; j < eachCSSLayerRule.cssRules.length; j++){
331
- const cssRule = eachCSSLayerRule.cssRules[j];
320
+ const unresolvedCSSRules = new Map();
321
+ for (const rule of eachCSSLayerRule.cssRules){
322
+ // trim() for fix the firefox bug that the cssText ends with \n\n
323
+ unresolvedCSSRules.set(rule.cssText.trim(), rule);
324
+ }
325
+ for (const cssRule of eachCSSLayerRule.cssRules){
326
+ if (!unresolvedCSSRules.has(cssRule.cssText)) continue;
332
327
  const variableCSSRule = cssRule.constructor.name === 'CSSMediaRule' ? cssRule.cssRules[0] : cssRule;
333
328
  const variableName = variableCSSRule.style[0].slice(2);
334
- if (variableName !== lastVariableName) {
335
- lastVariableName = variableName;
336
- variableRule = new css.Rule(variableName);
337
- this.themeLayer.rules.push(variableRule);
338
- this.themeLayer.tokenCounts.set(variableRule.name, 0);
339
- }
340
- variableRule?.nodes.push({
341
- native: cssRule,
342
- text: cssRule.cssText
329
+ const variable = this.variables.get(variableName);
330
+ if (!variable) continue;
331
+ variableRule = new css.VariableRule(variableName, variable, this);
332
+ this.themeLayer.rules.push(variableRule);
333
+ this.themeLayer.tokenCounts.set(variableRule.name, 0);
334
+ variableRule.nodes.forEach((node)=>{
335
+ const checkRuleIndex = checkSheet.insertRule(node.text);
336
+ const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
337
+ if (checkNodeNativeRule) {
338
+ const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
339
+ const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
340
+ if (match) {
341
+ node.native = match;
342
+ unresolvedCSSRules.delete(checkNodeNativeRuleText);
343
+ return;
344
+ }
345
+ }
343
346
  });
344
347
  }
345
348
  if (this.themeLayer.rules.length) this.rules.push(this.themeLayer);
@@ -347,15 +350,13 @@ class CSSRuntime extends css.MasterCSS {
347
350
  cssLayerRules.push(eachCSSLayerRule);
348
351
  }
349
352
  } else if (eachNativeCSSRule.constructor.name === 'CSSLayerStatementRule') {
350
- this.layerStatementRule.nodes[0].native = eachNativeCSSRule;
353
+ this.layerStatementRule.native = eachNativeCSSRule;
351
354
  } else if (eachNativeCSSRule.constructor.name === 'CSSKeyframesRule') {
352
- const keyframsRule = eachNativeCSSRule;
353
- const animationRule = new css.Rule(keyframsRule.name, [
354
- {
355
- native: keyframsRule,
356
- text: keyframsRule.cssText
357
- }
358
- ]);
355
+ const nativeKeyframsRule = eachNativeCSSRule;
356
+ const keyframes = this.animations.get(nativeKeyframsRule.name);
357
+ if (!keyframes) continue;
358
+ const animationRule = new css.AnimationRule(nativeKeyframsRule.name, keyframes, this);
359
+ animationRule.native = nativeKeyframsRule;
359
360
  this.animationsNonLayer.rules.push(animationRule);
360
361
  this.rules.push(animationRule);
361
362
  this.animationsNonLayer.tokenCounts.set(animationRule.name, 0);
@@ -400,23 +401,21 @@ class CSSRuntime extends css.MasterCSS {
400
401
  layer.insertVariables(createdRule);
401
402
  layer.insertAnimations(createdRule);
402
403
  result.allSyntaxRules.push(createdRule);
403
- createdRule.nodes.forEach((node)=>{
404
- try {
405
- const checkRuleIndex = checkSheet.insertRule(node.text);
406
- const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
407
- if (checkNodeNativeRule) {
408
- const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
409
- const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
410
- if (match) {
411
- node.native = match;
412
- unresolvedCSSRules.delete(checkNodeNativeRuleText);
413
- return;
414
- }
404
+ try {
405
+ const checkRuleIndex = checkSheet.insertRule(createdRule.text);
406
+ const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
407
+ if (checkNodeNativeRule) {
408
+ const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
409
+ const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
410
+ if (match) {
411
+ createdRule.native = match;
412
+ unresolvedCSSRules.delete(checkNodeNativeRuleText);
413
+ continue;
415
414
  }
416
- console.error(`Cannot retrieve CSS rule for \`${node.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
417
- } catch (error) {
418
415
  }
419
- });
416
+ console.error(`Cannot retrieve CSS rule for \`${createdRule.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
417
+ } catch (error) {
418
+ }
420
419
  }
421
420
  } else {
422
421
  console.error(`Cannot recognize \`${eachNativeLayerRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
package/dist/index.development.cjs CHANGED
@@ -47,13 +47,13 @@ function registerClassCountDebugger() {
47
47
  const eachCount = cssRuntime.classCounts.get(className);
48
48
  const eachActualCount = actualClassCounts[className];
49
49
  if (eachCount !== eachActualCount) {
50
- log.error(`Class count mismatch for '${className}' (expected ${eachActualCount}) (received ${eachCount})`);
50
+ log.error(`Class count mismatch for \`${className}\` (expected ${eachActualCount}) (received ${eachCount})`);
51
51
  errored = true;
52
52
  }
53
53
  }
54
54
  cssRuntime.classCounts.forEach((eachCount, className)=>{
55
55
  if (!Object.prototype.hasOwnProperty.call(actualClassCounts, className)) {
56
- log.error(`Class count mismatch for '${className}' (expected ${0}) (received ${eachCount})`);
56
+ log.error(`Class count mismatch for \`${className}\` (expected ${0}) (received ${eachCount})`);
57
57
  errored = true;
58
58
  }
59
59
  });
@@ -134,43 +134,29 @@ class RuntimeLayer extends css.Layer {
134
134
  }
135
135
  insert(rule, index = this.rules.length) {
136
136
  const insertedIndex = super.insert(rule, index);
137
- if (insertedIndex === undefined) return;
138
- if (this.native) {
139
- let cssRuleIndex = 0;
140
- const lastCssRule = function getLastCssRule(layer, index) {
141
- let lastCssRule;
142
- const previouRule = layer.rules[index];
143
- if (previouRule && 'nodes' in previouRule) {
144
- if (!previouRule.nodes.length) return getLastCssRule(layer, index - 1);
145
- const lastNativeRule = previouRule.nodes[previouRule.nodes.length - 1];
146
- lastCssRule = lastNativeRule.native;
147
- }
148
- return lastCssRule;
149
- }(this, insertedIndex - 1);
150
- if (lastCssRule) {
151
- for(let i = 0; i < this.native.cssRules.length; i++){
152
- if (this.native.cssRules[i] === lastCssRule) {
153
- cssRuleIndex = i + 1;
154
- break;
155
- }
156
- }
157
- }
158
- for(let i = 0; i < rule.nodes.length;){
159
- const node = rule.nodes[i];
160
- try {
161
- const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
162
- node.native = this.native.cssRules.item(insertedIndex);
163
- cssRuleIndex++;
164
- i++;
165
- } catch (error) {
166
- console.error(error, node);
167
- rule.nodes.splice(i, 1);
168
- }
137
+ if (insertedIndex === undefined || !this.native) return;
138
+ const insertRuleSafely = (text, position)=>{
139
+ try {
140
+ const insertedIndex = this.native.insertRule(text, position);
141
+ return this.native.cssRules.item(insertedIndex);
142
+ } catch (error) {
143
+ console.error(error, rule);
144
+ return;
169
145
  }
146
+ };
147
+ if ('nodes' in rule) {
148
+ let currentIndex = insertedIndex;
149
+ rule.nodes.forEach((node)=>{
150
+ node.native = insertRuleSafely(node.text, currentIndex);
151
+ if (node.native) currentIndex++;
152
+ });
153
+ } else {
154
+ rule.native = insertRuleSafely(rule.text, index);
170
155
  }
171
156
  return insertedIndex;
172
157
  }
173
158
  detach() {
159
+ super.detach();
174
160
  const nativeSheet = this.cssRuntime.style?.sheet;
175
161
  if (nativeSheet && this.native?.parentStyleSheet) {
176
162
  const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
@@ -181,17 +167,22 @@ class RuntimeLayer extends css.Layer {
181
167
  }
182
168
  delete(key) {
183
169
  const deletedRule = super.delete(key);
184
- if (!deletedRule) return;
185
- if (this.native?.cssRules && 'nodes' in deletedRule) {
186
- for (const node of deletedRule.nodes){
187
- if (node.native) {
188
- const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, node.native);
189
- if (foundIndex !== -1) {
190
- // todo: Firefox throw "Uncaught NS_ERROR_FAILURE". Reproduce: Add '@fade|1s @fade|2s' and remove '@fade|1s @fade|2s'
191
- this.native.deleteRule(foundIndex);
192
- }
170
+ if (!deletedRule || !this.native) return;
171
+ const deleteRuleSafely = (rule)=>{
172
+ if (!rule) return;
173
+ const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, rule);
174
+ if (foundIndex !== -1) {
175
+ try {
176
+ this.native.deleteRule(foundIndex);
177
+ } catch (error) {
178
+ console.error(error, rule);
193
179
  }
194
180
  }
181
+ };
182
+ if ('nodes' in deletedRule) {
183
+ deletedRule.nodes.forEach((node)=>deleteRuleSafely(node.native));
184
+ } else {
185
+ deleteRuleSafely(deletedRule.native);
195
186
  }
196
187
  return deletedRule;
197
188
  }
@@ -287,7 +278,7 @@ class CSSRuntime extends css.MasterCSS {
287
278
  this.style.id = 'master';
288
279
  this.container.append(this.style);
289
280
  this.style.sheet.insertRule(this.layerStatementRule.text);
290
- this.layerStatementRule.nodes[0].native = this.style.sheet.cssRules.item(0);
281
+ this.layerStatementRule.native = this.style.sheet.cssRules.item(0);
291
282
  for (const eachConnectedName of connectedNames){
292
283
  this.add(eachConnectedName);
293
284
  }
@@ -426,20 +417,32 @@ class CSSRuntime extends css.MasterCSS {
426
417
  if (eachNativeCSSRule.name === 'theme') {
427
418
  this.themeLayer.native = eachCSSLayerRule;
428
419
  let variableRule;
429
- let lastVariableName;
430
- for(let j = 0; j < eachCSSLayerRule.cssRules.length; j++){
431
- const cssRule = eachCSSLayerRule.cssRules[j];
420
+ const unresolvedCSSRules = new Map();
421
+ for (const rule of eachCSSLayerRule.cssRules){
422
+ // trim() for fix the firefox bug that the cssText ends with \n\n
423
+ unresolvedCSSRules.set(rule.cssText.trim(), rule);
424
+ }
425
+ for (const cssRule of eachCSSLayerRule.cssRules){
426
+ if (!unresolvedCSSRules.has(cssRule.cssText)) continue;
432
427
  const variableCSSRule = cssRule.constructor.name === 'CSSMediaRule' ? cssRule.cssRules[0] : cssRule;
433
428
  const variableName = variableCSSRule.style[0].slice(2);
434
- if (variableName !== lastVariableName) {
435
- lastVariableName = variableName;
436
- variableRule = new css.Rule(variableName);
437
- this.themeLayer.rules.push(variableRule);
438
- this.themeLayer.tokenCounts.set(variableRule.name, 0);
439
- }
440
- variableRule?.nodes.push({
441
- native: cssRule,
442
- text: cssRule.cssText
429
+ const variable = this.variables.get(variableName);
430
+ if (!variable) continue;
431
+ variableRule = new css.VariableRule(variableName, variable, this);
432
+ this.themeLayer.rules.push(variableRule);
433
+ this.themeLayer.tokenCounts.set(variableRule.name, 0);
434
+ variableRule.nodes.forEach((node)=>{
435
+ const checkRuleIndex = checkSheet.insertRule(node.text);
436
+ const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
437
+ if (checkNodeNativeRule) {
438
+ const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
439
+ const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
440
+ if (match) {
441
+ node.native = match;
442
+ unresolvedCSSRules.delete(checkNodeNativeRuleText);
443
+ return;
444
+ }
445
+ }
443
446
  });
444
447
  }
445
448
  if (this.themeLayer.rules.length) this.rules.push(this.themeLayer);
@@ -447,15 +450,13 @@ class CSSRuntime extends css.MasterCSS {
447
450
  cssLayerRules.push(eachCSSLayerRule);
448
451
  }
449
452
  } else if (eachNativeCSSRule.constructor.name === 'CSSLayerStatementRule') {
450
- this.layerStatementRule.nodes[0].native = eachNativeCSSRule;
453
+ this.layerStatementRule.native = eachNativeCSSRule;
451
454
  } else if (eachNativeCSSRule.constructor.name === 'CSSKeyframesRule') {
452
- const keyframsRule = eachNativeCSSRule;
453
- const animationRule = new css.Rule(keyframsRule.name, [
454
- {
455
- native: keyframsRule,
456
- text: keyframsRule.cssText
457
- }
458
- ]);
455
+ const nativeKeyframsRule = eachNativeCSSRule;
456
+ const keyframes = this.animations.get(nativeKeyframsRule.name);
457
+ if (!keyframes) continue;
458
+ const animationRule = new css.AnimationRule(nativeKeyframsRule.name, keyframes, this);
459
+ animationRule.native = nativeKeyframsRule;
459
460
  this.animationsNonLayer.rules.push(animationRule);
460
461
  this.rules.push(animationRule);
461
462
  this.animationsNonLayer.tokenCounts.set(animationRule.name, 0);
@@ -500,26 +501,24 @@ class CSSRuntime extends css.MasterCSS {
500
501
  layer.insertVariables(createdRule);
501
502
  layer.insertAnimations(createdRule);
502
503
  result.allSyntaxRules.push(createdRule);
503
- createdRule.nodes.forEach((node)=>{
504
- try {
505
- const checkRuleIndex = checkSheet.insertRule(node.text);
506
- const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
507
- if (checkNodeNativeRule) {
508
- const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
509
- const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
510
- if (match) {
511
- node.native = match;
512
- unresolvedCSSRules.delete(checkNodeNativeRuleText);
513
- return;
514
- }
515
- }
516
- console.error(`Cannot retrieve CSS rule for \`${node.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
517
- } catch (error) {
518
- {
519
- console.debug(`Cannot insert CSS rule for \`${node.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
504
+ try {
505
+ const checkRuleIndex = checkSheet.insertRule(createdRule.text);
506
+ const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
507
+ if (checkNodeNativeRule) {
508
+ const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
509
+ const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
510
+ if (match) {
511
+ createdRule.native = match;
512
+ unresolvedCSSRules.delete(checkNodeNativeRuleText);
513
+ continue;
520
514
  }
521
515
  }
522
- });
516
+ console.error(`Cannot retrieve CSS rule for \`${createdRule.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
517
+ } catch (error) {
518
+ {
519
+ console.debug(`Cannot insert CSS rule for \`${createdRule.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
520
+ }
521
+ }
523
522
  }
524
523
  } else {
525
524
  console.error(`Cannot recognize \`${eachNativeLayerRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);