@griffel/react 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+    MIT License
+
+    Copyright (c) Microsoft Corporation.
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE

package/README.md

@@ -0,0 +1,204 @@
+# Griffel for React
+
+## Install
+
+```bash
+npm install @griffel/react
+# or
+yarn add @griffel/react
+```
+
+## API
+
+### `makeStyles()`
+
+Is used to define styles, returns a React hook that should be called inside a component:
+
+```tsx
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  button: { color: 'red' },
+  icon: { paddingLeft: '5px' },
+});
+
+function Component() {
+  const classes = useClasses();
+
+  return (
+    <div>
+      <button className={classes.button} />
+      <span className={classes.icon} />
+    </div>
+  );
+}
+```
+
+### `mergeClasses()`
+
+> 💡 **It is not possible to simply concatenate classes returned by `useClasses()`.**
+
+There are cases where you need to merge classes from multiple `useClasses` calls.
+
+To properly merge the classes, you need to use `mergeClasses()` function, which performs merge and deduplication of atomic classes generated by `makeStyles()`.
+
+```tsx
+import { mergeClasses, makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  blueBold: {
+    color: 'blue',
+    fontWeight: 'bold',
+  },
+  red: {
+    color: 'red',
+  },
+});
+
+function Component() {
+  const classes = useClasses();
+
+  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }
+  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }
+
+  return (
+    <>
+      <div className={firstClassName} />
+      <div className={secondClassName} />
+    </>
+  );
+}
+```
+
+## `makeStaticStyles()`
+
+Creates styles attached to a global selector. Styles can be defined via objects:
+
+```tsx
+import { makeStaticStyles } from '@griffel/react';
+
+const useStaticStyles = makeStaticStyles({
+  '@font-face': {
+    fontFamily: 'Open Sans',
+    src: `url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+         url("/fonts/OpenSans-Regular-webfont.woff") format("woff")`,
+  },
+  body: {
+    background: 'red',
+  },
+
+  /**
+   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting
+   *
+   * Not supported:
+   * .some {
+   *   .class { ... },
+   *   ':hover': { ... }
+   * }
+   *
+   * Supported:
+   * '.some.class': { ... }
+   * '.some.class:hover': { ... }
+   */
+});
+
+function App() {
+  useStaticStyles();
+
+  return <div />;
+}
+```
+
+Or with string & arrays of strings/objects:
+
+```tsx
+import { makeStaticStyles } from '@griffel/react';
+
+const useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');
+const useStaticStyles2 = makeStaticStyles([
+  {
+    '@font-face': {
+      fontFamily: 'My Font',
+      src: `url(my_font.woff)`,
+    },
+  },
+  'html { line-height: 20px; }',
+]);
+
+function App() {
+  useStaticStyles1();
+  useStaticStyles2();
+
+  return <div />;
+}
+```
+
+## Features support
+
+### 📃 pseudo & class selectors, at-rules, global styles
+
+`makeStyles()` supports pseudo, class selectors and at-rules.
+
+```ts
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ':active': { color: 'pink' },
+    ':hover': { color: 'blue' },
+    // :link, :focus, etc.
+
+    '.foo': { color: 'black' },
+    ':nth-child(2n)': { background: '#fafafa' },
+
+    '@media screen and (max-width: 992px)': { color: 'orange' },
+    '@supports (display: grid)': { color: 'red' },
+  },
+});
+```
+
+Another useful feature is `:global()` selector, it allows connecting local styles with global selectors.
+
+```ts
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ':global(html[data-whatintent="mouse"])': { background: 'yellow' },
+    // outputs: html[data-whatintent="mouse"] .abcd { background: yellow }
+  },
+});
+```
+
+### 🎞 `keyframes` (animations)
+
+`keyframes` are supported via `animationName` property that can be defined as an object or an array of objects:
+
+```tsx
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    animationIterationCount: 'infinite',
+    animationDuration: '3s',
+    animationName: {
+      from: { transform: 'rotate(0deg)' },
+      to: { transform: 'rotate(360deg)' },
+    },
+  },
+  array: {
+    animationIterationCount: 'infinite',
+    animationDuration: '3s',
+    animationName: [
+      {
+        from: { transform: 'rotate(0deg)' },
+        to: { transform: 'rotate(360deg)' },
+      },
+      {
+        from: { height: '100px' },
+        to: { height: '200px' },
+      },
+    ],
+  },
+});
+```

package/RendererContext.cjs.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@griffel/core');
+var React = require('react');
+
+/**
+ * Verifies if an application can use DOM.
+ */
+
+function canUseDOM() {
+  return typeof window !== 'undefined' && !!(window.document && // eslint-disable-next-line deprecation/deprecation
+  window.document.createElement);
+}
+/**
+ * @private
+ */
+
+
+const RendererContext = /*#__PURE__*/React.createContext( /*#__PURE__*/core.createDOMRenderer());
+/**
+ * @public
+ */
+
+const RendererProvider = ({
+  children,
+  renderer,
+  targetDocument
+}) => {
+  if (canUseDOM()) {
+    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after
+    // mounting.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useMemo(() => {
+      // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
+      // avoid double insertion of classes
+      core.rehydrateRendererCache(renderer, targetDocument);
+    }, [renderer, targetDocument]);
+  }
+
+  return /*#__PURE__*/React.createElement(RendererContext.Provider, {
+    value: renderer
+  }, children);
+};
+/**
+ * Returns an instance of current makeStyles() renderer.
+ *
+ * @private
+ */
+
+function useRenderer() {
+  return React.useContext(RendererContext);
+}
+
+exports.RendererProvider = RendererProvider;
+exports.useRenderer = useRenderer;

package/RendererContext.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { GriffelRenderer } from '@griffel/core';
+export interface RendererProviderProps {
+    /** An instance of Griffel renderer. */
+    renderer: GriffelRenderer;
+    /**
+     * Document used to insert CSS variables to head
+     */
+    targetDocument?: Document;
+}
+/**
+ * @public
+ */
+export declare const RendererProvider: React.FC<RendererProviderProps>;
+/**
+ * Returns an instance of current makeStyles() renderer.
+ *
+ * @private
+ */
+export declare function useRenderer(): GriffelRenderer;

package/RendererContext.esm.js

@@ -0,0 +1,52 @@
+import { rehydrateRendererCache, createDOMRenderer } from '@griffel/core';
+import * as React from 'react';
+
+/**
+ * Verifies if an application can use DOM.
+ */
+
+function canUseDOM() {
+  return typeof window !== 'undefined' && !!(window.document && // eslint-disable-next-line deprecation/deprecation
+  window.document.createElement);
+}
+/**
+ * @private
+ */
+
+
+const RendererContext = /*#__PURE__*/React.createContext( /*#__PURE__*/createDOMRenderer());
+/**
+ * @public
+ */
+
+const RendererProvider = ({
+  children,
+  renderer,
+  targetDocument
+}) => {
+  if (canUseDOM()) {
+    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after
+    // mounting.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useMemo(() => {
+      // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
+      // avoid double insertion of classes
+      rehydrateRendererCache(renderer, targetDocument);
+    }, [renderer, targetDocument]);
+  }
+
+  return /*#__PURE__*/React.createElement(RendererContext.Provider, {
+    value: renderer
+  }, children);
+};
+/**
+ * Returns an instance of current makeStyles() renderer.
+ *
+ * @private
+ */
+
+function useRenderer() {
+  return React.useContext(RendererContext);
+}
+
+export { RendererProvider, useRenderer };

package/TextDirectionContext.cjs.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * @private
+ */
+
+const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
+/**
+ * @public
+ */
+
+const TextDirectionProvider = ({
+  children,
+  dir
+}) => {
+  return /*#__PURE__*/React.createElement(TextDirectionContext.Provider, {
+    value: dir
+  }, children);
+};
+/**
+ * Returns current directionality of the element's text.
+ *
+ * @private
+ */
+
+function useTextDirection() {
+  return React.useContext(TextDirectionContext);
+}
+
+exports.TextDirectionProvider = TextDirectionProvider;
+exports.useTextDirection = useTextDirection;

package/TextDirectionContext.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface TextDirectionProviderProps {
+    /** Indicates the directionality of the element's text. */
+    dir: 'ltr' | 'rtl';
+}
+/**
+ * @public
+ */
+export declare const TextDirectionProvider: React.FC<TextDirectionProviderProps>;
+/**
+ * Returns current directionality of the element's text.
+ *
+ * @private
+ */
+export declare function useTextDirection(): "ltr" | "rtl";

package/TextDirectionContext.esm.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+/**
+ * @private
+ */
+
+const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
+/**
+ * @public
+ */
+
+const TextDirectionProvider = ({
+  children,
+  dir
+}) => {
+  return /*#__PURE__*/React.createElement(TextDirectionContext.Provider, {
+    value: dir
+  }, children);
+};
+/**
+ * Returns current directionality of the element's text.
+ *
+ * @private
+ */
+
+function useTextDirection() {
+  return React.useContext(TextDirectionContext);
+}
+
+export { TextDirectionProvider, useTextDirection };

package/__styles.cjs.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@griffel/core');
+var RendererContext = require('./RendererContext.cjs.js');
+var TextDirectionContext = require('./TextDirectionContext.cjs.js');
+
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+function __styles(classesMapBySlot, cssRules) {
+  const getStyles = core.__styles(classesMapBySlot, cssRules);
+  return function useClasses() {
+    const dir = TextDirectionContext.useTextDirection();
+    const renderer = RendererContext.useRenderer();
+    return getStyles({
+      dir,
+      renderer
+    });
+  };
+}
+
+exports.__styles = __styles;

package/__styles.d.ts

@@ -0,0 +1,7 @@
+import type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+export declare function __styles<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>, cssRules: CSSRulesByBucket): () => Record<Slots, string>;

package/__styles.esm.js

@@ -0,0 +1,24 @@
+import { __styles as __styles$1 } from '@griffel/core';
+import { useRenderer } from './RendererContext.esm.js';
+import { useTextDirection } from './TextDirectionContext.esm.js';
+
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+function __styles(classesMapBySlot, cssRules) {
+  const getStyles = __styles$1(classesMapBySlot, cssRules);
+  return function useClasses() {
+    const dir = useTextDirection();
+    const renderer = useRenderer();
+    return getStyles({
+      dir,
+      renderer
+    });
+  };
+}
+
+export { __styles };

package/index.cjs.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@griffel/core');
+var makeStyles = require('./makeStyles.cjs.js');
+var makeStaticStyles = require('./makeStaticStyles.cjs.js');
+var renderToStyleElements = require('./renderToStyleElements.cjs.js');
+var RendererContext = require('./RendererContext.cjs.js');
+var TextDirectionContext = require('./TextDirectionContext.cjs.js');
+var __styles = require('./__styles.cjs.js');
+
+
+
+Object.defineProperty(exports, 'createDOMRenderer', {
+	enumerable: true,
+	get: function () { return core.createDOMRenderer; }
+});
+Object.defineProperty(exports, 'mergeClasses', {
+	enumerable: true,
+	get: function () { return core.mergeClasses; }
+});
+Object.defineProperty(exports, 'shorthands', {
+	enumerable: true,
+	get: function () { return core.shorthands; }
+});
+exports.makeStyles = makeStyles.makeStyles;
+exports.makeStaticStyles = makeStaticStyles.makeStaticStyles;
+exports.renderToStyleElements = renderToStyleElements.renderToStyleElements;
+exports.RendererProvider = RendererContext.RendererProvider;
+exports.TextDirectionProvider = TextDirectionContext.TextDirectionProvider;
+exports.__styles = __styles.__styles;

package/index.d.ts

@@ -0,0 +1,8 @@
+export { shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
+export type { GriffelStyle } from '@griffel/core';
+export { makeStyles } from './makeStyles';
+export { makeStaticStyles } from './makeStaticStyles';
+export { renderToStyleElements } from './renderToStyleElements';
+export { RendererProvider } from './RendererContext';
+export { TextDirectionProvider } from './TextDirectionContext';
+export { __styles } from './__styles';

package/index.esm.js

@@ -0,0 +1,7 @@
+export { createDOMRenderer, mergeClasses, shorthands } from '@griffel/core';
+export { makeStyles } from './makeStyles.esm.js';
+export { makeStaticStyles } from './makeStaticStyles.esm.js';
+export { renderToStyleElements } from './renderToStyleElements.esm.js';
+export { RendererProvider } from './RendererContext.esm.js';
+export { TextDirectionProvider } from './TextDirectionContext.esm.js';
+export { __styles } from './__styles.esm.js';

package/makeStaticStyles.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@griffel/core');
+var RendererContext = require('./RendererContext.cjs.js');
+
+function makeStaticStyles(styles) {
+  const getStyles = core.makeStaticStyles(styles);
+
+  if (process.env.NODE_ENV === 'test') {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }
+
+  return function useStaticStyles() {
+    const renderer = RendererContext.useRenderer();
+    const options = {
+      renderer
+    };
+    return getStyles(options);
+  };
+}
+
+exports.makeStaticStyles = makeStaticStyles;

package/makeStaticStyles.d.ts

@@ -0,0 +1,2 @@
+import type { GriffelStaticStyles } from '@griffel/core';
+export declare function makeStaticStyles<Selectors>(styles: GriffelStaticStyles | GriffelStaticStyles[]): () => void;

package/makeStaticStyles.esm.js

@@ -0,0 +1,21 @@
+import { makeStaticStyles as makeStaticStyles$1 } from '@griffel/core';
+import { useRenderer } from './RendererContext.esm.js';
+
+function makeStaticStyles(styles) {
+  const getStyles = makeStaticStyles$1(styles);
+
+  if (process.env.NODE_ENV === 'test') {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }
+
+  return function useStaticStyles() {
+    const renderer = useRenderer();
+    const options = {
+      renderer
+    };
+    return getStyles(options);
+  };
+}
+
+export { makeStaticStyles };

package/makeStyles.cjs.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@griffel/core');
+var React = require('react');
+var RendererContext = require('./RendererContext.cjs.js');
+var TextDirectionContext = require('./TextDirectionContext.cjs.js');
+
+function isInsideComponent() {
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useContext({});
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function makeStyles(stylesBySlots) {
+  const getStyles = core.makeStyles(stylesBySlots);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (isInsideComponent()) {
+      throw new Error(["makeStyles(): this function cannot be called in component's scope.", 'All makeStyles() calls should be top level i.e. in a root scope of a file.'].join(' '));
+    }
+  }
+
+  return function useClasses() {
+    const dir = TextDirectionContext.useTextDirection();
+    const renderer = RendererContext.useRenderer();
+    return getStyles({
+      dir,
+      renderer
+    });
+  };
+}
+
+exports.makeStyles = makeStyles;

package/makeStyles.d.ts

@@ -0,0 +1,2 @@
+import type { GriffelStyle } from '@griffel/core';
+export declare function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>): () => Record<Slots, string>;

package/makeStyles.esm.js

@@ -0,0 +1,35 @@
+import { makeStyles as makeStyles$1 } from '@griffel/core';
+import * as React from 'react';
+import { useRenderer } from './RendererContext.esm.js';
+import { useTextDirection } from './TextDirectionContext.esm.js';
+
+function isInsideComponent() {
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useContext({});
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function makeStyles(stylesBySlots) {
+  const getStyles = makeStyles$1(stylesBySlots);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (isInsideComponent()) {
+      throw new Error(["makeStyles(): this function cannot be called in component's scope.", 'All makeStyles() calls should be top level i.e. in a root scope of a file.'].join(' '));
+    }
+  }
+
+  return function useClasses() {
+    const dir = useTextDirection();
+    const renderer = useRenderer();
+    return getStyles({
+      dir,
+      renderer
+    });
+  };
+}
+
+export { makeStyles };

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@griffel/react",
+  "version": "1.0.0",
+  "description": "React implementation of Atomic CSS-in-JS",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/griffel"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=16.8.0 <18.0.0"
+  },
+  "main": "./index.cjs.js",
+  "module": "./index.esm.js",
+  "typings": "./index.d.ts",
+  "dependencies": {
+    "@griffel/core": "1.0.7"
+  }
+}

package/renderToStyleElements.cjs.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@griffel/core');
+var React = require('react');
+
+/**
+ * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
+ *
+ * @public
+ */
+
+function renderToStyleElements(renderer) {
+  const styles = core.styleBucketOrdering.reduce((acc, bucketName) => {
+    return Object.assign(Object.assign({}, acc), {
+      [bucketName]: []
+    });
+  }, {}); // eslint-disable-next-line guard-for-in
+
+  for (const cssRule in renderer.insertionCache) {
+    const bucketName = renderer.insertionCache[cssRule];
+    styles[bucketName].push(cssRule);
+  }
+
+  return Object.keys(styles).map(bucketName => {
+    const cssRules = styles[bucketName].join(''); // We don't want to create empty style elements
+
+    if (cssRules.length === 0) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement('style', {
+      key: bucketName,
+      // TODO: support "nonce"
+      // ...renderer.styleNodeAttributes,
+      'data-make-styles-bucket': bucketName || 'default',
+      'data-make-styles-rehydration': true,
+      dangerouslySetInnerHTML: {
+        __html: cssRules
+      }
+    });
+  }).filter(Boolean);
+}
+
+exports.renderToStyleElements = renderToStyleElements;

package/renderToStyleElements.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { GriffelRenderer } from '@griffel/core';
+/**
+ * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
+ *
+ * @public
+ */
+export declare function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[];

package/renderToStyleElements.esm.js

@@ -0,0 +1,42 @@
+import { styleBucketOrdering } from '@griffel/core';
+import * as React from 'react';
+
+/**
+ * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
+ *
+ * @public
+ */
+
+function renderToStyleElements(renderer) {
+  const styles = styleBucketOrdering.reduce((acc, bucketName) => {
+    return Object.assign(Object.assign({}, acc), {
+      [bucketName]: []
+    });
+  }, {}); // eslint-disable-next-line guard-for-in
+
+  for (const cssRule in renderer.insertionCache) {
+    const bucketName = renderer.insertionCache[cssRule];
+    styles[bucketName].push(cssRule);
+  }
+
+  return Object.keys(styles).map(bucketName => {
+    const cssRules = styles[bucketName].join(''); // We don't want to create empty style elements
+
+    if (cssRules.length === 0) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement('style', {
+      key: bucketName,
+      // TODO: support "nonce"
+      // ...renderer.styleNodeAttributes,
+      'data-make-styles-bucket': bucketName || 'default',
+      'data-make-styles-rehydration': true,
+      dangerouslySetInnerHTML: {
+        __html: cssRules
+      }
+    });
+  }).filter(Boolean);
+}
+
+export { renderToStyleElements };