Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/streamich/freestyler
5th generation CSS-in-JS library
https://github.com/streamich/freestyler
css css-in-js css-in-react react
Last synced: about 1 hour ago
JSON representation
5th generation CSS-in-JS library
- Host: GitHub
- URL: https://github.com/streamich/freestyler
- Owner: streamich
- Created: 2017-10-07T20:05:25.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T23:24:44.000Z (5 days ago)
- Last Synced: 2024-10-30T01:51:38.065Z (5 days ago)
- Topics: css, css-in-js, css-in-react, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/freestyler
- Size: 10.6 MB
- Stars: 271
- Watchers: 4
- Forks: 10
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - freestyler - in-JS library | streamich | 245 | (TypeScript)
README
> Consider using [`nano-css`](https://github.com/streamich/nano-css) instead. It is smaller, tested and actively maintained.
# freestyler
[![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
[**5th generation**](./docs/en/generations.md) [React styling library][npm-url] —
it is *lightning fast*, *lean*, and with *gazillion* [__*feat*ures__](#feat).
```
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](https://www.youtube.com/watch?v=ymNFyxvIdaM)
## feat.
- *[fifth generation](./docs/en/feat/fifth-generation.md)*, *[lightweight](./docs/en/feat/lightweight.md)*, *[lightning fast](./docs/en/feat/fast.md)*, *[JIT CSS](./docs/en/feat/jit-css.md)*, *[code splitting](./docs/en/feat/code-splitting.md)*, *[dead code elimination](./docs/en/feat/dead-code-elimination.md)*, *[JavaScript variables](./docs/en/feat/variables.md)*
## CSS Templates
- [__Scoped__ styles without selectors](./docs/en/feat/scoped.md)
- [__Nested__ selectors](./docs/en/feat/nesting.md)
- __[Mixins](./docs/en/feat/mixins.md)__
- __[Atoms](./docs/en/feat/atoms.md)__
- [__Media queries__, keyframes, ...](./docs/en/feat/media.md)
- [__Global__ styles](./docs/en/feat/global.md)
- Global [entry and exit animations](./docs/en/animation.md)
- [CSS __resets__](./docs/en/feat/resets.md)
- __[Theming](./docs/en/feat/theming.md)__
## Reference
- [Terminology](./docs/en/terminology.md)
- [Generations](./docs/en/generations.md)
- [Interfaces](./docs/en/interfaces.md)
- __Generic__ [Low-level API](./docs/en/low-level-api.md)
- __Generic__ [__3rd Generation Interfaces__](./docs/en/3rd-gen.md)
- [`rule()` Interface](./docs/en/rule.md)
- [`StyleSheet.create()` Interface](./docs/en/StyleSheet.md) with lazy rendering
- [`hyperstyle()` `styleName` Interface](./docs/en/hyperstyle.md)
- __React.js__ [__4th Generation Interfaces__](./docs/en/4th-gen.md)
- [`styled()()` Component Interface](./docs/en/styled.md)
- [`@css` Static Class Decorator Interface](./docs/en/css-static-class-decorator.md)
- [`@css()` Class Decorator Interface](./docs/en/css-class-decorator.md)
- [`@css()` `.render()` Decorator Interface](./docs/en/css-render-decorator.md)
- [`Component` Class Interface](./docs/en/component-class.md)
- [`hoc()()` Higher Order Component Interface](./docs/en/hoc-generator.md)
- __React.js__ [__5th Generation Interfaces__](./docs/en/5th-gen.md)
- [`styleit()` and `` Interfaces](./docs/en/styleit.md)
- [`jsxstyle()`, ``, ``, ``, ``, and `` Interfaces](./docs/en/jsxstyle.md)
- [Environment Variables](./docs/en/env-vars.md)
- [Server-side Rendering](./docs/en/ssr.md)
- [How it Works?](./docs/en/how-it-works.md)
## Installation
npm i freestyler --save
## Usage
```js
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.
```jsx
@css({
border: '1px solid tomato',
})
class App extends Component {
render () {
return
Hello world!;
}
}
```
Or, create *"styled" stateless* components.
```jsx
const Bordered = styled.div({
border: '1px solid tomato',
});
const App = () =>
Hello world!;
```
## License
[Unlicense](./docs/en/LICENSE.md) — public domain.
-------
Are you a freestyler?
[npm-url]: https://www.npmjs.com/package/freestyler
[npm-badge]: https://img.shields.io/npm/v/freestyler.svg
[travis-url]: https://travis-ci.org/streamich/freestyler
[travis-badge]: https://travis-ci.org/streamich/freestyler.svg?branch=master