!refactor(renderer): rename renderStaticStyles to renderGlobalStyles

Author: chrisrzhou

lib/create-theme-renderer.js

@@ -84,17 +84,17 @@ export const createThemeRenderer = (options = {}) => {
   const render = () => renderToDom(renderer);
 
   /**
-   * Renders static styles (e.g. global CSS)
+   * Renders global styles
    *
    * Simplified when https://github.com/robinweser/fela/issues/876 is resolved
-   * @param {StyleObject} initialStaticStyles
+   * @param {StyleObject} initialGlobalStyles
    * @returns {void}
    */
-  const renderStaticStyles = (initialStaticStyles) => {
-    const staticStyles = enableCssVariables
-      ? merge({':root': cssVariables})(initialStaticStyles)
-      : initialStaticStyles;
-    for (const [selector, style] of Object.entries(staticStyles)) {
+  const renderGlobalStyles = (initialGlobalStyles) => {
+    const globalStyles = enableCssVariables
+      ? merge({':root': cssVariables})(initialGlobalStyles)
+      : initialGlobalStyles;
+    for (const [selector, style] of Object.entries(globalStyles)) {
       /** @type {StyleObject} */
       const processedStyle = plugins.reduce(
         (_acc, plugin) => plugin(style, 'STATIC', renderer, {theme}),
@@ -121,7 +121,7 @@ export const createThemeRenderer = (options = {}) => {
   return {
     clear: renderer.clear,
     render,
-    renderStaticStyles,
+    renderGlobalStyles,
     renderStyle,
     _subscribe: renderer.subscribe,
   };

readme.md

@@ -32,7 +32,7 @@ To further explore uinix-theme, visit the [Theme Playground] for interactive dem
   - [Create a theme](#create-a-theme)
   - [Create a theme renderer](#create-a-theme-renderer)
   - [Render themed styles](#render-themed-styles)
-  - [Render themed static styles](#render-themed-static-styles)
+  - [Render themed global styles](#render-themed-global-styles)
   - [Render themed CSS keyframes](#render-themed-css-keyframes)
   - [Configure and render themed atomic CSS](#configure-and-render-themed-atomic-css)
   - [Configure and render themed CSS variables](#configure-and-render-themed-css-variables)
@@ -269,12 +269,12 @@ Yields the following rendered CSS:
 
 > **Note:** Please refer to the examples of *style* and *themed style* in the [§ Glossary](#glossary) for details on authoring CSS-in-JS styles and how the themed styles are resolved by the *theme renderer* using the provided *theme* and *theme spec*.
 
-### Render themed static styles
+### Render themed global styles
 
-You can render themed *static styles* to the global CSS styles with `renderer.renderStaticStyles`:
+You can render themed *global styles* with `renderer.renderGlobalStyles`:
 
 ```js
-const style = {
+const globalStyles = {
   body: {
     color: 'brand.primary',
     padding: 'm',
@@ -288,7 +288,7 @@ const style = {
   },
 };
 
-renderer.renderStaticStyles(style);
+renderer.renderGlobalStyles(globalStyles);
 ```
 
 Yields the following global CSS styles:
@@ -425,9 +425,9 @@ const renderer = createThemeRenderer({
 
 renderer.render();
 
-const staticStyles = {...}; // your other global styles
+const globalStyles = {...}; // your other global styles
 
-renderer.renderStaticStyles(staticStyles);
+renderer.renderGlobalStyles(globalStyles);
 ```
 
 Yields the following rendered global CSS:
@@ -739,7 +739,7 @@ Enables rendering styles as *atomic CSS*.
 ###### `options.enableCssVariables` (`boolean`, optional, default: `false`)
 
 When enabled, will support *CSS variables* features in the `renderer` methods:
-- `renderer.renderStaticStyles` will now render the `theme` as *CSS variables* under the `:root` pseudo class.
+- `renderer.renderGlobalStyles` will now render the `theme` as *CSS variables* under the `:root` pseudo class.
 - `renderer.renderStyle` will now resolve *themed styles* into its corresponding *CSS variables*.
 
 ###### `options.namespace` (`string`, optional, default: `''`)
@@ -771,7 +771,7 @@ Returns a *theme renderer* with methods to resolve and render *themed styles* to
 - `renderer.clear()`: Clears and removes all rendered CSS.
 - `renderer.render()`: Initializes the renderer.
 - `renderer.renderStyle(style, props?)`: Resolves and renders the provided *style object* or *style rule*).  Accepts optional *style props*.
-- `renderer.renderStaticStyles(style)`: Resolves and renders the provided *static style* object.
+- `renderer.renderGlobalStyles(style)`: Resolves and renders the provided *global styles* object.
 
 <details>
 <summary>Example</summary>
@@ -802,16 +802,16 @@ Initialize the renderer in a single entry point in your code with:
 renderer.render();
 ```
 
-Render *static styles* to the global CSS with:
+Render *global styles* with:
 
 ```js
-const staticStyles = {
+const globalStyles = {
   'body': {...}
   '*': {...},
   '.vendor-classname': {...}
 };
 
-renderer.renderStaticStyles(staticStyles);
+renderer.renderGlobalStyles(globalStyles);
 ```
 
 Render either *style objects* or *style rules* with:
@@ -1046,12 +1046,12 @@ The CSS-in-JS syntax is fairly ubiquitous across CSS frameworks and we provide a
     ```
   </details>
 - ***Style props***: an object used as an argument for a *style rule*.
-- ***Static style***: refers to static *style objects* that are usually defined once and rendered to the global style sheet.
+- ***Global styles***: refers to global *style objects* that are usually defined once and rendered to the global style sheet.
   <details>
     <summary>Example</summary>
 
     ```js
-    const staticStyles = {
+    const globalStyles = {
       '*': {
         boxSizing: 'border-box',
       },

test/create-theme-renderer.js

@@ -2,7 +2,7 @@ import assert from 'node:assert';
 import test from 'node:test';
 
 import {createThemeRenderer} from '../index.js';
-import {resolveRenderStaticStyles, resolveRenderStyle} from './util.js';
+import {resolveRenderGlobalStyles, resolveRenderStyle} from './util.js';
 
 test('createThemeRenderer', async (t) => {
   await t.test('renderer.render', (t) => {
@@ -13,10 +13,10 @@ test('createThemeRenderer', async (t) => {
     });
   });
 
-  await t.test('renderer.renderStaticStyles', async (t) => {
-    await t.test('should render static style', () => {
+  await t.test('renderer.renderGlobalStyles', async (t) => {
+    await t.test('should render global styles', () => {
       assert.deepEqual(
-        resolveRenderStaticStyles({
+        resolveRenderGlobalStyles({
           html: {
             color: 'white',
           },
@@ -47,9 +47,9 @@ test('createThemeRenderer', async (t) => {
       );
     });
 
-    await t.test('should render themed static style', () => {
+    await t.test('should render themed global styles', () => {
       assert.deepEqual(
-        resolveRenderStaticStyles(
+        resolveRenderGlobalStyles(
           {
             'a:hover': {
               color: 'brand.primary',
@@ -79,9 +79,9 @@ test('createThemeRenderer', async (t) => {
     });
 
     // Inverted when https://github.com/robinweser/fela/issues/876 is resolved
-    await t.test('should NOT render responsive static style', () => {
+    await t.test('should NOT render responsive global styles', () => {
       assert.deepEqual(
-        resolveRenderStaticStyles(
+        resolveRenderGlobalStyles(
           {
             'a:hover': {
               color: ['red', 'green', 'blue'],
@@ -104,7 +104,7 @@ test('createThemeRenderer', async (t) => {
 
     await t.test('should render theme as css variables under `:root`', () => {
       assert.deepEqual(
-        resolveRenderStaticStyles(
+        resolveRenderGlobalStyles(
           {},
           {
             enableCssVariables: true,
@@ -149,7 +149,7 @@ test('createThemeRenderer', async (t) => {
       'should render theme as css variables under `:root` prefixed with provided namespace',
       () => {
         assert.deepEqual(
-          resolveRenderStaticStyles(
+          resolveRenderGlobalStyles(
             {},
             {
               enableCssVariables: true,
@@ -182,10 +182,10 @@ test('createThemeRenderer', async (t) => {
     );
 
     await t.test(
-      'should evaluate static styles as css variables if enabled',
+      'should evaluate global styles as css variables if enabled',
       () => {
         assert.deepEqual(
-          resolveRenderStaticStyles(
+          resolveRenderGlobalStyles(
             {
               a: {
                 color: 'brand.primary',
@@ -228,10 +228,10 @@ test('createThemeRenderer', async (t) => {
     );
 
     await t.test(
-      'should merge css variables under :root with other static styles',
+      'should merge css variables under :root with other global styles',
       () => {
         assert.deepEqual(
-          resolveRenderStaticStyles(
+          resolveRenderGlobalStyles(
             {
               ':root': {
                 '--custom-css-var': '8px',

test/util.js

@@ -2,7 +2,7 @@ import {filterEntries} from 'uinix-fp';
 
 import {createThemeRenderer} from '../index.js';
 
-export const resolveRenderStaticStyles = (staticStyles, options = {}) => {
+export const resolveRenderGlobalStyles = (globalStyles, options = {}) => {
   const renderer = createThemeRenderer(options);
 
   const actual = [];
@@ -15,7 +15,7 @@ export const resolveRenderStaticStyles = (staticStyles, options = {}) => {
   };
 
   const subscription = renderer._subscribe(listener);
-  renderer.renderStaticStyles(staticStyles);
+  renderer.renderGlobalStyles(globalStyles);
   subscription.unsubscribe();
 
   return actual;