Switch branches/tags
react-fela@7.3.0 react-fela@7.2.0 react-fela@7.0.1 react-fela@6.2.4 react-fela@6.2.3 react-fela@6.2.2 react-fela@6.2.1 react-fela@6.2.0 react-fela@6.1.1 react-fela@6.0.2 react-fela@6.0.1 react-fela@6.0.0 react-fela@5.3.0 react-fela@5.2.1 react-fela@5.2.0 react-fela@5.0.0 preact-fela@7.3.0 preact-fela@7.2.0 preact-fela@7.0.1 preact-fela@6.2.4 preact-fela@6.2.3 preact-fela@6.2.2 preact-fela@6.2.1 preact-fela@6.2.0 preact-fela@6.1.1 preact-fela@6.0.2 preact-fela@6.0.1 preact-fela@6.0.0 preact-fela@5.3.0 preact-fela@5.2.1 preact-fela@5.2.0 preact-fela@5.0.0 performance-benchmarks@0.0.13 performance-benchmarks@0.0.12 performance-benchmarks@0.0.10 performance-benchmarks@0.0.9 performance-benchmarks@0.0.8 performance-benchmarks@0.0.7 performance-benchmarks@0.0.6 inferno-fela@8.2.0 inferno-fela@8.1.0 inferno-fela@7.0.1 inferno-fela@6.2.4 inferno-fela@6.2.3 inferno-fela@6.2.2 inferno-fela@6.2.1 inferno-fela@6.2.0 inferno-fela@6.1.1 inferno-fela@6.0.2 inferno-fela@6.0.1 inferno-fela@6.0.0 inferno-fela@5.3.0 inferno-fela@5.2.1 inferno-fela@5.2.0 inferno-fela@5.0.0 fela@6.1.8 fela@6.1.7 fela@6.1.3 fela@6.1.2 fela@6.1.1 fela@6.1.0 fela@6.0.2 fela@6.0.1 fela@6.0.0 fela@5.2.0 fela@5.1.1 fela@5.1.0 fela@5.0.0 fela-utils@8.0.7 fela-utils@8.0.6 fela-utils@8.0.3 fela-utils@8.0.2 fela-utils@8.0.1 fela-utils@8.0.0 fela-utils@7.0.2 fela-utils@7.0.1 fela-utils@7.0.0 fela-utils@6.0.1 fela-utils@6.0.0 fela-utils@5.0.5 fela-utils@5.0.0 fela-tools@5.1.6 fela-tools@5.1.5 fela-tools@5.1.2 fela-tools@5.1.1 fela-tools@5.1.0 fela-tools@5.0.14 fela-tools@5.0.10 fela-tools@5.0.9 fela-tools@5.0.8 fela-tools@5.0.7 fela-tools@5.0.6 fela-tools@5.0.5 fela-tools@5.0.0 fela-statistics@5.0.21 fela-statistics@5.0.20 fela-statistics@5.0.17 fela-statistics@5.0.16 fela-statistics@5.0.15 fela-statistics@5.0.14
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
src fix flow types May 3, 2018
LICENSE update licenses Jun 22, 2017
README.md update documentation Feb 11, 2018
package.json Publish Sep 3, 2018
yarn.lock add extend tests Mar 13, 2018

README.md

fela-monolithic

npm version npm downloads

The monolithic enhancer will use unique class names instead of atomic ones. These generated class names are not re-usable like the atomic design but allows you to debug and modify styles with ease. Every ruleset will have it's own unique class - this means that a new class will be generated if you are using props and they change. If you want to fix the class name, you can add property className into your rule set. This can be useful if you want to generate an external stylesheet that's human readable, re-usable and can be used on non-JS projects.

Installation

yarn add fela-monolithic

You may alternatively use npm i --save fela-monolithic.

Usage

importcreateRenderer } from 'fela'
import monolithic from 'fela-monolithic'

const renderer = createRenderer({
  enhancers: [ monolithic() ]
})

const rule = () => ({
  className: 'custom',
  color: 'red'
})

renderer.renderRule(rule)

outputs

.custom {
  color: red
}

if className property is not used, the output will be

.137u7ef {
  color: red
}

137u7ef is a hash based on rule properties (color: red in this case).

Configuration

Options
 Option Value Default Description
prettySelectors (boolean) false use pretty selectors in development

If you are using prettySelectors with plain Fela rules it will add the rule.name to the className e.g.

Note: anonymous functions will still only use the hash!

importcreateRenderer } from 'fela'
import monolithic from 'fela-monolithic'

const renderer = createRenderer({
  enhancers: [ monolithic({ prettySelectors: true }) ]
})

const redText = () => ({
  color: 'red'
})

renderer.renderRule(redText) // => redText_137u7ef
.redText_137u7ef {
  color: red
}

If you use it together with createComponent or connect from react-fela, preact-fela or inferno-fela, it will also add the component type or displayName to the rule. e.g.

importcreateComponent } from 'react-fela'

const Button = () => ({
  color: 'red'
})

const Comp = createComponent(Button)

<Button />
// => <div class="Button_div__137u7ef"></div>

const ExtendedButton = () => ({
  backgroundColor: 'blue'
})

const Comp2 = createComponent(ExtendedButton, Button)

<Comp2 />
// => <div class="ExtendedButton_Button__xxxxx"></div>

License

Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.