@master/css-runtime 2.0.0-rc.60 → 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 (8) hide show
  1. package/dist/global.min.js +1 -1
  2. package/dist/index.cjs +82 -80
  3. package/dist/index.d.ts +2 -1
  4. package/dist/index.development.cjs +99 -88
  5. package/dist/index.development.mjs +100 -90
  6. package/dist/index.mjs +83 -82
  7. package/dist/layer.d.ts +3 -3
  8. package/package.json +1 -1
package/dist/index.development.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { Layer, withSyntaxLayer, MasterCSS, config, Rule } from '@master/css';
1
+ import { Layer, withSyntaxLayer, MasterCSS, config, VariableRule, AnimationRule } from '@master/css';
2
2
  import { installHook } from '@master/css-devtools-hook';
3
3
 
4
4
  const createLogger = (type)=>{
@@ -45,13 +45,13 @@ function registerClassCountDebugger() {
45
45
  const eachCount = cssRuntime.classCounts.get(className);
46
46
  const eachActualCount = actualClassCounts[className];
47
47
  if (eachCount !== eachActualCount) {
48
- log.error(`Class count mismatch for '${className}' (expected ${eachActualCount}) (received ${eachCount})`);
48
+ log.error(`Class count mismatch for \`${className}\` (expected ${eachActualCount}) (received ${eachCount})`);
49
49
  errored = true;
50
50
  }
51
51
  }
52
52
  cssRuntime.classCounts.forEach((eachCount, className)=>{
53
53
  if (!Object.prototype.hasOwnProperty.call(actualClassCounts, className)) {
54
- log.error(`Class count mismatch for '${className}' (expected ${0}) (received ${eachCount})`);
54
+ log.error(`Class count mismatch for \`${className}\` (expected ${0}) (received ${eachCount})`);
55
55
  errored = true;
56
56
  }
57
57
  });
@@ -65,22 +65,28 @@ function registerClassCountDebugger() {
65
65
  function registerLifecycleDebugger() {
66
66
  const hook = globalThis.__MASTER_CSS_DEVTOOLS_HOOK__;
67
67
  hook.on('runtime:created', ({ cssRuntime })=>{
68
- log.debug('Runtime created:', cssRuntime);
68
+ log.debug('created', cssRuntime);
69
69
  });
70
70
  hook.on('runtime:hydrated', ({ cssRuntime })=>{
71
- log.debug('Runtime hydrated:', cssRuntime);
71
+ log.debug('hydrated', cssRuntime);
72
72
  });
73
73
  hook.on('runtime:observed', ({ cssRuntime })=>{
74
- log.debug('Runtime observed:', cssRuntime);
74
+ log.debug('observed', cssRuntime);
75
+ if (cssRuntime.progressive) {
76
+ log.info('Progressive rendering is adopted.');
77
+ log.debug('pre-rendered CSS', cssRuntime.style);
78
+ } else {
79
+ log.info('Runtime rendering is adopted.');
80
+ }
75
81
  });
76
82
  hook.on('runtime:refreshed', ({ cssRuntime, customConfig })=>{
77
- log.debug('Runtime refreshed:', cssRuntime, customConfig);
83
+ log.debug('refreshed', cssRuntime, customConfig);
78
84
  });
79
85
  hook.on('runtime:disconnected', ({ cssRuntime })=>{
80
- log.debug('Runtime disconnected:', cssRuntime);
86
+ log.debug('disconnected', cssRuntime);
81
87
  });
82
88
  hook.on('runtime:destroyed', ({ cssRuntime })=>{
83
- log.debug('Runtime destroyed:', cssRuntime);
89
+ log.debug('destroyed', cssRuntime);
84
90
  });
85
91
  }
86
92
 
@@ -126,43 +132,29 @@ class RuntimeLayer extends Layer {
126
132
  }
127
133
  insert(rule, index = this.rules.length) {
128
134
  const insertedIndex = super.insert(rule, index);
129
- if (insertedIndex === undefined) return;
130
- if (this.native) {
131
- let cssRuleIndex = 0;
132
- const lastCssRule = function getLastCssRule(layer, index) {
133
- let lastCssRule;
134
- const previouRule = layer.rules[index];
135
- if (previouRule && 'nodes' in previouRule) {
136
- if (!previouRule.nodes.length) return getLastCssRule(layer, index - 1);
137
- const lastNativeRule = previouRule.nodes[previouRule.nodes.length - 1];
138
- lastCssRule = lastNativeRule.native;
139
- }
140
- return lastCssRule;
141
- }(this, insertedIndex - 1);
142
- if (lastCssRule) {
143
- for(let i = 0; i < this.native.cssRules.length; i++){
144
- if (this.native.cssRules[i] === lastCssRule) {
145
- cssRuleIndex = i + 1;
146
- break;
147
- }
148
- }
149
- }
150
- for(let i = 0; i < rule.nodes.length;){
151
- try {
152
- const node = rule.nodes[i];
153
- const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
154
- node.native = this.native.cssRules.item(insertedIndex);
155
- cssRuleIndex++;
156
- i++;
157
- } catch (error) {
158
- console.error(error, rule.nodes[i]);
159
- rule.nodes.splice(i, 1);
160
- }
135
+ if (insertedIndex === undefined || !this.native) return;
136
+ const insertRuleSafely = (text, position)=>{
137
+ try {
138
+ const insertedIndex = this.native.insertRule(text, position);
139
+ return this.native.cssRules.item(insertedIndex);
140
+ } catch (error) {
141
+ console.error(error, rule);
142
+ return;
161
143
  }
144
+ };
145
+ if ('nodes' in rule) {
146
+ let currentIndex = insertedIndex;
147
+ rule.nodes.forEach((node)=>{
148
+ node.native = insertRuleSafely(node.text, currentIndex);
149
+ if (node.native) currentIndex++;
150
+ });
151
+ } else {
152
+ rule.native = insertRuleSafely(rule.text, index);
162
153
  }
163
154
  return insertedIndex;
164
155
  }
165
156
  detach() {
157
+ super.detach();
166
158
  const nativeSheet = this.cssRuntime.style?.sheet;
167
159
  if (nativeSheet && this.native?.parentStyleSheet) {
168
160
  const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
@@ -173,17 +165,22 @@ class RuntimeLayer extends Layer {
173
165
  }
174
166
  delete(key) {
175
167
  const deletedRule = super.delete(key);
176
- if (!deletedRule) return;
177
- if (this.native?.cssRules && 'nodes' in deletedRule) {
178
- for (const node of deletedRule.nodes){
179
- if (node.native) {
180
- const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, node.native);
181
- if (foundIndex !== -1) {
182
- // todo: Firefox throw "Uncaught NS_ERROR_FAILURE". Reproduce: Add '@fade|1s @fade|2s' and remove '@fade|1s @fade|2s'
183
- this.native.deleteRule(foundIndex);
184
- }
168
+ if (!deletedRule || !this.native) return;
169
+ const deleteRuleSafely = (rule)=>{
170
+ if (!rule) return;
171
+ const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, rule);
172
+ if (foundIndex !== -1) {
173
+ try {
174
+ this.native.deleteRule(foundIndex);
175
+ } catch (error) {
176
+ console.error(error, rule);
185
177
  }
186
178
  }
179
+ };
180
+ if ('nodes' in deletedRule) {
181
+ deletedRule.nodes.forEach((node)=>deleteRuleSafely(node.native));
182
+ } else {
183
+ deleteRuleSafely(deletedRule.native);
187
184
  }
188
185
  return deletedRule;
189
186
  }
@@ -228,12 +225,6 @@ class CSSRuntime extends MasterCSS {
228
225
  this.container = this.root;
229
226
  this.host = this.root.host;
230
227
  }
231
- this.supportVendors = new Set();
232
- const styleDeclaration = document.documentElement.style;
233
- if ('webkitTransform' in styleDeclaration) this.supportVendors.add('webkit');
234
- if ('MozTransform' in styleDeclaration) this.supportVendors.add('moz');
235
- if ('msTransform' in styleDeclaration) this.supportVendors.add('ms');
236
- if ('OTransform' in styleDeclaration) this.supportVendors.add('o');
237
228
  globalThis.CSSRuntime.instances.set(this.root, this);
238
229
  __MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:created', {
239
230
  cssRuntime: this
@@ -250,8 +241,10 @@ class CSSRuntime extends MasterCSS {
250
241
  const { ownerNode } = sheet;
251
242
  if (ownerNode && ownerNode.id === 'master') {
252
243
  this.style = ownerNode;
253
- // @ts-ignore
254
- this.progressive = true;
244
+ if (this.style.sheet?.cssRules.length) {
245
+ // @ts-ignore
246
+ this.progressive = true;
247
+ }
255
248
  break;
256
249
  }
257
250
  }
@@ -283,7 +276,7 @@ class CSSRuntime extends MasterCSS {
283
276
  this.style.id = 'master';
284
277
  this.container.append(this.style);
285
278
  this.style.sheet.insertRule(this.layerStatementRule.text);
286
- this.layerStatementRule.nodes[0].native = this.style.sheet.cssRules.item(0);
279
+ this.layerStatementRule.native = this.style.sheet.cssRules.item(0);
287
280
  for (const eachConnectedName of connectedNames){
288
281
  this.add(eachConnectedName);
289
282
  }
@@ -422,20 +415,32 @@ class CSSRuntime extends MasterCSS {
422
415
  if (eachNativeCSSRule.name === 'theme') {
423
416
  this.themeLayer.native = eachCSSLayerRule;
424
417
  let variableRule;
425
- let lastVariableName;
426
- for(let j = 0; j < eachCSSLayerRule.cssRules.length; j++){
427
- const cssRule = eachCSSLayerRule.cssRules[j];
418
+ const unresolvedCSSRules = new Map();
419
+ for (const rule of eachCSSLayerRule.cssRules){
420
+ // trim() for fix the firefox bug that the cssText ends with \n\n
421
+ unresolvedCSSRules.set(rule.cssText.trim(), rule);
422
+ }
423
+ for (const cssRule of eachCSSLayerRule.cssRules){
424
+ if (!unresolvedCSSRules.has(cssRule.cssText)) continue;
428
425
  const variableCSSRule = cssRule.constructor.name === 'CSSMediaRule' ? cssRule.cssRules[0] : cssRule;
429
426
  const variableName = variableCSSRule.style[0].slice(2);
430
- if (variableName !== lastVariableName) {
431
- lastVariableName = variableName;
432
- variableRule = new Rule(variableName);
433
- this.themeLayer.rules.push(variableRule);
434
- this.themeLayer.tokenCounts.set(variableRule.name, 0);
435
- }
436
- variableRule?.nodes.push({
437
- native: cssRule,
438
- text: cssRule.cssText
427
+ const variable = this.variables.get(variableName);
428
+ if (!variable) continue;
429
+ variableRule = new VariableRule(variableName, variable, this);
430
+ this.themeLayer.rules.push(variableRule);
431
+ this.themeLayer.tokenCounts.set(variableRule.name, 0);
432
+ variableRule.nodes.forEach((node)=>{
433
+ const checkRuleIndex = checkSheet.insertRule(node.text);
434
+ const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
435
+ if (checkNodeNativeRule) {
436
+ const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
437
+ const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
438
+ if (match) {
439
+ node.native = match;
440
+ unresolvedCSSRules.delete(checkNodeNativeRuleText);
441
+ return;
442
+ }
443
+ }
439
444
  });
440
445
  }
441
446
  if (this.themeLayer.rules.length) this.rules.push(this.themeLayer);
@@ -443,15 +448,13 @@ class CSSRuntime extends MasterCSS {
443
448
  cssLayerRules.push(eachCSSLayerRule);
444
449
  }
445
450
  } else if (eachNativeCSSRule.constructor.name === 'CSSLayerStatementRule') {
446
- this.layerStatementRule.nodes[0].native = eachNativeCSSRule;
451
+ this.layerStatementRule.native = eachNativeCSSRule;
447
452
  } else if (eachNativeCSSRule.constructor.name === 'CSSKeyframesRule') {
448
- const keyframsRule = eachNativeCSSRule;
449
- const animationRule = new Rule(keyframsRule.name, [
450
- {
451
- native: keyframsRule,
452
- text: keyframsRule.cssText
453
- }
454
- ]);
453
+ const nativeKeyframsRule = eachNativeCSSRule;
454
+ const keyframes = this.animations.get(nativeKeyframsRule.name);
455
+ if (!keyframes) continue;
456
+ const animationRule = new AnimationRule(nativeKeyframsRule.name, keyframes, this);
457
+ animationRule.native = nativeKeyframsRule;
455
458
  this.animationsNonLayer.rules.push(animationRule);
456
459
  this.rules.push(animationRule);
457
460
  this.animationsNonLayer.tokenCounts.set(animationRule.name, 0);
@@ -479,7 +482,8 @@ class CSSRuntime extends MasterCSS {
479
482
  layer.native = eachCSSLayerRule;
480
483
  const unresolvedCSSRules = new Map();
481
484
  for (const rule of eachCSSLayerRule.cssRules){
482
- unresolvedCSSRules.set(rule.cssText, rule);
485
+ // trim() for fix the firefox bug that the cssText ends with \n\n
486
+ unresolvedCSSRules.set(rule.cssText.trim(), rule);
483
487
  }
484
488
  for (const eachNativeLayerRule of eachCSSLayerRule.cssRules){
485
489
  if (!unresolvedCSSRules.has(eachNativeLayerRule.cssText)) continue;
@@ -495,18 +499,24 @@ class CSSRuntime extends MasterCSS {
495
499
  layer.insertVariables(createdRule);
496
500
  layer.insertAnimations(createdRule);
497
501
  result.allSyntaxRules.push(createdRule);
498
- createdRule.nodes.forEach((node)=>{
499
- const createdNodeNativeRule = checkSheet.cssRules.item(checkSheet.insertRule(node.text));
500
- if (createdNodeNativeRule) {
501
- const match = unresolvedCSSRules.get(createdNodeNativeRule.cssText);
502
+ try {
503
+ const checkRuleIndex = checkSheet.insertRule(createdRule.text);
504
+ const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
505
+ if (checkNodeNativeRule) {
506
+ const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
507
+ const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
502
508
  if (match) {
503
- node.native = match;
504
- unresolvedCSSRules.delete(createdNodeNativeRule.cssText);
505
- return;
509
+ createdRule.native = match;
510
+ unresolvedCSSRules.delete(checkNodeNativeRuleText);
511
+ continue;
506
512
  }
507
513
  }
508
- console.error(`Cannot retrieve CSS rule for \`${node.selectorText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
509
- });
514
+ console.error(`Cannot retrieve CSS rule for \`${createdRule.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
515
+ } catch (error) {
516
+ {
517
+ console.debug(`Cannot insert CSS rule for \`${createdRule.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
518
+ }
519
+ }
510
520
  }
511
521
  } else {
512
522
  console.error(`Cannot recognize \`${eachNativeLayerRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
@@ -592,4 +602,4 @@ class CSSRuntime extends MasterCSS {
592
602
  return cssRuntime;
593
603
  }
594
604
 
595
- export { CSSRuntime, initCSSRuntime };
605
+ export { CSSRuntime, RuntimeSyntaxLayer, initCSSRuntime };
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { Layer, withSyntaxLayer, MasterCSS, config, Rule } from '@master/css';
1
+ import { Layer, withSyntaxLayer, MasterCSS, config, VariableRule, AnimationRule } from '@master/css';
2
2
  import { installHook } from '@master/css-devtools-hook';
3
3
 
4
4
  function registerGlobal(CSSRuntime) {
@@ -34,43 +34,29 @@ class RuntimeLayer extends Layer {
34
34
  }
35
35
  insert(rule, index = this.rules.length) {
36
36
  const insertedIndex = super.insert(rule, index);
37
- if (insertedIndex === undefined) return;
38
- if (this.native) {
39
- let cssRuleIndex = 0;
40
- const lastCssRule = function getLastCssRule(layer, index) {
41
- let lastCssRule;
42
- const previouRule = layer.rules[index];
43
- if (previouRule && 'nodes' in previouRule) {
44
- if (!previouRule.nodes.length) return getLastCssRule(layer, index - 1);
45
- const lastNativeRule = previouRule.nodes[previouRule.nodes.length - 1];
46
- lastCssRule = lastNativeRule.native;
47
- }
48
- return lastCssRule;
49
- }(this, insertedIndex - 1);
50
- if (lastCssRule) {
51
- for(let i = 0; i < this.native.cssRules.length; i++){
52
- if (this.native.cssRules[i] === lastCssRule) {
53
- cssRuleIndex = i + 1;
54
- break;
55
- }
56
- }
57
- }
58
- for(let i = 0; i < rule.nodes.length;){
59
- try {
60
- const node = rule.nodes[i];
61
- const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
62
- node.native = this.native.cssRules.item(insertedIndex);
63
- cssRuleIndex++;
64
- i++;
65
- } catch (error) {
66
- console.error(error, rule.nodes[i]);
67
- rule.nodes.splice(i, 1);
68
- }
37
+ if (insertedIndex === undefined || !this.native) return;
38
+ const insertRuleSafely = (text, position)=>{
39
+ try {
40
+ const insertedIndex = this.native.insertRule(text, position);
41
+ return this.native.cssRules.item(insertedIndex);
42
+ } catch (error) {
43
+ console.error(error, rule);
44
+ return;
69
45
  }
46
+ };
47
+ if ('nodes' in rule) {
48
+ let currentIndex = insertedIndex;
49
+ rule.nodes.forEach((node)=>{
50
+ node.native = insertRuleSafely(node.text, currentIndex);
51
+ if (node.native) currentIndex++;
52
+ });
53
+ } else {
54
+ rule.native = insertRuleSafely(rule.text, index);
70
55
  }
71
56
  return insertedIndex;
72
57
  }
73
58
  detach() {
59
+ super.detach();
74
60
  const nativeSheet = this.cssRuntime.style?.sheet;
75
61
  if (nativeSheet && this.native?.parentStyleSheet) {
76
62
  const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
@@ -81,17 +67,22 @@ class RuntimeLayer extends Layer {
81
67
  }
82
68
  delete(key) {
83
69
  const deletedRule = super.delete(key);
84
- if (!deletedRule) return;
85
- if (this.native?.cssRules && 'nodes' in deletedRule) {
86
- for (const node of deletedRule.nodes){
87
- if (node.native) {
88
- const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, node.native);
89
- if (foundIndex !== -1) {
90
- // todo: Firefox throw "Uncaught NS_ERROR_FAILURE". Reproduce: Add '@fade|1s @fade|2s' and remove '@fade|1s @fade|2s'
91
- this.native.deleteRule(foundIndex);
92
- }
70
+ if (!deletedRule || !this.native) return;
71
+ const deleteRuleSafely = (rule)=>{
72
+ if (!rule) return;
73
+ const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, rule);
74
+ if (foundIndex !== -1) {
75
+ try {
76
+ this.native.deleteRule(foundIndex);
77
+ } catch (error) {
78
+ console.error(error, rule);
93
79
  }
94
80
  }
81
+ };
82
+ if ('nodes' in deletedRule) {
83
+ deletedRule.nodes.forEach((node)=>deleteRuleSafely(node.native));
84
+ } else {
85
+ deleteRuleSafely(deletedRule.native);
95
86
  }
96
87
  return deletedRule;
97
88
  }
@@ -136,12 +127,6 @@ class CSSRuntime extends MasterCSS {
136
127
  this.container = this.root;
137
128
  this.host = this.root.host;
138
129
  }
139
- this.supportVendors = new Set();
140
- const styleDeclaration = document.documentElement.style;
141
- if ('webkitTransform' in styleDeclaration) this.supportVendors.add('webkit');
142
- if ('MozTransform' in styleDeclaration) this.supportVendors.add('moz');
143
- if ('msTransform' in styleDeclaration) this.supportVendors.add('ms');
144
- if ('OTransform' in styleDeclaration) this.supportVendors.add('o');
145
130
  globalThis.CSSRuntime.instances.set(this.root, this);
146
131
  __MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:created', {
147
132
  cssRuntime: this
@@ -158,8 +143,10 @@ class CSSRuntime extends MasterCSS {
158
143
  const { ownerNode } = sheet;
159
144
  if (ownerNode && ownerNode.id === 'master') {
160
145
  this.style = ownerNode;
161
- // @ts-ignore
162
- this.progressive = true;
146
+ if (this.style.sheet?.cssRules.length) {
147
+ // @ts-ignore
148
+ this.progressive = true;
149
+ }
163
150
  break;
164
151
  }
165
152
  }
@@ -187,7 +174,7 @@ class CSSRuntime extends MasterCSS {
187
174
  this.style.id = 'master';
188
175
  this.container.append(this.style);
189
176
  this.style.sheet.insertRule(this.layerStatementRule.text);
190
- this.layerStatementRule.nodes[0].native = this.style.sheet.cssRules.item(0);
177
+ this.layerStatementRule.native = this.style.sheet.cssRules.item(0);
191
178
  for (const eachConnectedName of connectedNames){
192
179
  this.add(eachConnectedName);
193
180
  }
@@ -326,20 +313,32 @@ class CSSRuntime extends MasterCSS {
326
313
  if (eachNativeCSSRule.name === 'theme') {
327
314
  this.themeLayer.native = eachCSSLayerRule;
328
315
  let variableRule;
329
- let lastVariableName;
330
- for(let j = 0; j < eachCSSLayerRule.cssRules.length; j++){
331
- const cssRule = eachCSSLayerRule.cssRules[j];
316
+ const unresolvedCSSRules = new Map();
317
+ for (const rule of eachCSSLayerRule.cssRules){
318
+ // trim() for fix the firefox bug that the cssText ends with \n\n
319
+ unresolvedCSSRules.set(rule.cssText.trim(), rule);
320
+ }
321
+ for (const cssRule of eachCSSLayerRule.cssRules){
322
+ if (!unresolvedCSSRules.has(cssRule.cssText)) continue;
332
323
  const variableCSSRule = cssRule.constructor.name === 'CSSMediaRule' ? cssRule.cssRules[0] : cssRule;
333
324
  const variableName = variableCSSRule.style[0].slice(2);
334
- if (variableName !== lastVariableName) {
335
- lastVariableName = variableName;
336
- variableRule = new 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
325
+ const variable = this.variables.get(variableName);
326
+ if (!variable) continue;
327
+ variableRule = new VariableRule(variableName, variable, this);
328
+ this.themeLayer.rules.push(variableRule);
329
+ this.themeLayer.tokenCounts.set(variableRule.name, 0);
330
+ variableRule.nodes.forEach((node)=>{
331
+ const checkRuleIndex = checkSheet.insertRule(node.text);
332
+ const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
333
+ if (checkNodeNativeRule) {
334
+ const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
335
+ const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
336
+ if (match) {
337
+ node.native = match;
338
+ unresolvedCSSRules.delete(checkNodeNativeRuleText);
339
+ return;
340
+ }
341
+ }
343
342
  });
344
343
  }
345
344
  if (this.themeLayer.rules.length) this.rules.push(this.themeLayer);
@@ -347,15 +346,13 @@ class CSSRuntime extends MasterCSS {
347
346
  cssLayerRules.push(eachCSSLayerRule);
348
347
  }
349
348
  } else if (eachNativeCSSRule.constructor.name === 'CSSLayerStatementRule') {
350
- this.layerStatementRule.nodes[0].native = eachNativeCSSRule;
349
+ this.layerStatementRule.native = eachNativeCSSRule;
351
350
  } else if (eachNativeCSSRule.constructor.name === 'CSSKeyframesRule') {
352
- const keyframsRule = eachNativeCSSRule;
353
- const animationRule = new Rule(keyframsRule.name, [
354
- {
355
- native: keyframsRule,
356
- text: keyframsRule.cssText
357
- }
358
- ]);
351
+ const nativeKeyframsRule = eachNativeCSSRule;
352
+ const keyframes = this.animations.get(nativeKeyframsRule.name);
353
+ if (!keyframes) continue;
354
+ const animationRule = new AnimationRule(nativeKeyframsRule.name, keyframes, this);
355
+ animationRule.native = nativeKeyframsRule;
359
356
  this.animationsNonLayer.rules.push(animationRule);
360
357
  this.rules.push(animationRule);
361
358
  this.animationsNonLayer.tokenCounts.set(animationRule.name, 0);
@@ -383,7 +380,8 @@ class CSSRuntime extends MasterCSS {
383
380
  layer.native = eachCSSLayerRule;
384
381
  const unresolvedCSSRules = new Map();
385
382
  for (const rule of eachCSSLayerRule.cssRules){
386
- unresolvedCSSRules.set(rule.cssText, rule);
383
+ // trim() for fix the firefox bug that the cssText ends with \n\n
384
+ unresolvedCSSRules.set(rule.cssText.trim(), rule);
387
385
  }
388
386
  for (const eachNativeLayerRule of eachCSSLayerRule.cssRules){
389
387
  if (!unresolvedCSSRules.has(eachNativeLayerRule.cssText)) continue;
@@ -399,18 +397,21 @@ class CSSRuntime extends MasterCSS {
399
397
  layer.insertVariables(createdRule);
400
398
  layer.insertAnimations(createdRule);
401
399
  result.allSyntaxRules.push(createdRule);
402
- createdRule.nodes.forEach((node)=>{
403
- const createdNodeNativeRule = checkSheet.cssRules.item(checkSheet.insertRule(node.text));
404
- if (createdNodeNativeRule) {
405
- const match = unresolvedCSSRules.get(createdNodeNativeRule.cssText);
400
+ try {
401
+ const checkRuleIndex = checkSheet.insertRule(createdRule.text);
402
+ const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
403
+ if (checkNodeNativeRule) {
404
+ const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
405
+ const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
406
406
  if (match) {
407
- node.native = match;
408
- unresolvedCSSRules.delete(createdNodeNativeRule.cssText);
409
- return;
407
+ createdRule.native = match;
408
+ unresolvedCSSRules.delete(checkNodeNativeRuleText);
409
+ continue;
410
410
  }
411
411
  }
412
- console.error(`Cannot retrieve CSS rule for \`${node.selectorText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
413
- });
412
+ console.error(`Cannot retrieve CSS rule for \`${createdRule.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
413
+ } catch (error) {
414
+ }
414
415
  }
415
416
  } else {
416
417
  console.error(`Cannot recognize \`${eachNativeLayerRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
@@ -496,4 +497,4 @@ class CSSRuntime extends MasterCSS {
496
497
  return cssRuntime;
497
498
  }
498
499
 
499
- export { CSSRuntime, CSSRuntime as default, initCSSRuntime };
500
+ export { CSSRuntime, RuntimeSyntaxLayer, CSSRuntime as default, initCSSRuntime };
package/dist/layer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Layer, Rule } from '@master/css';
1
+ import { Layer, Rule, VariableRule } from '@master/css';
2
2
  import CSSRuntime from './core';
3
3
  export default class RuntimeLayer extends Layer {
4
4
  name: string;
@@ -8,8 +8,8 @@ export default class RuntimeLayer extends Layer {
8
8
  native: CSSLayerBlockRule | null;
9
9
  constructor(name: string, cssRuntime: CSSRuntime);
10
10
  attach(): void;
11
- insert(rule: Rule, index?: number): number | undefined;
11
+ insert(rule: Rule | VariableRule, index?: number): number | undefined;
12
12
  detach(): void;
13
- delete(key: string): Rule | undefined;
13
+ delete(key: string): Rule | VariableRule | undefined;
14
14
  reset(): void;
15
15
  }
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@master/css-runtime","type":"module","scripts":{"build":"techor build","dev":"pnpm build --watch","e2e":"playwright test","e2e:watch":"nodemon -e js,mjs,ts,html,css --watch dist --watch e2e --exec playwright test","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"Run Master CSS right in the browser","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/runtime"},"keywords":["utility","css","lightweight","mastercss","master","runtime","cdn"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","browser":"./dist/global.min.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":{"development":"./dist/index.development.cjs","default":"./dist/index.cjs"},"import":{"development":"./dist/index.development.mjs","default":"./dist/index.mjs"}}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css":"^2.0.0-rc.60","@master/css-devtools-hook":"^2.0.0-rc.60"},"devDependencies":{"@playwright/test":"^1.49.1","shared":"^2.0.0-rc.60"},"version":"2.0.0-rc.60"}
1
+ {"name":"@master/css-runtime","type":"module","scripts":{"build":"techor build","dev":"pnpm build --watch","e2e":"playwright test","e2e:watch":"nodemon -e js,mjs,ts,html,css --watch dist --watch e2e --exec playwright test","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"Run Master CSS right in the browser","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/runtime"},"keywords":["utility","css","lightweight","mastercss","master","runtime","cdn"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","browser":"./dist/global.min.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":{"development":"./dist/index.development.cjs","default":"./dist/index.cjs"},"import":{"development":"./dist/index.development.mjs","default":"./dist/index.mjs"}}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css":"^2.0.0-rc.62","@master/css-devtools-hook":"^2.0.0-rc.62"},"devDependencies":{"@playwright/test":"^1.49.1","shared":"^2.0.0-rc.62"},"version":"2.0.0-rc.62"}