freestyler

5^th generation React styling library — it is lightning fast, lean, and with gazillion features.

        Yeah, straight from the top of my dome
            As I rock, rock, rock, rock, rock the microphone
                Yeah, straight from the top of my dome
                    As I rock, rock, rock, rock, rock the microphone...

• Bomfunk MC's — Freestyler

feat.

• Fifth generation
• Lightweight
• Lightning fast
• Just-in-time CSS
• Code splitting
• Dead code elimination
• Variables
• Scoped styles without selectors
• Nested selectors
• Mixins
• Media queries, keyframes, ...
• Atoms
• Global styles
• CSS Resets
• "Styled" component generator
• Theming

Installation

npm i freestyler --save

Usage

import {css, styled} from 'freestyler';

Decorate stateful components.

@css({
    border: '1px solid tomato',
})
class App extends Component {
    render () {
        return <div>Hello world!</div>;
    }
}

Or, create "styled" stateless components.

const Bordered = styled.div({
    border: '1px solid tomato',
});
const App = () =>
    <Bordered>Hello world!</Bordered>;

See more interfaces below.

Reference

• Terminology
• Generic: Low-level API
• Generic: 3^rd Generation Interfaces
  • rule() Interface
  • StyleSheet.create() Interface with lazy rendering
• React: 4^th Generation Interfaces
  • styled()() Component Interface
  • @css Static Class Decorator Interface
  • @css() Class Decorator Interface
  • @css() .render() Decorator Interface
  • hoc generator
  • Component
  • hyperstyle
• React: 5^th Generation Interfaces
  • styleit syntax
  • jsxstyle
  • facc generator
• Environment variables

Packages

• libreact — must-have utilities for every React project.
• themestyler — theming primitives designed for freestyler, but can be used in any React project.
• freestyler-context — generic React context pub/sub that shallowly merges contexts with the same name.
• freestyler-observable — observable factory.

License

Unlicense — public domain.

---

Are you a freestyler?