Remove unused files and update test framework

packages/runtime/e2e/complex.test.ts

@@ -0,0 +1,39 @@
+import { resolve } from 'path'
+import { test, expect } from '@playwright/test'
+import { readFileSync } from 'fs'
+
+test('complex', async ({ page }) => {
+    await page.addScriptTag({ path: resolve(__dirname, '../dist/iife.bundle.js') })
+
+    /**
+     * <p class="block font:bold">
+     * <p class="block font:bold italic">
+     */
+    await page.evaluate(() => {
+        const p1 = document.createElement('p')
+        p1.classList.add('block', 'font:bold')
+        document.body.append(p1)
+        p1.classList.add('italic')
+    })
+
+    expect(await page.evaluate(() => globalThis.runtimeCSS.classesUsage)).toEqual({
+        'block': 1,
+        'font:bold': 1,
+        'italic': 1
+    })
+
+    expect(
+        await page.evaluate((complexHTML) => {
+            document.body.innerHTML = complexHTML
+            return Object.keys(globalThis.runtimeCSS.classesUsage).length
+        }, readFileSync(resolve(__dirname, './complex.html'), 'utf-8').toString())
+    ).toBeTruthy()
+
+    expect(
+        await page.evaluate(async () => {
+            document.body.innerHTML = ''
+            await new Promise(resolve => setTimeout(resolve, 100))
+            return globalThis.runtimeCSS.classesUsage
+        })
+    ).toEqual({})
+})

packages/runtime/e2e/keyframes.test.ts

@@ -0,0 +1,107 @@
+import { test, expect } from '@playwright/test'
+import { resolve } from 'path'
+
+test('expects the animation output', async ({ page }) => {
+    await page.addScriptTag({ path: resolve(__dirname, '../dist/iife.bundle.js') })
+    await page.evaluate(() => {
+        globalThis.runtimeCSS.refresh({})
+        const p = document.createElement('p')
+        p.id = 'mp'
+        p.classList.add('@fade|1s')
+        document.body.append(p)
+    })
+    expect(await page.evaluate(() => globalThis.runtimeCSS.text)).toContain('.\\@fade\\|1s{animation:fade 1s}')
+
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.add(
+            '@flash|1s',
+            '@float|1s',
+            '@heart|1s',
+            '@jump|1s',
+            '@ping|1s',
+            '@pulse|1s',
+            '@rotate|1s',
+            '@shake|1s',
+            '@zoom|1s',
+            '{@zoom|1s;f:16}'
+        )
+    })
+    const cssText = await page.evaluate(() => globalThis.runtimeCSS.text)
+    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}}')
+    expect(cssText).toContain('@keyframes float{0%{transform:none}50%{transform:translateY(-1.25rem)}to{transform:none}}')
+    expect(cssText).toContain('@keyframes heart{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}')
+    expect(cssText).toContain('@keyframes jump{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}')
+    expect(cssText).toContain('@keyframes ping{75%,to{transform:scale(2);opacity:0}}')
+    expect(cssText).toContain('@keyframes pulse{0%{transform:none}50%{transform:scale(1.05)}to{transform:none}}')
+    expect(cssText).toContain('@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:none}}')
+    expect(cssText).toContain('@keyframes shake{0%{transform:none}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:none}}')
+    expect(cssText).toContain('@keyframes zoom{0%{transform:scale(0)}to{transform:none}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('@fade|1s')
+    })
+    const updatedCssText1 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText1).not.toContain('@keyframes fade{0%{opacity:0}to{opacity:1}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('@flash|1s')
+    })
+    const updatedCssText2 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText2).not.toContain('@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('@float|1s')
+    })
+    const updatedCssText3 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText3).not.toContain('@keyframes float{0%{transform:none}50%{transform:translateY(-1.25rem)}to{transform:none}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('@heart|1s')
+    })
+    const updatedCssText4 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText4).not.toContain('@keyframes heart{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('@jump|1s')
+    })
+    const updatedCssText5 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText5).not.toContain('@keyframes jump{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('@ping|1s')
+    })
+    const updatedCssText6 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText6).not.toContain('@keyframes ping{75%,to{transform:scale(2);opacity:0}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('@pulse|1s')
+    })
+    const updatedCssText7 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText7).not.toContain('@keyframes pulse{0%{transform:none}50%{transform:scale(1.05)}to{transform:none}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('@rotate|1s')
+    })
+    const updatedCssText8 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText8).not.toContain('@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:none}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('@shake|1s')
+    })
+    const updatedCssText9 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText9).not.toContain('@keyframes shake{0%{transform:none}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:none}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('@zoom|1s')
+    })
+    const updatedCssText10 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText10).toContain('@keyframes zoom{0%{transform:scale(0)}to{transform:none}}')
+    await page.evaluate(() => {
+        const p = document.getElementById('mp')
+        p?.classList.remove('{@zoom|1s;f:16}')
+    })
+    const updatedCssText11 = await page.evaluate(() => globalThis.runtimeCSS.text)
+    expect(updatedCssText11).not.toContain('@keyframes zoom{0%{transform:scale(0)}to{transform:none}}')
+})

packages/runtime/e2e/progressive.test.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+import { resolve } from 'path'
+
+test('progressive', async ({ page }) => {
+    await page.evaluate(() => {
+        const style = document.createElement('style')
+        style.id = 'master'
+        document.head.append(style)
+    })
+    await page.addScriptTag({ path: resolve(__dirname, '../dist/iife.bundle.js') })
+    await page.evaluate(() => {
+        globalThis.runtimeCSS.destroy()
+    })
+    expect(await page.evaluate(() => {
+        globalThis.runtimeCSS.destroy()
+        return document.getElementById('master')
+    })).toBeDefined()
+})

packages/runtime/e2e/variables.test.ts

@@ -0,0 +1,131 @@
+import { test, expect } from '@playwright/test'
+import { resolve } from 'path'
+
+const variables = {
+    first: {
+        '': '#111111',
+        '@dark': '#222222',
+        '@light': '#333333'
+    },
+    second: {
+        '@dark': '#444444',
+        '@light': '#555555'
+    },
+    third: {
+        '': '#666666',
+        '@light': '#777777'
+    },
+    fourth: {
+        '': '#888888',
+        '@dark': '#999999',
+        '@light': '#000000'
+    },
+    fifth: {
+        '@dark': '#022222',
+        '@light': '#033333'
+    },
+    sixth: {
+        '@dark': '#666666'
+    }
+}
+
+test.beforeEach(async ({ page }) => {
+    await page.addScriptTag({ path: resolve(__dirname, '../dist/iife.bundle.js') })
+    await page.evaluate((variables) => globalThis.runtimeCSS.refresh({ variables }), variables)
+})
+
+test('make sure not to extend variables deeply', async ({ page }) => {
+    expect(await page.evaluate(() => globalThis.runtimeCSS.config.variables?.first)).toEqual(variables.first)
+})
+
+test('expects the variable output', async ({ page }) => {
+    expect(
+        await page.evaluate(async () => {
+            const p = document.createElement('p')
+            p.id = 'mp'
+            p.classList.add('bg:first')
+            document.body.append(p)
+            await new Promise(resolve => setTimeout(resolve, 0))
+            return globalThis.runtimeCSS.text
+        })
+    ).toContain(':root{--first:17 17 17}.dark{--first:34 34 34}.light{--first:51 51 51}.bg\\:first{background-color:rgb(var(--first))}')
+
+    let text = await page.evaluate(async () => {
+        const p = document.getElementById('mp')
+        p?.classList.add(
+            'bg:second',
+            'b:third',
+            '{outline:fourth;accent:fifth}',
+            'fg:second',
+            'accent:sixth'
+        )
+        await new Promise(resolve => setTimeout(resolve, 0))
+        return globalThis.runtimeCSS.text
+    })
+    expect(text).toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/)
+    expect(text).toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/)
+    expect(text).toContain('.bg\\:second{background-color:rgb(var(--second))}')
+    expect(text).toMatch(/:root\{[^}]*--third:102 102 102[^}]*\}/)
+    expect(text).toMatch(/\.light\{[^}]*--third:119 119 119[^}]*\}/)
+    expect(text).toContain('.b\\:third{border-color:rgb(var(--third))}')
+    expect(text).toMatch(/:root\{[^}]*--fourth:136 136 136[^}]*\}/)
+    expect(text).toMatch(/\.dark\{[^}]*--fourth:153 153 153[^}]*\}/)
+    expect(text).toMatch(/\.light\{[^}]*--fourth:0 0 0[^}]*\}/)
+    expect(text).toMatch(/\.dark\{[^}]*--fifth:2 34 34[^}]*\}/)
+    expect(text).toMatch(/\.light\{[^}]*--fifth:3 51 51[^}]*\}/)
+    // todo: insertRule throw error
+    // expect(text).toContain('.\\{outline\\:fourth\\;accent\\:fifth\\}{outline-color:rgb(var(--fourth));accent-color:rgb(var(--fifth))}')
+    expect(text).toContain('.fg\\:second{color:rgb(var(--second))}')
+    expect(text).toMatch(/\.dark\{[^}]*--sixth:102 102 102[^}]*\}/)
+
+    text = await page.evaluate(async () => {
+        document.getElementById('mp')?.classList.remove('bg:second')
+        await new Promise(resolve => setTimeout(resolve, 0))
+        return globalThis.runtimeCSS.text
+    })
+    expect(text).toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/)
+    expect(text).toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/)
+
+    text = await page.evaluate(async () => {
+        document.getElementById('mp')?.classList.remove('b:third')
+        await new Promise(resolve => setTimeout(resolve, 0))
+        return globalThis.runtimeCSS.text
+    })
+    expect(text).not.toMatch(/:root\{[^}]*--third:102 102 102[^}]*\}/)
+    expect(text).not.toMatch(/\.light\{[^}]*--third:119 119 119[^}]*\}/)
+
+    text = await page.evaluate(async () => {
+        document.getElementById('mp')?.classList.remove('{outline:fourth;accent:fifth}')
+        await new Promise(resolve => setTimeout(resolve, 0))
+        return globalThis.runtimeCSS.text
+    })
+    expect(text).not.toMatch(/:root\{[^}]*--fourth:136 136 136[^}]*\}/)
+    expect(text).not.toMatch(/\.dark\{[^}]*--fourth:153 153 153[^}]*\}/)
+    expect(text).not.toMatch(/\.light\{[^}]*--fourth:0 0 0[^}]*\}/)
+    expect(text).not.toMatch(/\.dark\{[^}]*--fifth:2 34 34[^}]*\}/)
+    expect(text).not.toMatch(/\.light\{[^}]*--fifth:3 51 51[^}]*\}/)
+
+    text = await page.evaluate(async () => {
+        document.getElementById('mp')?.classList.remove('fg:second')
+        await new Promise(resolve => setTimeout(resolve, 0))
+        return globalThis.runtimeCSS.text
+    })
+    expect(text).not.toMatch(/\.dark\{[^}]*--second:68 68 68[^}]*\}/)
+    expect(text).not.toMatch(/\.light\{[^}]*--second:85 85 85[^}]*\}/)
+
+    text = await page.evaluate(async () => {
+        document.getElementById('mp')?.classList.remove('bg:first')
+        await new Promise(resolve => setTimeout(resolve, 0))
+        return globalThis.runtimeCSS.text
+    })
+    expect(text).not.toMatch(/:root\{[^}]*--first:17 17 17[^}]*\}/)
+    expect(text).not.toMatch(/\.dark\{[^}]*--first:34 34 34[^}]*\}/)
+    expect(text).not.toMatch(/\.light\{[^}]*--first:51 51 51[^}]*\}/)
+
+    text = await page.evaluate(async () => {
+        document.getElementById('mp')?.classList.remove('accent:sixth')
+        await new Promise(resolve => setTimeout(resolve, 0))
+        return globalThis.runtimeCSS.text
+    })
+    expect(text).toBe('')
+})

packages/runtime/package.json

@@ -7,7 +7,7 @@
         "build:cjs": "techor pack \"src/index.ts\" --outfile \"dist/index.bundle.js\" --bundle --format cjs --no-clean",
         "build:type": "tsc --emitDeclarationOnly --declaration --outDir dist",
         "dev": "pnpm run \"/^build:(?!type)/\" --watch",
-        "test": "jest",
+        "test": "playwright test",
         "type-check": "tsc --noEmit",
         "lint": "eslint src"
     },
@@ -55,5 +55,8 @@
     },
     "dependencies": {
         "@master/css": "workspace:^"
+    },
+    "devDependencies": {
+        "@playwright/test": "^1.41.2"
     }
 }