# flcss
> A bleeding-edge CSS-in-JS library
Latest version **2.6.3** (published 2022-02-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install flcss
pnpm add flcss
yarn add flcss
bun add flcss
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.6.3 |
| Published | 2022-02-08 |
| First published | 2020-04-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 47.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kerolos Zaki |
| Maintainers | ker0olos |
| Keywords | react, css-in-js, css |
## Links
- npm: https://www.npmjs.com/package/flcss
- Repository: https://github.com/ker0olos/flcss
- Homepage: https://github.com/ker0olos/flcss#readme
- Issues: https://github.com/ker0olos/flcss/issues
- npm.io page: https://npm.io/package/flcss
## Dependencies (2)
- [csstype](https://npm.io/package/csstype.md) ^3.0.10
- [construct-style-sheets-polyfill](https://npm.io/package/construct-style-sheets-polyfill.md) ^3.1.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.6.3 (latest) — 2022-02-08
- 2.6.2 — 2022-02-08
- 2.6.1 — 2022-02-08
- 2.6.0 — 2022-02-07
- 2.5.0 — 2022-02-05
- 2.4.0 — 2022-01-15
- 2.4.0-0 — 2022-01-15
- 2.3.2 — 2022-01-14
- 2.3.1 — 2022-01-14
- 2.3.0 — 2022-01-13
- 2.2.7 — 2021-06-24
- 2.2.6 — 2021-06-21
- 2.2.5 — 2021-01-29
- 2.2.4 — 2020-10-25
- 2.2.3-0 — 2020-09-04
- … 9 more at https://npm.io/package/flcss/versions
## README
[](http://npmjs.com/package/flcss)
[](https://codecov.io/gh/ker0olos/flcss)
A bleeding-edge CSS-in-JS library.
It supports all of the things: selectors, pseudo-classes, pseudo-elements, attributes, vendor prefixes, media queries and animations.
It also comes with custom features like extending and react hooks support.
## Installation
`npm install flcss`
## Usage
flcss will work with any framework that allows you to set class names.
```jsx
import React from 'react';
import { createStyle } from 'flcss';
const Box = () => {
return ;
};
const styles = createStyle({
red: {
padding: '15px',
backgroundColor: 'red'
}
});
export default Box;
```
### But also there's support to React hooks
```jsx
import React, { useState } from 'react';
import { useStyles } from 'flcss/react';
const App = () => {
const [ color, setColor ] = useState('red');
const styles = useStyles({
box: {
padding: '15px',
backgroundColor: color
}
});
return ;
}
```
### Extending
```js
const styles = createStyle({
red: {
padding: '15px',
backgroundColor: 'red'
},
blue: {
extend: 'red',
backgroundColor: 'blue'
}
});
```
### Pseudo-classes and Pseudo-elements
```js
const styles = createStyle({
red: {
padding: '15px',
backgroundColor: 'red',
':hover': {
backgroundColor: 'black',
}
}
});
```
```js
const styles = createStyle({
input: {
fontSize: '12px',
color: 'black',
'::placeholder': {
color: 'grey'
}
}
});
```
### Media Queries
```js
const styles = createStyle({
red: {
padding: '15px',
backgroundColor: 'red',
'@media screen and (max-width: 1080px)': {
padding: '8px'
}
}
});
```
### Attributes
```js
const styles = createStyle({
button: {
padding: '15px',
cursor: 'pointer',
backgroundColor: 'black',
'[enabled="false"]': {
cursor: 'default',
pointerEvents: 'none',
backgroundColor: 'grey'
}
}
});
```
### Child Selectors
```js
const styles = createStyle({
red: {
padding: '15px',
backgroundColor: 'red',
'> div': {
padding: '25px',
backgroundColor: 'green',
}
}
});
```
### Animations
```js
const boxAnimation = createAnimation({
keyframes: {
from: {
margin: '5px'
},
to: {
margin: '10px'
}
},
duration: '0.5s',
timingFunction: 'cubic-bezier(0.18, 0.89, 0.32, 1.28)',
fillMode: 'forwards',
iterationCount: '1'
});
const styles = createStyle({
box: {
animation: boxAnimation
}
})
```
```js
const hoverAnimation = createAnimation({
keyframes: {
'0%': {
transform: 'translateY(-10px)';
},
'50%': {
transform: 'translateY(-5px)';
},
'100%': {
transform: 'translateY(-10px)';
}
}
});
const floatAnimation = createAnimation({
keyframes: {
'100%': {
transform: 'translateY(-10px)';
}
}
});
const styles = createStyle({
box: {
animationName: `${floatAnimation}, ${hoverAnimation}`,
animationDuration: '.3s, 1.5s',
animationDelay: '0s, .3s',
animationTimingFunction: 'ease-out, ease-in-out',
animationIterationCount: '1, infinite',
animationFillMode: 'forwards',
animationDirection: 'normal, alternate'
}
}
})
```
Basically, do anything you want, it will probably work, and if it didn't then open an issue and request it, and we'll add it.
---
_Source: https://npm.io/package/flcss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._