Improve: Update CSSProvider to CSSRuntimeProvider

master-co · Jan 9, 2024 · a608a1d · a608a1d
1 parent dac3834
commit a608a1d
Show file tree

Hide file tree

Showing 103 changed files with 2,780 additions and 11,297 deletions.
diff --git a/examples/angular-with-progressive-rendering/package.json b/examples/angular-with-progressive-rendering/package.json
@@ -21,7 +21,7 @@
     "@angular/platform-server": "^17.0.0",
     "@angular/router": "^17.0.0",
     "@angular/ssr": "^17.0.0",
-    "@master/css": "workspace:^",
+    "@master/css-runtime": "workspace:^",
     "@master/css-server": "workspace:^",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
@@ -43,4 +43,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.2.2"
   }
-}
+}
diff --git a/examples/angular-with-progressive-rendering/src/main.ts b/examples/angular-with-progressive-rendering/src/main.ts
@@ -1,10 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
-import { initRuntime } from '@master/css';
+import { initCSSRuntime } from '@master/css-runtime';
 import config from '../master.css';
 
-initRuntime(config);
+initCSSRuntime(config);
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));
diff --git a/examples/angular-with-runtime-rendering/package.json b/examples/angular-with-runtime-rendering/package.json
@@ -21,7 +21,7 @@
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2",
-    "@master/css": "workspace:^"
+    "@master/css-runtime": "workspace:^"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^17.0.0",

diff --git a/examples/angular-with-runtime-rendering/src/main.ts b/examples/angular-with-runtime-rendering/src/main.ts
@@ -1,10 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
-import { initRuntime } from '@master/css';
+import { initCSSRuntime } from '@master/css-runtime';
 import config from '../master.css';
 
-initRuntime(config);
+initCSSRuntime(config);
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));
diff --git a/examples/astro-with-runtime-rendering/package.json b/examples/astro-with-runtime-rendering/package.json
@@ -12,6 +12,6 @@
     },
     "dependencies": {
         "astro": "^2.8.3",
-        "@master/css": "workspace:^"
+        "@master/css-runtime": "workspace:^"
     }
 }
diff --git a/examples/astro-with-runtime-rendering/src/layouts/Layout.astro b/examples/astro-with-runtime-rendering/src/layouts/Layout.astro
@@ -16,10 +16,10 @@ const { title } = Astro.props;
         <meta name="generator" content={Astro.generator} />
         <title>{title}</title>
         <script>
-            import { initRuntime } from "@master/css";
+            import { initCSSRuntime } from "@master/css-runtime";
             import config from "../../master.css";
 
-            initRuntime(config);
+            initCSSRuntime(config);
         </script>
     </head>
     <body>

diff --git a/examples/astro-with-static-extraction/package.json b/examples/astro-with-static-extraction/package.json
@@ -15,7 +15,7 @@
         "astro": "^3.5.3"
     },
     "devDependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/css-extractor.vite": "workspace:^"
     }
 }
diff --git a/examples/cdn/index.html b/examples/cdn/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="preload" as="script" href="https://cdn.master.co/css@rc">
+    <link rel="preload" as="script" href="https://cdn.master.co/css-runtime@rc">
     <link rel="preload" as="style" href="https://cdn.master.co/normal.css@rc">
     <link rel="stylesheet" href="https://cdn.master.co/normal.css@rc">
     <script>
@@ -14,7 +14,7 @@
             }
         }
     </script>
-    <script src="https://cdn.master.co/css@rc"></script>
+    <script src="https://cdn.master.co/css-runtime@rc"></script>
 </head>
 
 <body>

diff --git a/examples/eslint/package.json b/examples/eslint/package.json
@@ -3,7 +3,7 @@
     "devDependencies": {
         "@angular-eslint/template-parser": "^16.2.0",
         "@master/css.react": "workspace:^",
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/eslint-config-css": "workspace:^",
         "@master/eslint-plugin-css": "workspace:^",
         "@typescript-eslint/parser": "^6.9.0",

diff --git a/examples/esm.sh/index.html b/examples/esm.sh/index.html
@@ -8,8 +8,8 @@
     <link rel="stylesheet" href="https://esm.sh/@master/normal.css@rc?css">
     <link rel="modulepreload" href="https://esm.sh/@master/css@rc">
     <script type="module">
-        import { initRuntime } from 'https://esm.sh/@master/css@rc'
-        initRuntime({
+        import { initCSSRuntime } from 'https://esm.sh/@master/css@rc'
+        initCSSRuntime({
             variables: {
                 primary: '#000000'
             }

diff --git a/examples/laravel-with-runtime-rendering/package.json b/examples/laravel-with-runtime-rendering/package.json
@@ -12,6 +12,6 @@
         "vite": "^4.0.0"
     },
     "dependencies": {
-        "@master/css": "workspace:^"
+        "@master/css-runtime": "workspace:^"
     }
 }
diff --git a/examples/laravel-with-runtime-rendering/resources/js/app.js b/examples/laravel-with-runtime-rendering/resources/js/app.js
@@ -1,5 +1,5 @@
 import './bootstrap'
-import { initRuntime } from '@master/css'
+import { initCSSRuntime } from '@master/css-runtime'
 import config from '../../master.css'
 
-initRuntime(config)
+initCSSRuntime(config)
diff --git a/examples/lit/package.json b/examples/lit/package.json
@@ -10,7 +10,7 @@
     },
     "dependencies": {
         "lit": "^2.7.5",
-        "@master/css": "workspace:^"
+        "@master/css-runtime": "workspace:^"
     },
     "devDependencies": {
         "typescript": "^5.0.2",

diff --git a/examples/lit/src/my-element.ts b/examples/lit/src/my-element.ts
@@ -2,7 +2,7 @@ import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import masterLogo from './assets/master.svg'
 import litLogo from './assets/lit.svg'
-import { RuntimeCSS } from '@master/css'
+import CSSRuntime from '@master/css-runtime'
 import config from '../master.css'
 
 /**
@@ -14,7 +14,7 @@ import config from '../master.css'
 @customElement('my-element')
 export class MyElement extends LitElement {
 
-    runtimeCSS: RuntimeCSS | undefined
+    cssRuntime: CSSRuntime | undefined
 
     /**
      * Copy for the read the docs hint.
@@ -30,12 +30,13 @@ export class MyElement extends LitElement {
 
     connectedCallback() {
         super.connectedCallback()
-        this.runtimeCSS = new RuntimeCSS(this.shadowRoot, config)
+        this.cssRuntime = new CSSRuntime(this.shadowRoot, config)
+            .observe()
     }
 
     disconnectedCallback() {
         super.disconnectedCallback()
-        this.runtimeCSS?.destroy()
+        this.cssRuntime?.destroy()
     }
 
     render() {

diff --git a/examples/next.js-with-progressive-rendering/app/layout.tsx b/examples/next.js-with-progressive-rendering/app/layout.tsx
@@ -1,5 +1,5 @@
 import './globals.css'
-import { CSSProvider } from '@master/css.react'
+import { CSSRuntimeProvider } from '@master/css.react'
 import config from '../master.css'
 
 export const metadata = {
@@ -15,9 +15,9 @@ export default function RootLayout({
     return (
         <html lang="en" style={process.env.NODE_ENV === 'development' ? { display: 'none' } : undefined}>
             <body>
-                <CSSProvider config={config}>
+                <CSSRuntimeProvider config={config}>
                     {children}
-                </CSSProvider>
+                </CSSRuntimeProvider>
             </body>
         </html>
     )

diff --git a/examples/next.js-with-progressive-rendering/package.json b/examples/next.js-with-progressive-rendering/package.json
@@ -9,7 +9,7 @@
         "lint": "next lint"
     },
     "dependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/css-renderer": "workspace:^",
         "@master/css.react": "workspace:^",
         "@types/node": "^20.2.5",

diff --git a/examples/next.js-with-runtime-rendering/app/layout.tsx b/examples/next.js-with-runtime-rendering/app/layout.tsx
@@ -1,5 +1,5 @@
 import './globals.css'
-import { CSSProvider } from '@master/css.react'
+import { CSSRuntimeProvider } from '@master/css.react'
 import config from '../master.css'
 
 export const metadata = {
@@ -15,9 +15,9 @@ export default function RootLayout({
     return (
         <html lang="en" style={{ display: 'none' }}>
             <body>
-                <CSSProvider config={config}>
+                <CSSRuntimeProvider config={config}>
                     {children}
-                </CSSProvider>
+                </CSSRuntimeProvider>
             </body>
         </html>
     )

diff --git a/examples/next.js-with-runtime-rendering/package.json b/examples/next.js-with-runtime-rendering/package.json
@@ -9,7 +9,7 @@
         "lint": "next lint"
     },
     "dependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/css.react": "workspace:^",
         "@types/node": "^20.2.5",
         "@types/react": "^18.2.8",

diff --git a/examples/next.js-with-static-extraction/package.json b/examples/next.js-with-static-extraction/package.json
@@ -9,7 +9,7 @@
         "lint": "next lint"
     },
     "dependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/css-extractor.webpack": "workspace:^",
         "@types/node": "^20.2.5",
         "@types/react": "^18.2.8",

diff --git a/examples/nuxt.js-with-progressive-rendering/app.vue b/examples/nuxt.js-with-progressive-rendering/app.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from 'vue'
-const CSSProvider = defineAsyncComponent(async () => (await import('@master/css.vue')).CSSProvider)
+const CSSRuntimeProvider = defineAsyncComponent(async () => (await import('@master/css.vue')).CSSRuntimeProvider)
 </script>
 
 <template>
-    <CSSProvider :config="import('./master.css')">
+    <CSSRuntimeProvider :config="import('./master.css')">
         <NuxtWelcome class="{font:32!;font:heavy!;my:20;ls:-.02em}_h1@sm" />
-    </CSSProvider>
+    </CSSRuntimeProvider>
 </template>
diff --git a/examples/nuxt.js-with-runtime-rendering/app.vue b/examples/nuxt.js-with-runtime-rendering/app.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { CSSProvider } from '@master/css.vue'
+import { CSSRuntimeProvider } from '@master/css.vue'
 import config from './master.css'
 </script>
 
 <template>
-    <CSSProvider :config="config">
+    <CSSRuntimeProvider :config="config">
         <NuxtWelcome class="{font:32!;font:heavy!;my:20;ls:-.02em}_h1@sm" />
-    </CSSProvider>
+    </CSSRuntimeProvider>
 </template>
diff --git a/examples/nuxt.js-with-runtime-rendering/package.json b/examples/nuxt.js-with-runtime-rendering/package.json
@@ -9,7 +9,7 @@
         "postinstall": "nuxt prepare"
     },
     "dependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/css.vue": "workspace:^"
     },
     "devDependencies": {

diff --git a/examples/nuxt.js-with-static-extraction/package.json b/examples/nuxt.js-with-static-extraction/package.json
@@ -8,7 +8,7 @@
         "preview": "nuxt prepare && nuxt preview"
     },
     "devDependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/css-extractor.vite": "workspace:^",
         "@types/node": "^18",
         "nuxt": "^3.5.2"

diff --git a/examples/react-with-progressive-rendering/package.json b/examples/react-with-progressive-rendering/package.json
@@ -13,7 +13,7 @@
         "debug": "node --inspect-brk server"
     },
     "dependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/css-server": "workspace:^",
         "@master/css.react": "workspace:^",
         "react": "^18.2.0",

diff --git a/examples/react-with-progressive-rendering/src/entry-client.jsx b/examples/react-with-progressive-rendering/src/entry-client.jsx
@@ -1,13 +1,13 @@
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import { lazy } from 'react'
-import { ThemeServiceProvider, CSSProvider } from '@master/css.react'
+import { ThemeServiceProvider, CSSRuntimeProvider } from '@master/css.react'
 
 ReactDOM.hydrateRoot(
     document.getElementById('root'),
-    <CSSProvider config={import('../master.css')}>
+    <CSSRuntimeProvider config={import('../master.css')}>
         <ThemeServiceProvider options={{ default: 'system' }}>
             <App />
         </ThemeServiceProvider>
-    </CSSProvider>,
+    </CSSRuntimeProvider>,
 )
diff --git a/examples/react-with-runtime-rendering/package.json b/examples/react-with-runtime-rendering/package.json
@@ -9,7 +9,7 @@
         "preview": "pnpm run build && vite preview"
     },
     "dependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/css.react": "workspace:^",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"

diff --git a/examples/react-with-runtime-rendering/src/main.tsx b/examples/react-with-runtime-rendering/src/main.tsx
@@ -2,13 +2,13 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
-import { CSSProvider } from '@master/css.react'
+import { CSSRuntimeProvider } from '@master/css.react'
 import config from '../master.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
-        <CSSProvider config={config}>
+        <CSSRuntimeProvider config={config}>
             <App />
-        </CSSProvider>
+        </CSSRuntimeProvider>
     </React.StrictMode>,
 )
diff --git a/examples/react-with-static-extraction/package.json b/examples/react-with-static-extraction/package.json
@@ -13,7 +13,7 @@
         "react-dom": "^18.2.0"
     },
     "devDependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/css-extractor.vite": "workspace:^",
         "@types/react": "^18.0.37",
         "@types/react-dom": "^18.0.11",

diff --git a/examples/remix/app/root.tsx b/examples/remix/app/root.tsx
@@ -7,7 +7,7 @@ import {
     Scripts,
     ScrollRestoration,
 } from '@remix-run/react'
-import { initRuntime } from '@master/css'
+import { initCSSRuntime } from '@master/css-runtime'
 import { useLayoutEffect } from 'react'
 
 export const meta: MetaFunction = () => ({
@@ -18,7 +18,7 @@ export const meta: MetaFunction = () => ({
 
 export default function App() {
     useLayoutEffect(() => {
-        initRuntime()
+        initCSSRuntime()
     })
     return (
         <html lang="en">

diff --git a/examples/remix/package.json b/examples/remix/package.json
@@ -17,7 +17,7 @@
         "react-dom": "^18.2.0"
     },
     "devDependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@remix-run/dev": "^1.12.0",
         "@remix-run/eslint-config": "^1.12.0",
         "@types/react": "^18.0.25",

diff --git a/examples/svelte-with-progressive-rendering/package.json b/examples/svelte-with-progressive-rendering/package.json
@@ -10,7 +10,7 @@
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
     },
     "dependencies": {
-        "@master/css": "workspace:^",
+        "@master/css-runtime": "workspace:^",
         "@master/css-server": "workspace:^",
         "@master/css.svelte": "workspace:^"
     },