iouser / freestyler

5th generation CSS-in-JS library

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

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, JIT CSS, code splitting, dead code elimination, JavaScript variables

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 3^rd Generation Interfaces
  • rule() Interface
  • StyleSheet.create() Interface with lazy rendering
  • hyperstyle() styleName Interface
• React.js 4^th 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 5^th 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?