@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.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
- try {
64
- const node = rule.nodes[i];
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, rule.nodes[i]);
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
  }
@@ -140,12 +131,6 @@ class CSSRuntime extends css.MasterCSS {
140
131
  this.container = this.root;
141
132
  this.host = this.root.host;
142
133
  }
143
- this.supportVendors = new Set();
144
- const styleDeclaration = document.documentElement.style;
145
- if ('webkitTransform' in styleDeclaration) this.supportVendors.add('webkit');
146
- if ('MozTransform' in styleDeclaration) this.supportVendors.add('moz');
147
- if ('msTransform' in styleDeclaration) this.supportVendors.add('ms');
148
- if ('OTransform' in styleDeclaration) this.supportVendors.add('o');
149
134
  globalThis.CSSRuntime.instances.set(this.root, this);
150
135
  __MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:created', {
151
136
  cssRuntime: this
@@ -162,8 +147,10 @@ class CSSRuntime extends css.MasterCSS {
162
147
  const { ownerNode } = sheet;
163
148
  if (ownerNode && ownerNode.id === 'master') {
164
149
  this.style = ownerNode;
165
- // @ts-ignore
166
- this.progressive = true;
150
+ if (this.style.sheet?.cssRules.length) {
151
+ // @ts-ignore
152
+ this.progressive = true;
153
+ }
167
154
  break;
168
155
  }
169
156
  }
@@ -191,7 +178,7 @@ class CSSRuntime extends css.MasterCSS {
191
178
  this.style.id = 'master';
192
179
  this.container.append(this.style);
193
180
  this.style.sheet.insertRule(this.layerStatementRule.text);
194
- this.layerStatementRule.nodes[0].native = this.style.sheet.cssRules.item(0);
181
+ this.layerStatementRule.native = this.style.sheet.cssRules.item(0);
195
182
  for (const eachConnectedName of connectedNames){
196
183
  this.add(eachConnectedName);
197
184
  }
@@ -330,20 +317,32 @@ class CSSRuntime extends css.MasterCSS {
330
317
  if (eachNativeCSSRule.name === 'theme') {
331
318
  this.themeLayer.native = eachCSSLayerRule;
332
319
  let variableRule;
333
- let lastVariableName;
334
- for(let j = 0; j < eachCSSLayerRule.cssRules.length; j++){
335
- 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;
336
327
  const variableCSSRule = cssRule.constructor.name === 'CSSMediaRule' ? cssRule.cssRules[0] : cssRule;
337
328
  const variableName = variableCSSRule.style[0].slice(2);
338
- if (variableName !== lastVariableName) {
339
- lastVariableName = variableName;
340
- variableRule = new css.Rule(variableName);
341
- this.themeLayer.rules.push(variableRule);
342
- this.themeLayer.tokenCounts.set(variableRule.name, 0);
343
- }
344
- variableRule?.nodes.push({
345
- native: cssRule,
346
- 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
+ }
347
346
  });
348
347
  }
349
348
  if (this.themeLayer.rules.length) this.rules.push(this.themeLayer);
@@ -351,15 +350,13 @@ class CSSRuntime extends css.MasterCSS {
351
350
  cssLayerRules.push(eachCSSLayerRule);
352
351
  }
353
352
  } else if (eachNativeCSSRule.constructor.name === 'CSSLayerStatementRule') {
354
- this.layerStatementRule.nodes[0].native = eachNativeCSSRule;
353
+ this.layerStatementRule.native = eachNativeCSSRule;
355
354
  } else if (eachNativeCSSRule.constructor.name === 'CSSKeyframesRule') {
356
- const keyframsRule = eachNativeCSSRule;
357
- const animationRule = new css.Rule(keyframsRule.name, [
358
- {
359
- native: keyframsRule,
360
- text: keyframsRule.cssText
361
- }
362
- ]);
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;
363
360
  this.animationsNonLayer.rules.push(animationRule);
364
361
  this.rules.push(animationRule);
365
362
  this.animationsNonLayer.tokenCounts.set(animationRule.name, 0);
@@ -387,7 +384,8 @@ class CSSRuntime extends css.MasterCSS {
387
384
  layer.native = eachCSSLayerRule;
388
385
  const unresolvedCSSRules = new Map();
389
386
  for (const rule of eachCSSLayerRule.cssRules){
390
- unresolvedCSSRules.set(rule.cssText, rule);
387
+ // trim() for fix the firefox bug that the cssText ends with \n\n
388
+ unresolvedCSSRules.set(rule.cssText.trim(), rule);
391
389
  }
392
390
  for (const eachNativeLayerRule of eachCSSLayerRule.cssRules){
393
391
  if (!unresolvedCSSRules.has(eachNativeLayerRule.cssText)) continue;
@@ -403,18 +401,21 @@ class CSSRuntime extends css.MasterCSS {
403
401
  layer.insertVariables(createdRule);
404
402
  layer.insertAnimations(createdRule);
405
403
  result.allSyntaxRules.push(createdRule);
406
- createdRule.nodes.forEach((node)=>{
407
- const createdNodeNativeRule = checkSheet.cssRules.item(checkSheet.insertRule(node.text));
408
- if (createdNodeNativeRule) {
409
- const match = unresolvedCSSRules.get(createdNodeNativeRule.cssText);
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
410
  if (match) {
411
- node.native = match;
412
- unresolvedCSSRules.delete(createdNodeNativeRule.cssText);
413
- return;
411
+ createdRule.native = match;
412
+ unresolvedCSSRules.delete(checkNodeNativeRuleText);
413
+ continue;
414
414
  }
415
415
  }
416
- console.error(`Cannot retrieve CSS rule for \`${node.selectorText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
417
- });
416
+ console.error(`Cannot retrieve CSS rule for \`${createdRule.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
417
+ } catch (error) {
418
+ }
418
419
  }
419
420
  } else {
420
421
  console.error(`Cannot recognize \`${eachNativeLayerRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
@@ -501,5 +502,6 @@ class CSSRuntime extends css.MasterCSS {
501
502
  }
502
503
 
503
504
  exports.CSSRuntime = CSSRuntime;
505
+ exports.RuntimeSyntaxLayer = RuntimeSyntaxLayer;
504
506
  exports.default = CSSRuntime;
505
507
  exports.initCSSRuntime = initCSSRuntime;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { default as CSSRuntime, default } from './core';
2
2
  export { default as initCSSRuntime } from './init';
3
+ export { default as RuntimeSyntaxLayer } from './syntax-layer';
3
4
  export type * from './types';
4
- export type * from './syntax-layer';
5
+ export * from './syntax-layer';
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
  });
@@ -67,22 +67,28 @@ function registerClassCountDebugger() {
67
67
  function registerLifecycleDebugger() {
68
68
  const hook = globalThis.__MASTER_CSS_DEVTOOLS_HOOK__;
69
69
  hook.on('runtime:created', ({ cssRuntime })=>{
70
- log.debug('Runtime created:', cssRuntime);
70
+ log.debug('created', cssRuntime);
71
71
  });
72
72
  hook.on('runtime:hydrated', ({ cssRuntime })=>{
73
- log.debug('Runtime hydrated:', cssRuntime);
73
+ log.debug('hydrated', cssRuntime);
74
74
  });
75
75
  hook.on('runtime:observed', ({ cssRuntime })=>{
76
- log.debug('Runtime observed:', cssRuntime);
76
+ log.debug('observed', cssRuntime);
77
+ if (cssRuntime.progressive) {
78
+ log.info('Progressive rendering is adopted.');
79
+ log.debug('pre-rendered CSS', cssRuntime.style);
80
+ } else {
81
+ log.info('Runtime rendering is adopted.');
82
+ }
77
83
  });
78
84
  hook.on('runtime:refreshed', ({ cssRuntime, customConfig })=>{
79
- log.debug('Runtime refreshed:', cssRuntime, customConfig);
85
+ log.debug('refreshed', cssRuntime, customConfig);
80
86
  });
81
87
  hook.on('runtime:disconnected', ({ cssRuntime })=>{
82
- log.debug('Runtime disconnected:', cssRuntime);
88
+ log.debug('disconnected', cssRuntime);
83
89
  });
84
90
  hook.on('runtime:destroyed', ({ cssRuntime })=>{
85
- log.debug('Runtime destroyed:', cssRuntime);
91
+ log.debug('destroyed', cssRuntime);
86
92
  });
87
93
  }
88
94
 
@@ -128,43 +134,29 @@ class RuntimeLayer extends css.Layer {
128
134
  }
129
135
  insert(rule, index = this.rules.length) {
130
136
  const insertedIndex = super.insert(rule, index);
131
- if (insertedIndex === undefined) return;
132
- if (this.native) {
133
- let cssRuleIndex = 0;
134
- const lastCssRule = function getLastCssRule(layer, index) {
135
- let lastCssRule;
136
- const previouRule = layer.rules[index];
137
- if (previouRule && 'nodes' in previouRule) {
138
- if (!previouRule.nodes.length) return getLastCssRule(layer, index - 1);
139
- const lastNativeRule = previouRule.nodes[previouRule.nodes.length - 1];
140
- lastCssRule = lastNativeRule.native;
141
- }
142
- return lastCssRule;
143
- }(this, insertedIndex - 1);
144
- if (lastCssRule) {
145
- for(let i = 0; i < this.native.cssRules.length; i++){
146
- if (this.native.cssRules[i] === lastCssRule) {
147
- cssRuleIndex = i + 1;
148
- break;
149
- }
150
- }
151
- }
152
- for(let i = 0; i < rule.nodes.length;){
153
- try {
154
- const node = rule.nodes[i];
155
- const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
156
- node.native = this.native.cssRules.item(insertedIndex);
157
- cssRuleIndex++;
158
- i++;
159
- } catch (error) {
160
- console.error(error, rule.nodes[i]);
161
- rule.nodes.splice(i, 1);
162
- }
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;
163
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);
164
155
  }
165
156
  return insertedIndex;
166
157
  }
167
158
  detach() {
159
+ super.detach();
168
160
  const nativeSheet = this.cssRuntime.style?.sheet;
169
161
  if (nativeSheet && this.native?.parentStyleSheet) {
170
162
  const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
@@ -175,17 +167,22 @@ class RuntimeLayer extends css.Layer {
175
167
  }
176
168
  delete(key) {
177
169
  const deletedRule = super.delete(key);
178
- if (!deletedRule) return;
179
- if (this.native?.cssRules && 'nodes' in deletedRule) {
180
- for (const node of deletedRule.nodes){
181
- if (node.native) {
182
- const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, node.native);
183
- if (foundIndex !== -1) {
184
- // todo: Firefox throw "Uncaught NS_ERROR_FAILURE". Reproduce: Add '@fade|1s @fade|2s' and remove '@fade|1s @fade|2s'
185
- this.native.deleteRule(foundIndex);
186
- }
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);
187
179
  }
188
180
  }
181
+ };
182
+ if ('nodes' in deletedRule) {
183
+ deletedRule.nodes.forEach((node)=>deleteRuleSafely(node.native));
184
+ } else {
185
+ deleteRuleSafely(deletedRule.native);
189
186
  }
190
187
  return deletedRule;
191
188
  }
@@ -230,12 +227,6 @@ class CSSRuntime extends css.MasterCSS {
230
227
  this.container = this.root;
231
228
  this.host = this.root.host;
232
229
  }
233
- this.supportVendors = new Set();
234
- const styleDeclaration = document.documentElement.style;
235
- if ('webkitTransform' in styleDeclaration) this.supportVendors.add('webkit');
236
- if ('MozTransform' in styleDeclaration) this.supportVendors.add('moz');
237
- if ('msTransform' in styleDeclaration) this.supportVendors.add('ms');
238
- if ('OTransform' in styleDeclaration) this.supportVendors.add('o');
239
230
  globalThis.CSSRuntime.instances.set(this.root, this);
240
231
  __MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:created', {
241
232
  cssRuntime: this
@@ -252,8 +243,10 @@ class CSSRuntime extends css.MasterCSS {
252
243
  const { ownerNode } = sheet;
253
244
  if (ownerNode && ownerNode.id === 'master') {
254
245
  this.style = ownerNode;
255
- // @ts-ignore
256
- this.progressive = true;
246
+ if (this.style.sheet?.cssRules.length) {
247
+ // @ts-ignore
248
+ this.progressive = true;
249
+ }
257
250
  break;
258
251
  }
259
252
  }
@@ -285,7 +278,7 @@ class CSSRuntime extends css.MasterCSS {
285
278
  this.style.id = 'master';
286
279
  this.container.append(this.style);
287
280
  this.style.sheet.insertRule(this.layerStatementRule.text);
288
- this.layerStatementRule.nodes[0].native = this.style.sheet.cssRules.item(0);
281
+ this.layerStatementRule.native = this.style.sheet.cssRules.item(0);
289
282
  for (const eachConnectedName of connectedNames){
290
283
  this.add(eachConnectedName);
291
284
  }
@@ -424,20 +417,32 @@ class CSSRuntime extends css.MasterCSS {
424
417
  if (eachNativeCSSRule.name === 'theme') {
425
418
  this.themeLayer.native = eachCSSLayerRule;
426
419
  let variableRule;
427
- let lastVariableName;
428
- for(let j = 0; j < eachCSSLayerRule.cssRules.length; j++){
429
- 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;
430
427
  const variableCSSRule = cssRule.constructor.name === 'CSSMediaRule' ? cssRule.cssRules[0] : cssRule;
431
428
  const variableName = variableCSSRule.style[0].slice(2);
432
- if (variableName !== lastVariableName) {
433
- lastVariableName = variableName;
434
- variableRule = new css.Rule(variableName);
435
- this.themeLayer.rules.push(variableRule);
436
- this.themeLayer.tokenCounts.set(variableRule.name, 0);
437
- }
438
- variableRule?.nodes.push({
439
- native: cssRule,
440
- 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
+ }
441
446
  });
442
447
  }
443
448
  if (this.themeLayer.rules.length) this.rules.push(this.themeLayer);
@@ -445,15 +450,13 @@ class CSSRuntime extends css.MasterCSS {
445
450
  cssLayerRules.push(eachCSSLayerRule);
446
451
  }
447
452
  } else if (eachNativeCSSRule.constructor.name === 'CSSLayerStatementRule') {
448
- this.layerStatementRule.nodes[0].native = eachNativeCSSRule;
453
+ this.layerStatementRule.native = eachNativeCSSRule;
449
454
  } else if (eachNativeCSSRule.constructor.name === 'CSSKeyframesRule') {
450
- const keyframsRule = eachNativeCSSRule;
451
- const animationRule = new css.Rule(keyframsRule.name, [
452
- {
453
- native: keyframsRule,
454
- text: keyframsRule.cssText
455
- }
456
- ]);
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;
457
460
  this.animationsNonLayer.rules.push(animationRule);
458
461
  this.rules.push(animationRule);
459
462
  this.animationsNonLayer.tokenCounts.set(animationRule.name, 0);
@@ -481,7 +484,8 @@ class CSSRuntime extends css.MasterCSS {
481
484
  layer.native = eachCSSLayerRule;
482
485
  const unresolvedCSSRules = new Map();
483
486
  for (const rule of eachCSSLayerRule.cssRules){
484
- unresolvedCSSRules.set(rule.cssText, rule);
487
+ // trim() for fix the firefox bug that the cssText ends with \n\n
488
+ unresolvedCSSRules.set(rule.cssText.trim(), rule);
485
489
  }
486
490
  for (const eachNativeLayerRule of eachCSSLayerRule.cssRules){
487
491
  if (!unresolvedCSSRules.has(eachNativeLayerRule.cssText)) continue;
@@ -497,18 +501,24 @@ class CSSRuntime extends css.MasterCSS {
497
501
  layer.insertVariables(createdRule);
498
502
  layer.insertAnimations(createdRule);
499
503
  result.allSyntaxRules.push(createdRule);
500
- createdRule.nodes.forEach((node)=>{
501
- const createdNodeNativeRule = checkSheet.cssRules.item(checkSheet.insertRule(node.text));
502
- if (createdNodeNativeRule) {
503
- const match = unresolvedCSSRules.get(createdNodeNativeRule.cssText);
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);
504
510
  if (match) {
505
- node.native = match;
506
- unresolvedCSSRules.delete(createdNodeNativeRule.cssText);
507
- return;
511
+ createdRule.native = match;
512
+ unresolvedCSSRules.delete(checkNodeNativeRuleText);
513
+ continue;
508
514
  }
509
515
  }
510
- console.error(`Cannot retrieve CSS rule for \`${node.selectorText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
511
- });
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
+ }
512
522
  }
513
523
  } else {
514
524
  console.error(`Cannot recognize \`${eachNativeLayerRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
@@ -595,4 +605,5 @@ class CSSRuntime extends css.MasterCSS {
595
605
  }
596
606
 
597
607
  exports.CSSRuntime = CSSRuntime;
608
+ exports.RuntimeSyntaxLayer = RuntimeSyntaxLayer;
598
609
  exports.initCSSRuntime = initCSSRuntime;