atoms-element

git clone https://pyrossh.dev/repos/atoms-element.git

A simple web component library for defining your custom elements. It works on both client and server.

67e0dfd2 — Peter John

add global styles

Files changed (7) hide show

element.js +38 -25
element.test.js +32 -7
example/index.js +3 -4
example/server.js +6 -9
example/styles.css +0 -567
example/styles.js +121 -0
page.js +1 -1

element.js CHANGED Viewed

@@ -32,29 +32,38 @@ const murmur2 = (str) => {
 const hyphenate = (s) => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase();
 export const convertStyles = (prefix, obj, parentClassName, indent = '') => {
+  const isGlobal = parentClassName === '__global__';
-  const className = parentClassName || prefix + '-' + murmur2(JSON.stringify(obj)).toString(36);
+  const className = isGlobal ? '' : parentClassName || prefix + '-' + murmur2(JSON.stringify(obj)).toString(36);
-  const cssText = Object.keys(obj).reduce((acc, key) => {
+  const cssText = Object.keys(obj).reduce(
+    (acc, key) => {
-    const value = obj[key];
+      const value = obj[key];
-    if (typeof value === 'object') {
+      if (typeof value === 'object') {
-      acc += '\n  ' + indent + convertStyles(prefix, value, key, indent + '  ').cssText;
+        acc += '\n  ' + indent + convertStyles(prefix, value, key, indent + '  ').cssText;
-    } else {
+      } else {
-      acc += '  ' + indent + hyphenate(key) + ': ' + value + ';\n';
+        acc += '  ' + indent + hyphenate(key) + ': ' + value + ';\n';
-    }
+      }
-    return acc;
+      return acc;
+    },
-  }, `${parentClassName ? '' : '.'}${className} {\n`);
+    isGlobal ? '' : `${parentClassName ? '' : '.'}${className} {\n`,
+  );
-  return { className, cssText: cssText + `\n${indent}}` };
+  return { className, cssText: cssText + `\n${indent}${isGlobal ? '' : '}'}` };
 };
 export const css = (obj) => {
   Object.keys(obj).forEach((key) => {
     const value = obj[key];
+    if (key === '__global__') {
+      const { cssText } = convertStyles(key, value, '__global__');
+      obj[key] = cssText;
+    } else {
-    const { className, cssText } = convertStyles(key, value);
+      const { className, cssText } = convertStyles(key, value);
-    obj[key] = className;
+      obj[key] = className;
-    obj[className] = cssText;
+      obj[className] = cssText;
+    }
   });
-  obj.toString = () => {
+  obj.render = () => {
     return Object.keys(obj).reduce((acc, key) => {
-      acc += key.includes('-') ? obj[key] + '\n\n' : '';
+      acc += key.includes('-') || key === '__global__' ? obj[key] + '\n\n' : '';
       return acc;
     }, '');
   };
@@ -408,17 +417,21 @@ export class AtomsElement extends BaseElement {
     const template = this.render();
     const result = render(template, this);
     if (isBrowser) {
-      if (!this.stylesMounted) {
+      if (!this.stylesMounted && this.constructor.styles) {
-        this.appendChild(document.createElement('style')).textContent = this.constructor.styles.toString();
+        this.appendChild(document.createElement('style')).textContent = this.constructor.styles.render();
         this.stylesMounted = true;
       }
     } else {
+      if (this.constructor.styles) {
-      return `
+        return `
-        ${result}
+          ${result}
-        <style>
+          <style>
-        ${this.constructor.styles.toString()}
+          ${this.constructor.styles.render()}
-        </style>
+          </style>
-      `;
+        `;
+      } else {
+        return result;
+      }
     }
   }
 }
@@ -435,7 +448,7 @@ export const createElement = ({ name, attrTypes, stateTypes, computedTypes, styl
     static computedTypes = computedTypes ? computedTypes() : {};
-    static styles = styles ? styles : css({});
+    static styles = styles;
     constructor(ssrAttributes) {
       super(ssrAttributes);

element.test.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { expect, test, jest } from '@jest/globals';
-import { AtomsElement, html, render, number, boolean, string, array, object, unsafeHTML, css, classMap } from './element.js';
+import { AtomsElement, html, render, number, boolean, string, array, object, unsafeHTML, css, classMap, createElement } from './element.js';
 global.__DEV = true;
@@ -132,6 +132,11 @@ test('array', () => {
 test('css', () => {
   const styles = css({
+    __global__: {
+      html: {
+        fontSize: '16px',
+      },
+    },
     button: {
       color: 'magenta',
       fontSize: '10px',
@@ -153,7 +158,14 @@ test('css', () => {
       justifyContent: 'center',
     },
   });
-  expect(styles.toString()).toEqual(`.button-1t9ijgh {
+  expect(styles.render()).toEqual(`
+  html {
+    font-size: 16px;
+  }
+.button-1t9ijgh {
   color: magenta;
   font-size: 10px;
@@ -346,7 +358,7 @@ test('AtomsElement', async () => {
   expect(AppItem.observedAttributes).toEqual(['perpage', 'address']);
   const res = instance.renderTemplate();
   expect(res).toEqual(`
         <div perPage="1">
           <p>street: 123</p>
           <p>count: 0</p>
@@ -354,13 +366,26 @@ test('AtomsElement', async () => {
           <div><p>render item 1</p></div>
         </div>
-        <style>
+          <style>
-        .div-1gao8uk {
+          .div-1gao8uk {
   color: red;
 }
-        </style>
+          </style>
-      `);
+        `);
+});
+test('createElement ', async () => {
+  createElement({
+    name: () => 'base-element',
+    render: () => {
+      return html` <div></div> `;
+    },
+  });
+  const Clazz = AtomsElement.getElement('base-element');
+  const instance = new Clazz();
+  const res = instance.renderTemplate();
+  expect(res).toEqual(` <div></div> `);
 });

example/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { html, css } from '../element.js';
 import { createPage } from '../page.js';
+import { __global__ } from './styles.js';
 import './app-counter.js';
 const route = () => {
@@ -7,6 +8,7 @@ const route = () => {
 };
 const styles = css({
+  __global__,
   center: {
     display: 'flex',
     flex: 1,
@@ -16,10 +18,7 @@ const styles = css({
 });
 const head = ({ config }) => {
-  return html`
-    <title>${config.title}</title>
+  return html` <title>${config.title}</title> `;
-    <link href="/styles.css" rel="stylesheet" as="style" />
-  `;
 };
 const body = () => {

example/server.js CHANGED Viewed

@@ -1,20 +1,18 @@
 import http from 'http';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
-import path, { dirname } from 'path';
+import { dirname } from 'path';
 import renderIndex from './index.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const port = process.argv[2] || 3000;
-const map = {
+const srcMap = {
   '/element.js': `${__dirname}/../element.js`,
   '/lit-html.js': `${__dirname}/../lit-html.js`,
-  '/styles.css': `${__dirname}/styles.css`,
+  '/styles.js': `${__dirname}/styles.js`,
   '/app-counter.js': `${__dirname}/app-counter.js`,
-  '.js': 'text/javascript',
-  '.css': 'text/css',
 };
 http
@@ -34,12 +32,11 @@ http
       res.end(html);
       return;
     }
-    const filename = map[req.url];
+    const filename = srcMap[req.url];
     const data = fs.readFileSync(filename);
-    const ext = path.parse(filename).ext;
-    res.setHeader('Content-type', map[ext] || 'text/plain');
+    res.setHeader('Content-type', 'application/javascript');
     res.end(data);
   })
   .listen(parseInt(port));
-console.log(`Server listening on port ${port}`);
+console.log(`Server listening on http://localhost:${port}`);

example/styles.css DELETED Viewed

@@ -1,567 +0,0 @@
-/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com */
-/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-/*
-Document
-========
-*/
-/**
-Use a better box model (opinionated).
-*/
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-/**
-Use a more readable tab size (opinionated).
-*/
-html {
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-}
-/**
-1. Correct the line height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-*/
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-/*
-Sections
-========
-*/
-/**
-Remove the margin in all browsers.
-*/
-body {
-  margin: 0;
-}
-/**
-Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-*/
-body {
-  font-family: system-ui, -apple-system, /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji';
-}
-/*
-Grouping content
-================
-*/
-/**
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-*/
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-}
-/*
-Text-level semantics
-====================
-*/
-/**
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-abbr[title] {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-}
-/**
-Add the correct font weight in Edge and Safari.
-*/
-b,
-strong {
-  font-weight: bolder;
-}
-/**
-1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-2. Correct the odd 'em' font sizing in all browsers.
-*/
-code,
-kbd,
-samp,
-pre {
-  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-/**
-Add the correct font size in all browsers.
-*/
-small {
-  font-size: 80%;
-}
-/**
-Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
-*/
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-/*
-Tabular data
-============
-*/
-/**
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-*/
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-}
-/*
-Forms
-=====
-*/
-/**
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-*/
-button,
-input,
-optgroup,
-select,
-textarea {
-  /* font-family: inherit; */ /* 1 */
-  font-size: 100%; /* 1 */
-  /* line-height: 1.15; */ /* 1 */
-  margin: 0; /* 2 */
-}
-/**
-Remove the inheritance of text transform in Edge and Firefox.
-1. Remove the inheritance of text transform in Firefox.
-*/
-button,
-select {
-  /* 1 */
-  /* text-transform: none; */
-}
-/**
-Correct the inability to style clickable types in iOS and Safari.
-*/
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  /* -webkit-appearance: button; */
-}
-/**
-Remove the inner border and padding in Firefox.
-*/
-::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-/**
-Restore the focus styles unset by the previous rule.
-*/
-:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-/**
-Remove the additional ':invalid' styles in Firefox.
-See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
-*/
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-/**
-Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
-*/
-legend {
-  padding: 0;
-}
-/**
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-progress {
-  vertical-align: baseline;
-}
-/**
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-/**
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-[type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-/**
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-/**
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to 'inherit' in Safari.
-*/
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-/*
-Interactive
-===========
-*/
-/*
-Add the correct display in Chrome and Safari.
-*/
-summary {
-  display: list-item;
-}
-/**
- * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
- * A thin layer on top of normalize.css that provides a starting point more
- * suitable for web applications.
- */
-/**
- * Removes the default spacing and border for appropriate elements.
- */
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-button {
-  /* background-color: transparent; */
-  kground-image: none;
-  /* background-image: none; */
-}
-/**
- * Work around a Firefox/IE bug where the transparent `button` background
- * results in a loss of the default `button` focus styles.
- */
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-ol,
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-/**
- * Tailwind custom reset styles
- */
-/**
- * 1. Use the user's configured `sans` font-family (with Tailwind's default
- *    sans-serif font stack as a fallback) as a sane default.
- * 2. Use Tailwind's default "normal" line-height so the user isn't forced
- *    to override it to ensure consistency even when using the default theme.
- */
-html {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 1 */
-  line-height: 1.5; /* 2 */
-}
-/**
- * Inherit font-family and line-height from `html` so users can set them as
- * a class directly on the `html` element.
- */
-body {
-  font-family: inherit;
-  line-height: inherit;
-}
-/**
- * 1. Prevent padding and border from affecting element width.
- *
- *    We used to set this in the html element and inherit from
- *    the parent element for everything else. This caused issues
- *    in shadow-dom-enhanced elements like <details> where the content
- *    is wrapped by a div with box-sizing set to `content-box`.
- *
- *    https://github.com/mozdevs/cssremedy/issues/4
- *
- *
- * 2. Allow adding a border to an element by just adding a border-width.
- *
- *    By default, the way the browser specifies that an element should have no
- *    border is by setting it's border-style to `none` in the user-agent
- *    stylesheet.
- *
- *    In order to easily add borders to elements by just setting the `border-width`
- *    property, we change the default border-style for all elements to `solid`, and
- *    use border-width to hide them instead. This way our `border` utilities only
- *    need to set the `border-width` property instead of the entire `border`
- *    shorthand, making our border utilities much more straightforward to compose.
- *
- *    https://github.com/tailwindcss/tailwindcss/pull/116
- */
-*,
-::before,
-::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: #e5e7eb; /* 2 */
-}
-/*
- * Ensure horizontal rules are visible by default
- */
-hr {
-  border-top-width: 1px;
-}
-/**
- * Undo the `border-style: none` reset that Normalize applies to images so that
- * our `border-{width}` utilities have the expected effect.
- *
- * The Normalize reset is unnecessary for us since we default the border-width
- * to 0 on all elements.
- *
- * https://github.com/tailwindcss/tailwindcss/issues/362
- */
-img {
-  border-style: solid;
-}
-textarea {
-  resize: vertical;
-}
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  opacity: 1;
-  color: #9ca3af;
-}
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-  opacity: 1;
-  color: #9ca3af;
-}
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  color: #9ca3af;
-}
-button,
-[role='button'] {
-  cursor: pointer;
-}
-table {
-  border-collapse: collapse;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-/**
- * Reset links to optimize for opt-in styling instead of
- * opt-out.
- */
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-/**
- * Reset form element properties that are easy to forget to
- * style explicitly so you don't inadvertently introduce
- * styles that deviate from your design system. These styles
- * supplement a partial reset that is already applied by
- * normalize.css.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  padding: 0;
-  line-height: inherit;
-  color: inherit;
-}
-/**
- * Use the configured 'mono' font family for elements that
- * are expected to be rendered with a monospace font, falling
- * back to the system monospace stack if there is no configured
- * 'mono' font family.
- */
-pre,
-code,
-kbd,
-samp {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-}
-/**
- * Make replaced elements `display: block` by default as that's
- * the behavior you want almost all of the time. Inspired by
- * CSS Remedy, with `svg` added as well.
- *
- * https://github.com/mozdevs/cssremedy/issues/14
- */
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  vertical-align: middle;
-}
-/**
- * Constrain images and videos to the parent width and preserve
- * their intrinsic aspect ratio.
- *
- * https://github.com/mozdevs/cssremedy/issues/14
- */
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-html {
-  width: 100%;
-  height: 100%;
-}
-body {
-  background-color: white;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0%;
-  min-width: 320px;
-  margin: 0px;
-  min-height: 100vh;
-  line-height: 1.4;
-  font-weight: 400;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  color: rgba(44, 62, 80, 1);
-  direction: ltr;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-}

example/styles.js ADDED Viewed

@@ -0,0 +1,121 @@
+export const __global__ = {
+  '*, ::before, ::after': {
+    boxSizing: 'border-box',
+    borderWidth: '0',
+    borderStyle: 'solid',
+    borderColor: '#e5e7eb',
+  },
+  hr: { height: '0', color: 'inherit', borderTopWidth: '1px' },
+  'abbr[title]': {
+    WebkitTextDecoration: 'underline dotted',
+    textDecoration: 'underline dotted',
+  },
+  'b, strong': { fontWeight: 'bolder' },
+  'code, kbd, samp, pre': {
+    fontFamily: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
+    fontSize: '1em',
+  },
+  small: { fontSize: '80%' },
+  'sub, sup': {
+    fontSize: '75%',
+    lineHeight: 0,
+    position: 'relative',
+    verticalAlign: 'baseline',
+  },
+  sub: { bottom: '-0.25em' },
+  sup: { top: '-0.5em' },
+  table: {
+    textIndent: '0',
+    borderColor: 'inherit',
+    borderCollapse: 'collapse',
+  },
+  'button, input, optgroup, select, textarea': {
+    fontSize: '100%',
+    margin: '0',
+    padding: '0',
+    lineHeight: 'inherit',
+    color: 'inherit',
+  },
+  'button, select': {},
+  "button, [type='button'], [type='reset'], [type='submit']": {},
+  '::-moz-focus-inner': { borderStyle: 'none', padding: '0' },
+  ':-moz-focusring': { outline: '1px dotted ButtonText' },
+  ':-moz-ui-invalid': { boxShadow: 'none' },
+  legend: { padding: '0' },
+  progress: { verticalAlign: 'baseline' },
+  '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': {
+    height: 'auto',
+  },
+  "[type='search']": { WebkitAppearance: 'textfield', outlineOffset: '-2px' },
+  '::-webkit-search-decoration': { WebkitAppearance: 'none' },
+  '::-webkit-file-upload-button': {
+    WebkitAppearance: 'button',
+    font: 'inherit',
+  },
+  summary: { display: 'list-item' },
+  'blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre': {
+    margin: '0',
+  },
+  button: {
+    backgroundImage: 'none',
+    ':focus': {
+      outline: '1px dotted, 5px auto -webkit-focus-ring-color',
+    },
+  },
+  fieldset: { margin: '0', padding: '0' },
+  'ol, ul': { listStyle: 'none', margin: '0', padding: '0' },
+  img: { borderStyle: 'solid' },
+  textarea: { resize: 'vertical' },
+  'input::-moz-placeholder, textarea::-moz-placeholder': {
+    opacity: 1,
+    color: '#9ca3af',
+  },
+  'input:-ms-input-placeholder, textarea:-ms-input-placeholder': {
+    opacity: 1,
+    color: '#9ca3af',
+  },
+  'input::placeholder, textarea::placeholder': {
+    opacity: 1,
+    color: '#9ca3af',
+  },
+  "button, [role='button']": { cursor: 'pointer' },
+  'h1, h2, h3, h4, h5, h6': { fontSize: 'inherit', fontWeight: 'inherit' },
+  a: { color: 'inherit', textDecoration: 'inherit' },
+  'pre, code, kbd, samp': {
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  },
+  'img, svg, video, canvas, audio, iframe, embed, object': {
+    display: 'block',
+    verticalAlign: 'middle',
+  },
+  'img, video': { maxWidth: '100%', height: 'auto' },
+  html: {
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: 4,
+    lineHeight: 1.5,
+    WebkitTextSizeAdjust: '100%',
+    fontFamily:
+      "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+    width: '100%',
+    height: '100%',
+  },
+  body: {
+    margin: '0px',
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+    lineHeight: 1.4,
+    backgroundColor: 'white',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 0%',
+    minWidth: '320px',
+    minHeight: '100vh',
+    fontWeight: 400,
+    color: 'rgba(44, 62, 80, 1)',
+    direction: 'ltr',
+    fontSynthesis: 'none',
+    textRendering: 'optimizeLegibility',
+  },
+};

page.js CHANGED Viewed

@@ -41,7 +41,7 @@ export const createPage = ({ route, datapaths, head, body, styles }) => {
           <link rel="icon" type="image/png" href="/assets/icon.png" />
           ${headHtml}
           <style>
-            ${styles.toString()}
+            ${styles.render()}
           </style>
           ${headScript}
         </head>

~repos /atoms-element

git clone https://pyrossh.dev/repos/atoms-element.git

A simple web component library for defining your custom elements. It works on both client and server.