How to use the fela.combineRules function in fela

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

github robinweser / fela / packages / fela-bindings / src / createComponentFactory.js View on Github external
"createComponent() can't render styles without the renderer in the context. Missing react-fela's <Provider /> at the app root?"
        )
      }

      const usedProps = withProxy ? extractUsedProps(rule, theme) : []

      const rules = [rule]
      if (_felaRule) {
        rules.push(_felaRule)
      }
      if (extend) {
        typeof extend === 'function'
          ? rules.push(extend)
          : rules.push(() => extend)
      }
      const combinedRule = combineRules(...rules)

      // improve developer experience with monolithic renderer
      if (process.env.NODE_ENV !== 'production' && renderer.prettySelectors) {
        const componentName =
          typeof type === 'string' ? type : type.displayName || type.name || ''

        combinedRule.selectorPrefix = `${displayName}_${componentName}__`
      }
      // compose passThrough props from arrays or functions
      const resolvedPassThrough = [
        ...alwaysPassThroughProps,
        ...resolvePassThrough(passThroughProps, otherProps),
        ...resolvePassThrough(passThrough, otherProps),
        ...(withProxy ? resolveUsedProps(usedProps, otherProps) : [])
      ]
github robinweser / fela / packages / fela-bindings / src / FelaComponentFactory.js View on Github external
return createElement(FelaTheme, undefined, theme => {
        // TODO: could optimize perf by not calling combineRules if not necessary
        const className = renderer.renderRule(combineRules(style), {
          ...otherProps,
          theme,
        })

        // TODO: remove in 11.0.0
        const cls = customClass ? customClass + ' ' + className : className

        if (render instanceof Function) {
          return render({
            className: cls,
            children,
            theme,
            as,
          })
        }
github robinweser / fela / packages / fela-layout-debugger / src / index.js View on Github external
renderer.renderRule = (rule: Function, props: Object): string => {
    const displayName = rule.name ? rule.name : 'FelaComponent'

    const combinedRule = combineRules(
      rule,
      () => styleDebugger(displayName),
      () => ({
        ':after': {
          lineHeight: 1.5,
        },
      })
    )
    return existingRenderRule(combinedRule, props)
  }
github efflam / pret-a-porter / src / box.js View on Github external
export default ({ as = "div", css, ...props }, { renderer, theme }) => {
  const [style, restProps] = computeStyle(theme, props);
  return h(as, {
    className: renderer.renderRule(
      combineRules(
        wrap(style),
        css && Array.isArray(css)
          ? combineRules(...css.map(rule => wrap(rule)))
          : wrap(css)
      ),
      theme
    ),
    ...restProps
  });
};
github efflam / pret-a-porter / src / box.js View on Github external
export default ({ as = "div", css, ...props }, { renderer, theme }) => {
  const [style, restProps] = computeStyle(theme, props);
  return h(as, {
    className: renderer.renderRule(
      combineRules(
        wrap(style),
        css && Array.isArray(css)
          ? combineRules(...css.map(rule => wrap(rule)))
          : wrap(css)
      ),
      theme
    ),
    ...restProps
  });
};
github queckezz / veel / src / styled.js View on Github external
const VeelComponent = ({ is, css, ...props }, ctx) => {
    const { renderer, theme } = ctx[context.ns]

    const style = createComponent
      ? createComponent(theme, props)
      : { props }

    const cn = renderer.renderRule(
      combineRules(fontSize, space, width, color, () => ({
        ...style.css,
        ...css
      })),
      props
    )

    const Component = is || BaseComponent

    return (
      <Component
        className={cn}
        {...removeProps(style.props)}
      />
    )
  }
github robinweser / fela / packages / react-fela / src / useFela.js View on Github external
function css(...rules: Array<Object | Function>) {
    return renderer.renderRule(combineRules(...rules), propsWithTheme)
  }
github milesj / aesthetic / packages / adapter-fela / src / FelaAdapter.ts View on Github external
transformToClassName(styles: ParsedBlock[]): ClassName {
    return this.fela.renderRule(combineRules(...styles.map(style => () => style)), {});
  }
github robinweser / fela / packages / fela-tools / src / combineMultiRules.js View on Github external
(styleMap, rule, name) => ({
            ...styleMap,
            [name]: resultStyleMap[name]
              ? combineRules(resultStyleMap[name], safeRule(rule))
              : safeRule(rule),
          }),
          {}
github milesj / aesthetic / packages / aesthetic-adapter-fela / src / NativeAdapter.ts View on Github external
transform(...styles: Declaration[]): ClassName {
    return this.fela.renderRule(
      combineRules(...styles.map(style => (typeof style === 'function' ? style : () => style))),
      {},
    );
  }
}

fela

State-Driven Styling in JavaScript

MIT
Latest version published 3 months ago

Package Health Score

90 / 100
Full package analysis

Similar packages