freestyler icon indicating copy to clipboard operation
freestyler copied to clipboard

5th generation CSS-in-JS library

Consider using nano-css instead. It is smaller, tested and actively maintained.

libreact logo

freestyler

5th 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...

feat.

  • fifth generation, lightweight, lightning fast, JIT CSS, code splitting, dead code elimination, JavaScript variables

Typing and autocompletion

CSS Templates

  • Scoped styles without selectors
  • Nested selectors
  • Mixins
  • Atoms
  • Media queries, keyframes, ...
  • Global styles
  • Global entry and exit animations
  • CSS resets
  • Theming

Reference

  • Terminology
  • Generations
  • Interfaces
  • Generic Low-level API
  • Generic 3rd Generation Interfaces
    • rule() Interface
    • StyleSheet.create() Interface with lazy rendering
    • hyperstyle() styleName Interface
  • React.js 4th Generation Interfaces
    • styled()() Component Interface
    • @css Static Class Decorator Interface
    • @css() Class Decorator Interface
    • @css() .render() Decorator Interface
    • Component Class Interface
    • hoc()() Higher Order Component Interface
  • React.js 5th Generation Interfaces
    • styleit() and <Styleit> Interfaces
    • jsxstyle(), <Block>, <Inline>, <InlineBlock>, <Row>, and <Column> Interfaces
  • Environment Variables
  • Server-side Rendering
  • How it Works?

Installation

npm i freestyler --save

Usage

import {
    css,
    styled,
    rule,
    StyleSheet,
    Component,
    hoc,
    jsxstyle
} from 'freestyler';

import hyperstyle from 'freestyler/lib/react/hyperstyle';
import {styleit, Styleit} from 'freestyler/lib/react/styleit';

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>;

License

Unlicense — public domain.


Are you a freestyler?