Fix: Global variables masterCSS, masterCSSs

packages/css/package.json

@@ -40,9 +40,7 @@
         "build-tools",
         "mastercss"
     ],
-    "sideEffects": [
-        "./src/core.side-effect.ts"
-    ],
+    "sideEffects": false,
     "main": "./dist/index.bundle.js",
     "jsnext:main": "./dist/index.bundle.mjs",
     "esnext": "./dist/index.bundle.mjs",
@@ -84,4 +82,4 @@
         "puppeteer": "^21.0.1",
         "vite": "^4.2.1"
     }
-}
+}

packages/css/src/core.ts

@@ -45,7 +45,7 @@ export class MasterCSS {
     }
     readonly rules: Rule[] = []
     readonly ruleBy: Record<string, Rule> = {}
-    readonly countBy = {}
+    readonly classesUsage = {}
     readonly observing = false
     readonly config: Config
     private readonly semanticRuleOptions: RuleOptions[] = []
@@ -566,10 +566,10 @@ export class MasterCSS {
 
         const handleClassList = (classList: DOMTokenList) => {
             classList.forEach((className) => {
-                if (Object.prototype.hasOwnProperty.call(this.countBy, className)) {
-                    this.countBy[className]++
+                if (Object.prototype.hasOwnProperty.call(this.classesUsage, className)) {
+                    this.classesUsage[className]++
                 } else {
-                    this.countBy[className] = 1
+                    this.classesUsage[className] = 1
 
                     this.insert(className)
                 }
@@ -626,7 +626,7 @@ export class MasterCSS {
             const removeClassName = (className: string) => {
                 if (Object.prototype.hasOwnProperty.call(correctionOfClassName, className)) {
                     correctionOfClassName[className]--
-                } else if (Object.prototype.hasOwnProperty.call(this.countBy, className)) {
+                } else if (Object.prototype.hasOwnProperty.call(this.classesUsage, className)) {
                     correctionOfClassName[className] = -1
                 }
             }
@@ -721,17 +721,17 @@ export class MasterCSS {
 
             for (const className in correctionOfClassName) {
                 const correction = correctionOfClassName[className]
-                const count = (this.countBy[className] || 0) + correction
+                const count = (this.classesUsage[className] || 0) + correction
                 if (count === 0) {
                     // remove
-                    delete this.countBy[className]
+                    delete this.classesUsage[className]
                     /**
                      * class name 從 DOM tree 中被移除，
                      * 匹配並刪除對應的 rule
                      */
                     this.delete(className)
                 } else {
-                    if (!(Object.prototype.hasOwnProperty.call(this.countBy, className))) {
+                    if (!(Object.prototype.hasOwnProperty.call(this.classesUsage, className))) {
                         // add
                         /**
                          * 新 class name 被 connected 至 DOM tree，
@@ -740,7 +740,7 @@ export class MasterCSS {
                         this.insert(className)
                     }
 
-                    this.countBy[className] = count
+                    this.classesUsage[className] = count
                 }
             }
 
@@ -769,7 +769,7 @@ export class MasterCSS {
         // @ts-ignore
         this.ruleBy = {}
         // @ts-ignore
-        this.countBy = {}
+        this.classesUsage = {}
         this.rules.length = 0
         const sheet = this.style?.sheet
         if (sheet?.cssRules) {
@@ -868,7 +868,7 @@ export class MasterCSS {
          * 拿當前所有的 classNames 按照最新的 colors, config.rules 匹配並生成新的 style
          * 所以 refresh 過後 rules 可能會變多也可能會變少
          */
-        for (const name in this.countBy) {
+        for (const name in this.classesUsage) {
             this.insert(name)
         }
     }
@@ -891,7 +891,7 @@ export class MasterCSS {
             const rule = this.ruleBy[name]
             if (
                 !rule
-                || Object.prototype.hasOwnProperty.call(this.stylesBy, name) && this.stylesBy[name].some(eachClassName => Object.prototype.hasOwnProperty.call(this.countBy, eachClassName))
+                || Object.prototype.hasOwnProperty.call(this.stylesBy, name) && this.stylesBy[name].some(eachClassName => Object.prototype.hasOwnProperty.call(this.classesUsage, eachClassName))
             )
                 return
 
@@ -958,7 +958,7 @@ export class MasterCSS {
 
         if (Object.prototype.hasOwnProperty.call(this.styles, className)) {
             for (const eachClassName of this.styles[className]) {
-                if (!Object.prototype.hasOwnProperty.call(this.countBy, eachClassName)) {
+                if (!Object.prototype.hasOwnProperty.call(this.classesUsage, eachClassName)) {
                     deleteRule(eachClassName)
                 }
             }
@@ -1526,4 +1526,9 @@ declare global {
             masterCSSs: MasterCSS[]
         }
     }
-}
+}
+
+(() => {
+    globalThis.MasterCSS = MasterCSS
+    if (!globalThis.masterCSSs) globalThis.masterCSSs = []
+})()

packages/css/src/index.browser.ts

@@ -1,7 +1,7 @@
 import type { Config } from './config'
-import initRuntime from './functions/init-runtime'
+import { MasterCSS } from './core'
 
-initRuntime((window as any).masterCSSConfig)
+window.masterCSS = new MasterCSS(window.masterCSSConfig).observe(document)
 
 declare global {
     interface Window {

packages/css/src/index.ts

@@ -1,5 +1,3 @@
-import './core.side-effect'
-
 // core
 export { MasterCSS, MasterCSS as default } from './core'
 export { Rule, NativeRule, MediaFeatureComponent, MediaQuery } from './rule'

packages/css/tests/keyframes.test.ts

@@ -12,26 +12,28 @@ let page: Page
 beforeAll(async () => {
     browser = await puppeteer.launch({ headless: 'new', channel: 'chrome' })
     page = await browser.newPage()
-    await page.evaluate(() => window['masterCSSConfig'] = { animations: { fade: {} } })
+    await page.evaluate(function () {
+        window['masterCSSConfig'] = { animations: { fade: {} } }
+    })
     await page.addScriptTag({ path: require.resolve(path.join(__dirname, '../dist/index.browser.bundle.js')) })
     await page.waitForNetworkIdle()
 }, 60000)
 
 it('make sure not to extend animations deeply', async () => {
-    const fade = await page.evaluate(() => window.MasterCSS.root.config.animations?.fade)
+    const fade = await page.evaluate(() => window.masterCSS.config.animations?.fade)
     expect(fade).toEqual({})
 }, 60000)
 
 it('expects the animation output', async () => {
     const cssText = await page.evaluate(async () => {
-        window.MasterCSS.root.refresh({})
+        window.masterCSS.refresh({})
         const p = document.createElement('p')
         p.id = 'mp'
         p.classList.add('@fade|1s')
         document.body.append(p)
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         await new Promise(resolve => setTimeout(resolve, 0))
-        return window.MasterCSS.root.text
+        return window.masterCSS.text
     })
     expect(cssText).toContain('.\\@fade\\|1s{animation:fade 1s}')
 }, 60000)
@@ -55,7 +57,7 @@ it('expects the keyframe output', async () => {
         )
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         await new Promise(resolve => setTimeout(resolve, 0))
-        return window.MasterCSS.root.text
+        return window.masterCSS.text
     }, p)
     expect(cssText).toContain('@keyframes fade{0%{opacity:0}to{opacity:1}}')
     expect(cssText).toContain('@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}')
@@ -72,7 +74,7 @@ it('expects the keyframe output', async () => {
         cssText = await page.evaluate(async (p, className) => {
             p.classList.remove(className)
             await new Promise(resolve => setTimeout(resolve, 0))
-            return window.MasterCSS.root.text
+            return window.masterCSS.text
         }, p, className)
     }
     await removeClass('@fade|1s')

packages/css/tests/runtime.test.ts

@@ -27,9 +27,10 @@ it('css count class add', async () => {
         document.body.append(p1)
         p1.classList.add('italic')
     })
-
-    const countBy = await page.evaluate(() => window.MasterCSS.root.countBy)
-    expect(countBy).toEqual({
+    const classesUsage = await page.evaluate(function () {
+        return window.masterCSS.classesUsage
+    })
+    expect(classesUsage).toEqual({
         'block': 1,
         'font:bold': 1,
         'italic': 1
@@ -38,11 +39,13 @@ it('css count class add', async () => {
 
 it('css count class complicated example', async () => {
     await page.evaluate((complexHTML) => document.body.innerHTML = complexHTML, complexHTML)
-    let countBy = await page.evaluate(() => window.MasterCSS.root.countBy)
-    expect(Object.keys(countBy).length).toBeTruthy()
+    let classesUsage = await page.evaluate(function () {
+        return window.masterCSS.classesUsage
+    })
+    expect(Object.keys(classesUsage).length).toBeTruthy()
     await page.evaluate(() => document.body.innerHTML = '')
-    countBy = await page.evaluate(() => window.MasterCSS.root.countBy)
-    expect(countBy).toEqual({})
+    classesUsage = await page.evaluate(() => window.masterCSS.classesUsage)
+    expect(classesUsage).toEqual({})
 }, 30000)
 
 afterAll(async () => {

packages/css/tests/variables.test.ts

@@ -47,7 +47,7 @@ beforeAll(async () => {
 }, 60000)
 
 it('make sure not to extend variables deeply', async () => {
-    const first = await page.evaluate(() => window.MasterCSS.root.config.variables?.first)
+    const first = await page.evaluate(() => window.masterCSS.config.variables?.first)
     expect(first).toEqual(variables.first)
 }, 60000)
 
@@ -59,7 +59,7 @@ it('expects the variable output', async () => {
         document.body.append(p)
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         await new Promise(resolve => setTimeout(resolve, 0))
-        return window.MasterCSS.root.text
+        return window.masterCSS.text
     })
     expect(cssText).toContain(':root{--first:17 17 17}.dark{--first:34 34 34}.light{--first:51 51 51}.bg\\:first{background-color:rgb(var(--first))}')
 }, 60000)
@@ -78,7 +78,7 @@ it('expects the variable output', async () => {
         )
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         await new Promise(resolve => setTimeout(resolve, 0))
-        return window.MasterCSS.root.text
+        return window.masterCSS.text
     }, p)
     expect(cssText).toContain('.dark{--second:68 68 68}.light{--second:85 85 85}:root{--third:102 102 102}.light{--third:119 119 119}')
     expect(cssText).toContain('.bg\\:second{background-color:rgb(var(--second))}')
@@ -93,7 +93,7 @@ it('expects the variable output', async () => {
         cssText = await page.evaluate(async (p, className) => {
             p.classList.remove(className)
             await new Promise(resolve => setTimeout(resolve, 0))
-            return window.MasterCSS.root.text
+            return window.masterCSS.text
         }, p, className)
     }
     await removeClass('bg:second')

site/app/[locale]/(root)/play/templates/latest/index.ts

@@ -34,9 +34,9 @@ export default {
                     switch (name) {
                         case 'master.css.js':
                             const MasterCSS = window.MasterCSS;
-                            if (MasterCSS.root) {
+                            if (masterCSS) {
                                 eval(content.replace(/(export default|export const config =)/, 'config ='));
-                                MasterCSS.root.refresh(config);
+                                masterCSS.refresh(config);
                             };
                     }
                 })