How to use the free-style.create function in free-style

To help you get started, we’ve selected a few free-style examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github blakeembrey / react-free-style / src / react-free-style.ts View on Github external
function createGlobal () {
  // Skip DOM lookup.
  if (!canUseDOM) return FreeStyle.create()

  let element = document.getElementById(STYLE_ID) as HTMLStyleElement
  let styleSheet: CSSStyleSheet

  if (!element) {
    element = document.createElement('style')
    element.setAttribute('id', STYLE_ID)
    element.setAttribute('type', 'text/css')
    document.head.appendChild(element)
  }

  for (let i = 0; i < document.styleSheets.length; i++) {
    const item = document.styleSheets.item(i)!

    if (item.ownerNode === element) {
      styleSheet = item as CSSStyleSheet
github typestyle / typestyle / src / internal / typestyle.ts View on Github external
const createFreeStyle = () => FreeStyle.create(
  /** Use the default hash function */
  undefined,
  /** Preserve $debugName values */
  true,
);
github blakeembrey / react-free-style / src / index.ts View on Github external
export function css(cssValue: CssValue): CachedCss {
  const Style = create();
  const className = cssValueToString(Style, cssValue);
  return new CachedCss(className, Style);
}
github blakeembrey / react-free-style / src / react-free-style.ts View on Github external
element = document.createElement('style')
    element.setAttribute('id', STYLE_ID)
    element.setAttribute('type', 'text/css')
    document.head.appendChild(element)
  }

  for (let i = 0; i < document.styleSheets.length; i++) {
    const item = document.styleSheets.item(i)!

    if (item.ownerNode === element) {
      styleSheet = item as CSSStyleSheet
      break
    }
  }

  return FreeStyle.create(undefined, undefined, {
    add (style, index) {
      styleSheet.insertRule(style.getStyles(), index)
    },
    remove (style, index) {
      styleSheet.deleteRule(index)
    },
    change (style, oldIndex, newIndex) {
      styleSheet.deleteRule(oldIndex)
      styleSheet.insertRule(style.getStyles(), newIndex)
    }
  })
}
github blakeembrey / react-free-style / src / react-free-style.ts View on Github external
return <p> (
    Component: React.ComponentType</p><p>&gt;,
    withFreeStyle?: boolean
  ) =&gt; {
    const Style = FreeStyle.create(hash, debug)
    const componentName = Component.displayName || Component.name || 'anonymous'
    const styles = helpers.registerStyleSheet(Style, sheet, options, componentName)
    const displayName = `Styled(${componentName})`

    return Object.assign(
      ((props: P &amp; StyledProps) =&gt; {
        const componentProps = Object.assign({}, props, {
          styles: props.styles ? Object.assign({}, styles, props.styles) : styles
        })

        return React.createElement(
          StyleComponent,
          { Style, Component, componentName, componentProps, withFreeStyle }
        )
      }) as React.StatelessComponent</p><p>,
      { displayName, styles, Style }</p>
github frptools / epicycle / src / node_modules / common / style-helpers.js View on Github external
import freestyle from 'free-style';
import autoprefixer from 'autoprefixer';
import postcss from 'postcss-js';

const context = freestyle.create();
const prefixer = postcss.sync([ autoprefixer({ browsers: ['last 2 versions'] }) ]);

export function configureStyles(styles) {
  return styles
    ? context.registerStyle(prefixer(styles))
    : context.getStyles();
};
github blakeembrey / react-free-style / src / index.ts View on Github external
element.setAttribute("id", STYLE_ID);
      element.setAttribute("type", "text/css");
      document.head.appendChild(element);
    }

    for (let i = 0; i &lt; document.styleSheets.length; i++) {
      const item = document.styleSheets.item(i)!;

      if (item.ownerNode === element) {
        styleSheet = item as CSSStyleSheet;
        break;
      }
    }

    if (debug) {
      this.freeStyle = create({
        add: () =&gt; (element.innerHTML = this.toCss()),
        remove: () =&gt; (element.innerHTML = this.toCss()),
        change: () =&gt; (element.innerHTML = this.toCss())
      });
    } else {
      this.freeStyle = create({
        add: (style, index) =&gt; {
          styleSheet.insertRule(style.getStyles(), index);
        },
        remove: (_, index) =&gt; {
          styleSheet.deleteRule(index);
        },
        change: (style, oldIndex, newIndex) =&gt; {
          styleSheet.deleteRule(oldIndex);
          styleSheet.insertRule(style.getStyles(), newIndex);
        }
github ajoslin / stylin / src / free-style.js View on Github external
return function styleFn () {
    var args = Array.prototype.slice.call(arguments)
    var opts = args.length > arity ? args.pop() : null
    var styleId = opts && opts.styleId ? opts.styleId : DEFAULT_STYLE_ID

    var byId = styleInstancesById[styleId] = styleInstancesById[styleId] || {
      Style: FreeStyle.create(),
      changeId: null
    }
    var Style = byId.Style
    var changeId = byId.changeId

    var result = Style[methodName].apply(Style, args)
    if (Style.changeId !== changeId) {
      insertStyles(Style.getStyles(), {id: styleId})
      byId.changeId = Style.changeId
    }

    return result
  }
}

free-style

Make CSS easier and more maintainable by using JavaScript

MIT
Latest version published 4 months ago

Package Health Score

67 / 100
Full package analysis