@master/css-runtime 2.0.0-rc.71 → 2.0.0-rc.72
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.
- package/dist/core.d.ts +1 -0
- package/dist/debuggers/class-count.d.ts +2 -1
- package/dist/debuggers/index.d.ts +2 -0
- package/dist/debuggers/lifecycle.d.ts +9 -1
- package/dist/default-manifest.json +1 -1
- package/dist/global.min.js +1 -1
- package/dist/index.development.mjs +118 -96
- package/dist/index.mjs +46 -37
- package/dist/theme-layer.d.ts +4 -1
- package/package.json +1 -1
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Layer, AnimationRule, VariableRule, compareRulePriority, ThemeLayer, MasterCSS } from '@master/css-engine';
|
|
2
2
|
import { MASTER_CSS_HYDRATION_MANIFEST_ATTR, MASTER_CSS_HYDRATION_MANIFEST_SCRIPT_ID } from '@master/css-schema/hydration-manifest';
|
|
3
3
|
import { MASTER_CSS_RUNTIME_STYLE_ID } from '@master/css-schema/runtime-style';
|
|
4
|
-
import { installHook } from '@master/css-devtools-hook';
|
|
5
4
|
|
|
6
5
|
const createLogger = (type)=>{
|
|
7
6
|
return (message, ...args)=>{
|
|
@@ -27,42 +26,39 @@ const loggers = {
|
|
|
27
26
|
const log = createLogger();
|
|
28
27
|
Object.assign(log, loggers);
|
|
29
28
|
|
|
30
|
-
function
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
} else {
|
|
39
|
-
actualClassCounts[className] = 1;
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
(cssRuntime.root.constructor.name === 'HTMLDocument' ? cssRuntime.host : cssRuntime.container).querySelectorAll('[class]').forEach((element)=>{
|
|
43
|
-
element.classList.forEach(resolveClass);
|
|
44
|
-
});
|
|
45
|
-
cssRuntime.host.classList.forEach(resolveClass);
|
|
46
|
-
for(const className in actualClassCounts){
|
|
47
|
-
const eachCount = cssRuntime.classCounts.get(className);
|
|
48
|
-
const eachActualCount = actualClassCounts[className];
|
|
49
|
-
if (eachCount !== eachActualCount) {
|
|
50
|
-
log.error(`Class count mismatch for \`${className}\` (expected ${eachActualCount}) (received ${eachCount})`);
|
|
51
|
-
errored = true;
|
|
52
|
-
}
|
|
29
|
+
function debugRuntimeMutation(records, classCounts, cssRuntime) {
|
|
30
|
+
const actualClassCounts = {};
|
|
31
|
+
let errored = false;
|
|
32
|
+
const resolveClass = (className)=>{
|
|
33
|
+
if (Object.prototype.hasOwnProperty.call(actualClassCounts, className)) {
|
|
34
|
+
actualClassCounts[className]++;
|
|
35
|
+
} else {
|
|
36
|
+
actualClassCounts[className] = 1;
|
|
53
37
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
log.
|
|
38
|
+
};
|
|
39
|
+
(cssRuntime.root.constructor.name === 'HTMLDocument' ? cssRuntime.host : cssRuntime.container).querySelectorAll('[class]').forEach((element)=>{
|
|
40
|
+
element.classList.forEach(resolveClass);
|
|
41
|
+
});
|
|
42
|
+
cssRuntime.host.classList.forEach(resolveClass);
|
|
43
|
+
for(const className in actualClassCounts){
|
|
44
|
+
const eachCount = cssRuntime.classCounts.get(className);
|
|
45
|
+
const eachActualCount = actualClassCounts[className];
|
|
46
|
+
if (eachCount !== eachActualCount) {
|
|
47
|
+
log.error(`Class count mismatch for \`${className}\` (expected ${eachActualCount}) (received ${eachCount})`);
|
|
48
|
+
errored = true;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
cssRuntime.classCounts.forEach((eachCount, className)=>{
|
|
52
|
+
if (!Object.prototype.hasOwnProperty.call(actualClassCounts, className)) {
|
|
53
|
+
log.error(`Class count mismatch for \`${className}\` (expected ${0}) (received ${eachCount})`);
|
|
54
|
+
errored = true;
|
|
64
55
|
}
|
|
65
56
|
});
|
|
57
|
+
if (errored) {
|
|
58
|
+
log.debug('Records:', records);
|
|
59
|
+
log.debug('Serialized Records:', serializeMutations(records));
|
|
60
|
+
log.debug('Counts:', classCounts);
|
|
61
|
+
}
|
|
66
62
|
}
|
|
67
63
|
function serializeMutations(mutations) {
|
|
68
64
|
return mutations.map((m)=>{
|
|
@@ -90,43 +86,37 @@ function serializeMutations(mutations) {
|
|
|
90
86
|
});
|
|
91
87
|
}
|
|
92
88
|
|
|
93
|
-
function
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
log.
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
hook.on('runtime:destroyed', ({ cssRuntime })=>{
|
|
117
|
-
log.debug('destroyed', cssRuntime);
|
|
118
|
-
});
|
|
89
|
+
function debugRuntimeCreated(cssRuntime) {
|
|
90
|
+
log.debug('created', cssRuntime);
|
|
91
|
+
}
|
|
92
|
+
function debugRuntimeHydrated(cssRuntime, result) {
|
|
93
|
+
log.debug('hydrated', cssRuntime, result);
|
|
94
|
+
}
|
|
95
|
+
function debugRuntimeObserved(cssRuntime) {
|
|
96
|
+
log.debug('observed', cssRuntime);
|
|
97
|
+
if (cssRuntime.progressive) {
|
|
98
|
+
log.info('Progressive rendering is adopted.');
|
|
99
|
+
log.debug('pre-rendered CSS', cssRuntime.style);
|
|
100
|
+
} else {
|
|
101
|
+
log.info('Runtime rendering is adopted.');
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
function debugRuntimeRefreshed(cssRuntime, manifest) {
|
|
105
|
+
log.debug('refreshed', cssRuntime, manifest);
|
|
106
|
+
}
|
|
107
|
+
function debugRuntimeDisconnected(cssRuntime) {
|
|
108
|
+
log.debug('disconnected', cssRuntime);
|
|
109
|
+
}
|
|
110
|
+
function debugRuntimeDestroyed(cssRuntime) {
|
|
111
|
+
log.debug('destroyed', cssRuntime);
|
|
119
112
|
}
|
|
120
113
|
|
|
121
114
|
function startDebuggers() {
|
|
122
115
|
log.info('Debug mode is enabled by default in development.');
|
|
123
|
-
registerClassCountDebugger();
|
|
124
|
-
registerLifecycleDebugger();
|
|
125
116
|
}
|
|
126
117
|
|
|
127
118
|
function registerGlobal(CSSRuntime) {
|
|
128
119
|
if (!globalThis.MasterCSSRuntime) globalThis.MasterCSSRuntime = CSSRuntime;
|
|
129
|
-
installHook();
|
|
130
120
|
{
|
|
131
121
|
startDebuggers();
|
|
132
122
|
}
|
|
@@ -387,6 +377,21 @@ class RuntimeThemeLayer extends ThemeLayer {
|
|
|
387
377
|
const normalizedSelectorText = selectorText.replace(/\s*,\s*/g, ',').replace(/\s+/g, ' ').trim();
|
|
388
378
|
return normalizedMediaText + '\n' + normalizedSelectorText;
|
|
389
379
|
}
|
|
380
|
+
setBucketSyntheticDeclarations(bucket, mode) {
|
|
381
|
+
for (const { name, value } of this.getBucketSyntheticDeclarations({
|
|
382
|
+
mediaText: bucket.mediaText,
|
|
383
|
+
mode,
|
|
384
|
+
selectorText: bucket.selectorText
|
|
385
|
+
})){
|
|
386
|
+
bucket.styleRule.style.setProperty(name, value);
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
hasVariableDeclarations(styleRule) {
|
|
390
|
+
for(let index = 0; index < styleRule.style.length; index++){
|
|
391
|
+
if (styleRule.style.item(index).startsWith('--')) return true;
|
|
392
|
+
}
|
|
393
|
+
return false;
|
|
394
|
+
}
|
|
390
395
|
getStyleRule(nativeRule) {
|
|
391
396
|
if (nativeRule instanceof CSSStyleRule) return nativeRule;
|
|
392
397
|
if (nativeRule instanceof CSSGroupingRule) {
|
|
@@ -411,12 +416,20 @@ class RuntimeThemeLayer extends ThemeLayer {
|
|
|
411
416
|
});
|
|
412
417
|
}
|
|
413
418
|
}
|
|
414
|
-
ensureNativeBucket(mediaText, selectorText) {
|
|
419
|
+
ensureNativeBucket(mediaText, selectorText, mode) {
|
|
415
420
|
if (!this.native) return;
|
|
416
421
|
const key = this.getBucketKey(mediaText, selectorText);
|
|
417
422
|
let bucket = this.nativeBuckets.get(key);
|
|
418
|
-
if (bucket)
|
|
419
|
-
|
|
423
|
+
if (bucket) {
|
|
424
|
+
this.setBucketSyntheticDeclarations(bucket, mode);
|
|
425
|
+
return bucket;
|
|
426
|
+
}
|
|
427
|
+
const declarationText = this.getBucketSyntheticDeclarations({
|
|
428
|
+
mediaText,
|
|
429
|
+
mode,
|
|
430
|
+
selectorText
|
|
431
|
+
}).map(({ name, value })=>`${name}:${value}`).join(';');
|
|
432
|
+
const text = mediaText ? `${mediaText}{${selectorText}{${declarationText}}}` : `${selectorText}{${declarationText}}`;
|
|
420
433
|
const insertedIndex = this.native.insertRule(text, this.getNativeBucketInsertIndex(mediaText, selectorText));
|
|
421
434
|
const nativeRule = this.native.cssRules.item(insertedIndex);
|
|
422
435
|
if (!nativeRule) return;
|
|
@@ -425,6 +438,7 @@ class RuntimeThemeLayer extends ThemeLayer {
|
|
|
425
438
|
const newBucket = {
|
|
426
439
|
key,
|
|
427
440
|
mediaText,
|
|
441
|
+
mode,
|
|
428
442
|
selectorText,
|
|
429
443
|
nativeRule,
|
|
430
444
|
styleRule
|
|
@@ -458,9 +472,12 @@ class RuntimeThemeLayer extends ThemeLayer {
|
|
|
458
472
|
const insertedIndex = super.insert(rule, index);
|
|
459
473
|
if (insertedIndex === undefined || !this.native || wasEmpty) return insertedIndex;
|
|
460
474
|
for (const node of rule.nodes){
|
|
461
|
-
const bucket = this.ensureNativeBucket(node.mediaText, node.selectorText);
|
|
462
|
-
bucket
|
|
463
|
-
|
|
475
|
+
const bucket = this.ensureNativeBucket(node.mediaText, node.selectorText, node.mode);
|
|
476
|
+
if (bucket) {
|
|
477
|
+
this.setBucketSyntheticDeclarations(bucket, node.mode);
|
|
478
|
+
bucket.styleRule.style.setProperty(node.declarationName, node.declarationValue);
|
|
479
|
+
node.native = bucket.styleRule;
|
|
480
|
+
}
|
|
464
481
|
}
|
|
465
482
|
return insertedIndex;
|
|
466
483
|
}
|
|
@@ -473,7 +490,7 @@ class RuntimeThemeLayer extends ThemeLayer {
|
|
|
473
490
|
const bucket = this.nativeBuckets.get(bucketKey);
|
|
474
491
|
if (!bucket) continue;
|
|
475
492
|
bucket.styleRule.style.removeProperty(node.declarationName);
|
|
476
|
-
if (bucket.styleRule
|
|
493
|
+
if (!this.hasVariableDeclarations(bucket.styleRule)) {
|
|
477
494
|
const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, bucket.nativeRule);
|
|
478
495
|
if (foundIndex !== -1) {
|
|
479
496
|
this.native.deleteRule(foundIndex);
|
|
@@ -779,10 +796,8 @@ class CSSRuntime extends MasterCSS {
|
|
|
779
796
|
if (isDocumentRoot(this.root)) {
|
|
780
797
|
this.root.defaultView.globalThis.masterCSSRuntime = this;
|
|
781
798
|
}
|
|
782
|
-
if (!registered) {
|
|
783
|
-
|
|
784
|
-
cssRuntime: this
|
|
785
|
-
});
|
|
799
|
+
if (!registered && "development" === 'development') {
|
|
800
|
+
debugRuntimeCreated(this);
|
|
786
801
|
}
|
|
787
802
|
return this;
|
|
788
803
|
}
|
|
@@ -893,11 +908,9 @@ class CSSRuntime extends MasterCSS {
|
|
|
893
908
|
}
|
|
894
909
|
if (addedClassNames.length) this.add(...addedClassNames);
|
|
895
910
|
if (removedClassNames.length) this.remove(...removedClassNames);
|
|
896
|
-
|
|
897
|
-
records,
|
|
898
|
-
|
|
899
|
-
cssRuntime: this
|
|
900
|
-
});
|
|
911
|
+
{
|
|
912
|
+
debugRuntimeMutation(records, deltaCounts, this);
|
|
913
|
+
}
|
|
901
914
|
}
|
|
902
915
|
startMutationObserver() {
|
|
903
916
|
this.observer = new MutationObserver((records)=>this.handleMutationRecords(records));
|
|
@@ -929,9 +942,9 @@ class CSSRuntime extends MasterCSS {
|
|
|
929
942
|
this.startMutationObserver();
|
|
930
943
|
this.revealHostIfNeeded();
|
|
931
944
|
this.observing = true;
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
}
|
|
945
|
+
{
|
|
946
|
+
debugRuntimeObserved(this);
|
|
947
|
+
}
|
|
935
948
|
return this;
|
|
936
949
|
}
|
|
937
950
|
failHydration(reason) {
|
|
@@ -1025,6 +1038,7 @@ class CSSRuntime extends MasterCSS {
|
|
|
1025
1038
|
if (!styleRule) return false;
|
|
1026
1039
|
for(let index = 0; index < styleRule.style.length; index++){
|
|
1027
1040
|
const propertyName = styleRule.style.item(index);
|
|
1041
|
+
if (this.isSyntheticColorSchemeDeclaration(nativeRule, styleRule, propertyName)) continue;
|
|
1028
1042
|
if (!propertyName.startsWith('--')) return false;
|
|
1029
1043
|
found = true;
|
|
1030
1044
|
if (!this.isEmittedGlobalsVariable(propertyName.slice(2))) return false;
|
|
@@ -1041,6 +1055,7 @@ class CSSRuntime extends MasterCSS {
|
|
|
1041
1055
|
if (!bucket) {
|
|
1042
1056
|
bucket = {
|
|
1043
1057
|
mediaText: node.mediaText,
|
|
1058
|
+
mode: node.mode,
|
|
1044
1059
|
selectorText: node.selectorText,
|
|
1045
1060
|
nodes: []
|
|
1046
1061
|
};
|
|
@@ -1051,6 +1066,15 @@ class CSSRuntime extends MasterCSS {
|
|
|
1051
1066
|
}
|
|
1052
1067
|
return Array.from(buckets.values());
|
|
1053
1068
|
}
|
|
1069
|
+
isSyntheticColorSchemeDeclaration(nativeRule, styleRule, propertyName) {
|
|
1070
|
+
if (propertyName !== 'color-scheme') return false;
|
|
1071
|
+
const colorScheme = styleRule.style.getPropertyValue(propertyName).trim();
|
|
1072
|
+
return colorScheme === this.themeLayer.getBucketColorScheme({
|
|
1073
|
+
mediaText: nativeRule instanceof CSSMediaRule ? `@media ${nativeRule.conditionText}` : '',
|
|
1074
|
+
mode: colorScheme,
|
|
1075
|
+
selectorText: styleRule.selectorText
|
|
1076
|
+
});
|
|
1077
|
+
}
|
|
1054
1078
|
getNativeThemeRuleBucketKey(nativeRule) {
|
|
1055
1079
|
const styleRule = this.themeLayer.getStyleRule(nativeRule);
|
|
1056
1080
|
if (!styleRule) return;
|
|
@@ -1206,10 +1230,9 @@ class CSSRuntime extends MasterCSS {
|
|
|
1206
1230
|
const layer = this.getUtilityLayerByName(layerName);
|
|
1207
1231
|
this.hydrateHydrationManifestLayer(layer, nativeLayerRule, manifestRules, result);
|
|
1208
1232
|
}
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
});
|
|
1233
|
+
{
|
|
1234
|
+
debugRuntimeHydrated(this, result);
|
|
1235
|
+
}
|
|
1213
1236
|
return result;
|
|
1214
1237
|
}
|
|
1215
1238
|
disconnect() {
|
|
@@ -1228,9 +1251,9 @@ class CSSRuntime extends MasterCSS {
|
|
|
1228
1251
|
this.style?.remove();
|
|
1229
1252
|
this.style = null;
|
|
1230
1253
|
}
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
}
|
|
1254
|
+
{
|
|
1255
|
+
debugRuntimeDisconnected(this);
|
|
1256
|
+
}
|
|
1234
1257
|
return this;
|
|
1235
1258
|
}
|
|
1236
1259
|
refresh(manifest = this.manifest) {
|
|
@@ -1246,18 +1269,17 @@ class CSSRuntime extends MasterCSS {
|
|
|
1246
1269
|
*/ this.classCounts.forEach((_, className)=>{
|
|
1247
1270
|
this.add(className);
|
|
1248
1271
|
});
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
});
|
|
1272
|
+
{
|
|
1273
|
+
debugRuntimeRefreshed(this, manifest);
|
|
1274
|
+
}
|
|
1253
1275
|
return this;
|
|
1254
1276
|
}
|
|
1255
1277
|
destroy() {
|
|
1256
1278
|
this.disconnect();
|
|
1257
1279
|
this.unregister();
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
}
|
|
1280
|
+
{
|
|
1281
|
+
debugRuntimeDestroyed(this);
|
|
1282
|
+
}
|
|
1261
1283
|
return this;
|
|
1262
1284
|
}
|
|
1263
1285
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { Layer, AnimationRule, VariableRule, compareRulePriority, ThemeLayer, MasterCSS } from '@master/css-engine';
|
|
2
2
|
import { MASTER_CSS_HYDRATION_MANIFEST_ATTR, MASTER_CSS_HYDRATION_MANIFEST_SCRIPT_ID } from '@master/css-schema/hydration-manifest';
|
|
3
3
|
import { MASTER_CSS_RUNTIME_STYLE_ID } from '@master/css-schema/runtime-style';
|
|
4
|
-
import { installHook } from '@master/css-devtools-hook';
|
|
5
4
|
|
|
6
5
|
function registerGlobal(CSSRuntime) {
|
|
7
6
|
if (!globalThis.MasterCSSRuntime) globalThis.MasterCSSRuntime = CSSRuntime;
|
|
8
|
-
installHook();
|
|
9
7
|
}
|
|
10
8
|
|
|
11
9
|
function findNativeCSSRuleIndex(cssRules, nativeRule) {
|
|
@@ -263,6 +261,21 @@ class RuntimeThemeLayer extends ThemeLayer {
|
|
|
263
261
|
const normalizedSelectorText = selectorText.replace(/\s*,\s*/g, ',').replace(/\s+/g, ' ').trim();
|
|
264
262
|
return normalizedMediaText + '\n' + normalizedSelectorText;
|
|
265
263
|
}
|
|
264
|
+
setBucketSyntheticDeclarations(bucket, mode) {
|
|
265
|
+
for (const { name, value } of this.getBucketSyntheticDeclarations({
|
|
266
|
+
mediaText: bucket.mediaText,
|
|
267
|
+
mode,
|
|
268
|
+
selectorText: bucket.selectorText
|
|
269
|
+
})){
|
|
270
|
+
bucket.styleRule.style.setProperty(name, value);
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
hasVariableDeclarations(styleRule) {
|
|
274
|
+
for(let index = 0; index < styleRule.style.length; index++){
|
|
275
|
+
if (styleRule.style.item(index).startsWith('--')) return true;
|
|
276
|
+
}
|
|
277
|
+
return false;
|
|
278
|
+
}
|
|
266
279
|
getStyleRule(nativeRule) {
|
|
267
280
|
if (nativeRule instanceof CSSStyleRule) return nativeRule;
|
|
268
281
|
if (nativeRule instanceof CSSGroupingRule) {
|
|
@@ -287,12 +300,20 @@ class RuntimeThemeLayer extends ThemeLayer {
|
|
|
287
300
|
});
|
|
288
301
|
}
|
|
289
302
|
}
|
|
290
|
-
ensureNativeBucket(mediaText, selectorText) {
|
|
303
|
+
ensureNativeBucket(mediaText, selectorText, mode) {
|
|
291
304
|
if (!this.native) return;
|
|
292
305
|
const key = this.getBucketKey(mediaText, selectorText);
|
|
293
306
|
let bucket = this.nativeBuckets.get(key);
|
|
294
|
-
if (bucket)
|
|
295
|
-
|
|
307
|
+
if (bucket) {
|
|
308
|
+
this.setBucketSyntheticDeclarations(bucket, mode);
|
|
309
|
+
return bucket;
|
|
310
|
+
}
|
|
311
|
+
const declarationText = this.getBucketSyntheticDeclarations({
|
|
312
|
+
mediaText,
|
|
313
|
+
mode,
|
|
314
|
+
selectorText
|
|
315
|
+
}).map(({ name, value })=>`${name}:${value}`).join(';');
|
|
316
|
+
const text = mediaText ? `${mediaText}{${selectorText}{${declarationText}}}` : `${selectorText}{${declarationText}}`;
|
|
296
317
|
const insertedIndex = this.native.insertRule(text, this.getNativeBucketInsertIndex(mediaText, selectorText));
|
|
297
318
|
const nativeRule = this.native.cssRules.item(insertedIndex);
|
|
298
319
|
if (!nativeRule) return;
|
|
@@ -301,6 +322,7 @@ class RuntimeThemeLayer extends ThemeLayer {
|
|
|
301
322
|
const newBucket = {
|
|
302
323
|
key,
|
|
303
324
|
mediaText,
|
|
325
|
+
mode,
|
|
304
326
|
selectorText,
|
|
305
327
|
nativeRule,
|
|
306
328
|
styleRule
|
|
@@ -334,9 +356,12 @@ class RuntimeThemeLayer extends ThemeLayer {
|
|
|
334
356
|
const insertedIndex = super.insert(rule, index);
|
|
335
357
|
if (insertedIndex === undefined || !this.native || wasEmpty) return insertedIndex;
|
|
336
358
|
for (const node of rule.nodes){
|
|
337
|
-
const bucket = this.ensureNativeBucket(node.mediaText, node.selectorText);
|
|
338
|
-
bucket
|
|
339
|
-
|
|
359
|
+
const bucket = this.ensureNativeBucket(node.mediaText, node.selectorText, node.mode);
|
|
360
|
+
if (bucket) {
|
|
361
|
+
this.setBucketSyntheticDeclarations(bucket, node.mode);
|
|
362
|
+
bucket.styleRule.style.setProperty(node.declarationName, node.declarationValue);
|
|
363
|
+
node.native = bucket.styleRule;
|
|
364
|
+
}
|
|
340
365
|
}
|
|
341
366
|
return insertedIndex;
|
|
342
367
|
}
|
|
@@ -349,7 +374,7 @@ class RuntimeThemeLayer extends ThemeLayer {
|
|
|
349
374
|
const bucket = this.nativeBuckets.get(bucketKey);
|
|
350
375
|
if (!bucket) continue;
|
|
351
376
|
bucket.styleRule.style.removeProperty(node.declarationName);
|
|
352
|
-
if (bucket.styleRule
|
|
377
|
+
if (!this.hasVariableDeclarations(bucket.styleRule)) {
|
|
353
378
|
const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, bucket.nativeRule);
|
|
354
379
|
if (foundIndex !== -1) {
|
|
355
380
|
this.native.deleteRule(foundIndex);
|
|
@@ -647,16 +672,11 @@ class CSSRuntime extends MasterCSS {
|
|
|
647
672
|
});
|
|
648
673
|
}
|
|
649
674
|
register() {
|
|
650
|
-
|
|
675
|
+
globalThis.MasterCSSRuntime.instances.get(this.root) === this;
|
|
651
676
|
globalThis.MasterCSSRuntime.instances.set(this.root, this);
|
|
652
677
|
if (isDocumentRoot(this.root)) {
|
|
653
678
|
this.root.defaultView.globalThis.masterCSSRuntime = this;
|
|
654
679
|
}
|
|
655
|
-
if (!registered) {
|
|
656
|
-
__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:created', {
|
|
657
|
-
cssRuntime: this
|
|
658
|
-
});
|
|
659
|
-
}
|
|
660
680
|
return this;
|
|
661
681
|
}
|
|
662
682
|
unregister() {
|
|
@@ -760,11 +780,6 @@ class CSSRuntime extends MasterCSS {
|
|
|
760
780
|
}
|
|
761
781
|
if (addedClassNames.length) this.add(...addedClassNames);
|
|
762
782
|
if (removedClassNames.length) this.remove(...removedClassNames);
|
|
763
|
-
globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:mutated', {
|
|
764
|
-
records,
|
|
765
|
-
classCounts: deltaCounts,
|
|
766
|
-
cssRuntime: this
|
|
767
|
-
});
|
|
768
783
|
}
|
|
769
784
|
startMutationObserver() {
|
|
770
785
|
this.observer = new MutationObserver((records)=>this.handleMutationRecords(records));
|
|
@@ -796,9 +811,6 @@ class CSSRuntime extends MasterCSS {
|
|
|
796
811
|
this.startMutationObserver();
|
|
797
812
|
this.revealHostIfNeeded();
|
|
798
813
|
this.observing = true;
|
|
799
|
-
globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:observed', {
|
|
800
|
-
cssRuntime: this
|
|
801
|
-
});
|
|
802
814
|
return this;
|
|
803
815
|
}
|
|
804
816
|
failHydration(reason) {
|
|
@@ -892,6 +904,7 @@ class CSSRuntime extends MasterCSS {
|
|
|
892
904
|
if (!styleRule) return false;
|
|
893
905
|
for(let index = 0; index < styleRule.style.length; index++){
|
|
894
906
|
const propertyName = styleRule.style.item(index);
|
|
907
|
+
if (this.isSyntheticColorSchemeDeclaration(nativeRule, styleRule, propertyName)) continue;
|
|
895
908
|
if (!propertyName.startsWith('--')) return false;
|
|
896
909
|
found = true;
|
|
897
910
|
if (!this.isEmittedGlobalsVariable(propertyName.slice(2))) return false;
|
|
@@ -908,6 +921,7 @@ class CSSRuntime extends MasterCSS {
|
|
|
908
921
|
if (!bucket) {
|
|
909
922
|
bucket = {
|
|
910
923
|
mediaText: node.mediaText,
|
|
924
|
+
mode: node.mode,
|
|
911
925
|
selectorText: node.selectorText,
|
|
912
926
|
nodes: []
|
|
913
927
|
};
|
|
@@ -918,6 +932,15 @@ class CSSRuntime extends MasterCSS {
|
|
|
918
932
|
}
|
|
919
933
|
return Array.from(buckets.values());
|
|
920
934
|
}
|
|
935
|
+
isSyntheticColorSchemeDeclaration(nativeRule, styleRule, propertyName) {
|
|
936
|
+
if (propertyName !== 'color-scheme') return false;
|
|
937
|
+
const colorScheme = styleRule.style.getPropertyValue(propertyName).trim();
|
|
938
|
+
return colorScheme === this.themeLayer.getBucketColorScheme({
|
|
939
|
+
mediaText: nativeRule instanceof CSSMediaRule ? `@media ${nativeRule.conditionText}` : '',
|
|
940
|
+
mode: colorScheme,
|
|
941
|
+
selectorText: styleRule.selectorText
|
|
942
|
+
});
|
|
943
|
+
}
|
|
921
944
|
getNativeThemeRuleBucketKey(nativeRule) {
|
|
922
945
|
const styleRule = this.themeLayer.getStyleRule(nativeRule);
|
|
923
946
|
if (!styleRule) return;
|
|
@@ -1073,10 +1096,6 @@ class CSSRuntime extends MasterCSS {
|
|
|
1073
1096
|
const layer = this.getUtilityLayerByName(layerName);
|
|
1074
1097
|
this.hydrateHydrationManifestLayer(layer, nativeLayerRule, manifestRules, result);
|
|
1075
1098
|
}
|
|
1076
|
-
globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:hydrated', {
|
|
1077
|
-
cssRuntime: this,
|
|
1078
|
-
result
|
|
1079
|
-
});
|
|
1080
1099
|
return result;
|
|
1081
1100
|
}
|
|
1082
1101
|
disconnect() {
|
|
@@ -1095,9 +1114,6 @@ class CSSRuntime extends MasterCSS {
|
|
|
1095
1114
|
this.style?.remove();
|
|
1096
1115
|
this.style = null;
|
|
1097
1116
|
}
|
|
1098
|
-
globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:disconnected', {
|
|
1099
|
-
cssRuntime: this
|
|
1100
|
-
});
|
|
1101
1117
|
return this;
|
|
1102
1118
|
}
|
|
1103
1119
|
refresh(manifest = this.manifest) {
|
|
@@ -1113,18 +1129,11 @@ class CSSRuntime extends MasterCSS {
|
|
|
1113
1129
|
*/ this.classCounts.forEach((_, className)=>{
|
|
1114
1130
|
this.add(className);
|
|
1115
1131
|
});
|
|
1116
|
-
globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:refreshed', {
|
|
1117
|
-
cssRuntime: this,
|
|
1118
|
-
manifest
|
|
1119
|
-
});
|
|
1120
1132
|
return this;
|
|
1121
1133
|
}
|
|
1122
1134
|
destroy() {
|
|
1123
1135
|
this.disconnect();
|
|
1124
1136
|
this.unregister();
|
|
1125
|
-
globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:destroyed', {
|
|
1126
|
-
cssRuntime: this
|
|
1127
|
-
});
|
|
1128
1137
|
return this;
|
|
1129
1138
|
}
|
|
1130
1139
|
}
|
package/dist/theme-layer.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import CSSRuntime from './core';
|
|
|
3
3
|
interface NativeBucket {
|
|
4
4
|
key: string;
|
|
5
5
|
mediaText: string;
|
|
6
|
+
mode?: string;
|
|
6
7
|
selectorText: string;
|
|
7
8
|
nativeRule: CSSRule;
|
|
8
9
|
styleRule: CSSStyleRule;
|
|
@@ -15,9 +16,11 @@ export default class RuntimeThemeLayer extends ThemeLayer {
|
|
|
15
16
|
constructor(name: string, cssRuntime: CSSRuntime);
|
|
16
17
|
attach(): void;
|
|
17
18
|
getBucketKey(mediaText: string, selectorText: string): string;
|
|
19
|
+
private setBucketSyntheticDeclarations;
|
|
20
|
+
private hasVariableDeclarations;
|
|
18
21
|
getStyleRule(nativeRule: CSSRule): CSSStyleRule | undefined;
|
|
19
22
|
syncNativeBuckets(): void;
|
|
20
|
-
ensureNativeBucket(mediaText: string, selectorText: string): NativeBucket | undefined;
|
|
23
|
+
ensureNativeBucket(mediaText: string, selectorText: string, mode?: string): NativeBucket | undefined;
|
|
21
24
|
getNativeBucketInsertIndex(mediaText: string, selectorText: string): number;
|
|
22
25
|
insert(rule: VariableRule, index?: number): number | undefined;
|
|
23
26
|
delete(key: string): VariableRule | undefined;
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@master/css-runtime","type":"module","scripts":{"build":"techor build && node scripts/copy-default-manifest-json.mjs","bench":"node scripts/benchmark-runtime.mjs","dev":"pnpm build --watch","e2e":"playwright test","e2e:watch":"nodemon -e js,mjs,ts,html,css --watch dist --watch e2e --watch tests --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.mjs","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","import":{"development":"./dist/index.development.mjs","default":"./dist/index.mjs"},"default":"./dist/index.mjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css-engine":"^2.0.0-rc.
|
|
1
|
+
{"name":"@master/css-runtime","type":"module","scripts":{"build":"techor build && node scripts/copy-default-manifest-json.mjs","bench":"node scripts/benchmark-runtime.mjs","dev":"pnpm build --watch","e2e":"playwright test","e2e:watch":"nodemon -e js,mjs,ts,html,css --watch dist --watch e2e --watch tests --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.mjs","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","import":{"development":"./dist/index.development.mjs","default":"./dist/index.mjs"},"default":"./dist/index.mjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css-engine":"^2.0.0-rc.72","@master/css-preset":"^2.0.0-rc.72","@master/css-schema":"^2.0.0-rc.72"},"devDependencies":{"@master/css":"^2.0.0-rc.72","@master/css-compiler":"^2.0.0-rc.72","@master/css-integration":"^2.0.0-rc.72","@playwright/test":"1.61.0"},"version":"2.0.0-rc.72"}
|