Improve: Rename CSSRuntime to RuntimeCSS

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 CSSRuntime from '@master/css-runtime'
+import RuntimeCSS 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: CSSRuntime | undefined
+    runtimeCSS: RuntimeCSS | undefined
 
     /**
      * Copy for the read the docs hint.
@@ -30,7 +30,7 @@ export class MyElement extends LitElement {
 
     connectedCallback() {
         super.connectedCallback()
-        this.runtimeCSS = new CSSRuntime(this.shadowRoot, config)
+        this.runtimeCSS = new RuntimeCSS(this.shadowRoot, config)
             .observe()
     }
 

packages/react/src/CSSRuntimeProvider.tsx

@@ -1,20 +1,20 @@
 'use client'
 
 import type { Config } from '@master/css'
-import { CSSRuntime } from '@master/css-runtime'
+import { RuntimeCSS } from '@master/css-runtime'
 import { useEffect, useLayoutEffect, createContext, useContext, useState } from 'react'
 
-export const CSSRuntimeContext = createContext<CSSRuntime | undefined>(undefined)
+export const CSSRuntimeContext = createContext<RuntimeCSS | undefined>(undefined)
 export const useCSSRuntime = () => useContext(CSSRuntimeContext)
 
 export function CSSRuntimeProvider({ children, config, root }: {
     children: React.ReactNode,
     config?: Config | Promise<any>,
     root?: Document | ShadowRoot
 }) {
-    const [runtimeCSS, setCSSRuntime] = useState<CSSRuntime>();
+    const [runtimeCSS, setCSSRuntime] = useState<RuntimeCSS>();
     (typeof window !== 'undefined' ? useLayoutEffect : useEffect)(() => {
-        let newCSSRuntime: CSSRuntime | undefined = globalThis.runtimeCSSs?.find((eachCSS) => eachCSS.root === root)
+        let newCSSRuntime: RuntimeCSS | undefined = globalThis.runtimeCSSs?.find((eachCSS) => eachCSS.root === root)
         if (newCSSRuntime) {
             setCSSRuntime(newCSSRuntime)
         } else if (!runtimeCSS) {
@@ -23,7 +23,7 @@ export function CSSRuntimeProvider({ children, config, root }: {
                 if (existingCSS) {
                     setCSSRuntime(existingCSS)
                 } else {
-                    newCSSRuntime = new CSSRuntime(root, resolvedConfig).observe()
+                    newCSSRuntime = new RuntimeCSS(root, resolvedConfig).observe()
                     setCSSRuntime(newCSSRuntime)
                 }
             }

packages/runtime/src/core.ts

@@ -3,7 +3,7 @@ import type { Rule, Config } from '@master/css'
 
 import './types/global'
 
-export class CSSRuntime extends MasterCSS {
+export class RuntimeCSS extends MasterCSS {
     readonly host: Element
     readonly observing = false
     readonly container: HTMLElement | ShadowRoot
@@ -19,7 +19,7 @@ export class CSSRuntime extends MasterCSS {
             this.container = document.head
             this.host = document.documentElement
         } else {
-            this.container = this.root as CSSRuntime['container']
+            this.container = this.root as RuntimeCSS['container']
             this.host = (this.root as ShadowRoot).host
         }
         runtimeCSSs.push(this)
@@ -415,9 +415,9 @@ export class CSSRuntime extends MasterCSS {
     }
 }
 
-export const runtimeCSSs: CSSRuntime[] = [];
+export const runtimeCSSs: RuntimeCSS[] = [];
 
 (() => {
-    globalThis.CSSRuntime = CSSRuntime
+    globalThis.RuntimeCSS = RuntimeCSS
     globalThis.runtimeCSSs = runtimeCSSs
 })()

packages/runtime/src/index.ts

@@ -1,2 +1,2 @@
-export { CSSRuntime, CSSRuntime as default } from './core'
+export { RuntimeCSS, RuntimeCSS as default } from './core'
 export { default as initCSSRuntime } from './init-css-runtime'

packages/runtime/src/init-css-runtime.ts

@@ -1,12 +1,12 @@
-import { CSSRuntime } from './core'
+import { RuntimeCSS } from './core'
 import type { Config } from '@master/css'
 
 /**
- * Initialize a new CSSRuntime instance and observe the target root
+ * Initialize a new RuntimeCSS instance and observe the target root
  * @param config master css config
  * @param targetRoot target root to observe
  * @returns master css instance
  */
-export default function initCSSRuntime(config?: Config): CSSRuntime {
-    return new CSSRuntime(document, config).observe()
+export default function initCSSRuntime(config?: Config): RuntimeCSS {
+    return new RuntimeCSS(document, config).observe()
 }

packages/runtime/src/types/global.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-var */
 import type { Config } from '@master/css'
-import type { CSSRuntime as _CSSRuntime } from '../core'
+import type { RuntimeCSS as _CSSRuntime } from '../core'
 
 declare global {
-    var CSSRuntime: typeof _CSSRuntime
+    var RuntimeCSS: typeof _CSSRuntime
     var runtimeCSSs: _CSSRuntime[]
     var runtimeCSS: _CSSRuntime
     var masterCSSConfig: Config

packages/svelte/src/CSSRuntimeProvider.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
     import type { Config } from "@master/css";
-    import CSSRuntime from "@master/css-runtime";
+    import RuntimeCSS from "@master/css-runtime";
     import { onMount, setContext } from "svelte";
     import { writable } from "svelte/store";
     import { cssRuntimeSymbol } from "./css-runtime";
     export let config: Config | Promise<Config> | Promise<any>;
     export let root: Document | ShadowRoot | undefined = undefined;
-    const runtimeCSS = writable<CSSRuntime>();
+    const runtimeCSS = writable<RuntimeCSS>();
     onMount(() => {
-        let newCSSRuntime: CSSRuntime;
+        let newCSSRuntime: RuntimeCSS;
         if (!$runtimeCSS) {
             const init = (resolvedConfig?: Config) => {
                 const existingCSSRuntime = (globalThis as any).runtimeCSSs.find(
-                    (eachCSS: CSSRuntime) => eachCSS.root === root
+                    (eachCSS: RuntimeCSS) => eachCSS.root === root
                 );
                 if (existingCSSRuntime) {
                     runtimeCSS.set(existingCSSRuntime);
                 } else {
-                    newCSSRuntime = new CSSRuntime(root, resolvedConfig).observe();
+                    newCSSRuntime = new RuntimeCSS(root, resolvedConfig).observe();
                     runtimeCSS.set(newCSSRuntime);
                 }
             };

packages/svelte/src/css-runtime.ts

@@ -1,9 +1,9 @@
-import type { CSSRuntime } from '@master/css-runtime'
+import type { RuntimeCSS } from '@master/css-runtime'
 import { getContext } from 'svelte'
 import type { Writable } from 'svelte/store'
 
 export const cssRuntimeSymbol = Symbol()
 
 export function getCSSRuntime() {
-    return getContext<Writable<CSSRuntime> | undefined>(cssRuntimeSymbol)
+    return getContext<Writable<RuntimeCSS> | undefined>(cssRuntimeSymbol)
 }

packages/vue/src/CSSRuntimeProvider.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import type { Config } from '@master/css'
-import CSSRuntime from '@master/css-runtime'
+import RuntimeCSS from '@master/css-runtime'
 import { onMounted, onBeforeUnmount, ref, provide } from 'vue'
 
 const props = defineProps<{
@@ -16,11 +16,11 @@ onMounted(() => {
     if (typeof window === 'undefined') { return }
     if (!runtimeCSS.value) {
         const init = (resolvedConfig: Config | undefined) => {
-            const existingCSSRuntime = (globalThis as any).runtimeCSSs.find((eachCSS: CSSRuntime) => eachCSS.root === props.root)
+            const existingCSSRuntime = (globalThis as any).runtimeCSSs.find((eachCSS: RuntimeCSS) => eachCSS.root === props.root)
             if (existingCSSRuntime) {
                 runtimeCSS.value = existingCSSRuntime
             } else {
-                newCSSRuntime.value = new CSSRuntime(props.root, resolvedConfig).observe()
+                newCSSRuntime.value = new RuntimeCSS(props.root, resolvedConfig).observe()
                 runtimeCSS.value = newCSSRuntime.value
             }
         }

website/app/[locale]/(root)/docs/runtime/content.mdx

@@ -5,9 +5,9 @@ The `Runtime` extends the `MasterCSS` and only works in the browser environment.
 
 Create a Master Runtime CSS instance with your custom [configuration](/docs/configuration):
 ```ts
-import { CSSRuntime } from '@master/css-runtime'
+import { RuntimeCSS } from '@master/css-runtime'
 
-const runtimeCSS = new CSSRuntime(config)
+const runtimeCSS = new RuntimeCSS(config)
 ```
 
 ### `.root`
@@ -94,14 +94,14 @@ css.reset()
 ## Global
 ### `globalThis.runtimeCSS`
 Record the registered root `document` Runtime CSS instance; the field will be recorded only after executing `js css.observe()`.
-<DocProp defaultValue="undefined" types={['CSSRuntime']} />
+<DocProp defaultValue="undefined" types={['RuntimeCSS']} />
 
 ### `globalThis.runtimeCSSs`
-All objects instantiated via `js new CSSRuntime()`.
-<DocProp defaultValue="[]" types={['CSSRuntime[]']} />
+All objects instantiated via `js new RuntimeCSS()`.
+<DocProp defaultValue="[]" types={['RuntimeCSS[]']} />
 
-### `globalThis.CSSRuntime`
-<DocProp defaultValue="CSSRuntime" types={['typeof CSSRuntime']} />
+### `globalThis.RuntimeCSS`
+<DocProp defaultValue="RuntimeCSS" types={['typeof RuntimeCSS']} />
 
 ---
 
@@ -121,7 +121,7 @@ const css = initCSSRuntime()
 ```
 Equivalent to:
 ```ts
-import { CSSRuntime } from '@master/css-runtime'
+import { RuntimeCSS } from '@master/css-runtime'
 
-const runtimeCSS = new CSSRuntime().observe()
+const runtimeCSS = new RuntimeCSS().observe()
 ```