Class Sophistry

constructor

• new Sophistry(): Sophistry

• Returns Sophistry

styles

import

• import(link, name?): [StyleSheet, Promise<any>]

• Import a stylesheet defined in an external CSS file. Optionally specify a name for the imported style in the Sophystry cach (Sophistry#styles). The name will default to the portion of the link before the first apostrophe...

  Parameters

  • link: string
  • Optional name: string

  Returns [StyleSheet, Promise<any>]

  Example

  import { Sophistry } from 'deleight/sophistry';
  const mySophistry = new Sophistry();
  const [style, onImport] = mySophistry.import('style.css');
  Copy

process

• process(root, replace?): [StyleSheet[], Promise<any>[]]

• Processes and 'pops' all style tags within the root. Ensures that the same CSSStyleSheet can be reused across document trees (maindocument and shadow roots) instead of duplicated even when they have been created declaratively.

  If replace is truthy, any cached stylesheets with the same name (or hash) as a styleshhet within the root will be replaced (reactively).

  Parameters

  • root: Element | DocumentFragment
  • Optional replace: boolean

  Returns [StyleSheet[], Promise<any>[]]

  Example

  import { Sophistry } from 'deleight/sophistry';
  import { createFragment } from 'deleight/apriori';
  const mySophistry = new Sophistry();
  const element = createFragment(apriori.get('markup.html'));
  const [styles, promises] = mySophistry.process(element);
  document.body.append(element);
  for (let style of styles) style.style(element, document.body.firstElementChild);
  Copy

set

• set(name, css): void

• Replaces the text of an existing stylesheet in the cach. This is reactive.

  Parameters

  • name: string
  • css: string

  Returns void

  Example

  import { Sophistry } from 'deleight/sophistry';
  const mySophistry = new Sophistry();
  mySophistry.set('style.css', await apriori.get('new-style.css'));  // override everything.
  Copy