Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jhony-v/fly-jss
Small library using CXS to create "Atomic CSS in JS" inspired in Stylex CSS at Facebook to prevent duplication of classnames
https://github.com/jhony-v/fly-jss
atomic-design css css-in-js cxs
Last synced: about 1 month ago
JSON representation
Small library using CXS to create "Atomic CSS in JS" inspired in Stylex CSS at Facebook to prevent duplication of classnames
- Host: GitHub
- URL: https://github.com/jhony-v/fly-jss
- Owner: jhony-v
- License: mit
- Created: 2021-02-14T22:18:57.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-26T22:12:00.000Z (over 3 years ago)
- Last Synced: 2024-08-09T10:16:55.885Z (5 months ago)
- Topics: atomic-design, css, css-in-js, cxs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/fly-jss
- Size: 491 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Fly-JSS
Optimized library to create **"Atomic CSS in JS"** inspired in **Stylex** at Facebook to prevent duplication of class names using [CXS](https://github.com/cxs-css/cxs) below.
**Go to the documentation at [fly-jss](https://jhony-24.github.io/fly-jss-documentation/).**
## Installation
To use the library you need to install the package typing the next command.
```bash
$ npm i fly-jss
$ yarn add fly-jss
```
## Usage
The main way to use styles is instancing the method **create** of module. After we use the method props to pass arguments.
You can see more [examples here](https://codesandbox.io/s/fly-jss-css-in-js-wgrrc).
```javascript
import fly, { css } from "fly-jss";
// Create base styles in object
const styles = fly.create({
primary: {
background: "blue",
borderRadius : "20px",
},
flat: {
border: "2px solid aqua",
},
text : {
color : "red",
}
});
// Create base styles as string
const styles = fly.create({
primary: css`
background: blue;
borderRadius: 20px;
`,
flat: css`border: 2px solid aqua`,
text: css`color: red`
});
/**
* Using styles passing arguments
*/
function Buttons() {
return(
Primary button
Secondary button
)
}
/**
* Passing arguments how object
* the names are key of styles created, if the value is true it class will be added.
*/
function Button() {
return(
Dynamic button
)
}
```
Whe can create dynamic styles using a method in a property.
```javascript
import fly from "fly-jss";
// Create dynamic base styles
const styles = fly.createDynamic({
button: ([r, g, b]) => ({
background: `rgb(${r},${g},${b})`
})
});
/**
* Prevent duplication of class names generated
*/
function App() {
const button1 = styles({
button: [40, 50, 200]
});
const button2 = styles({
button: [100, 250, 20]
});
return (
BUTTON 1
BUTTON 2
);
}
export default App;
```
## API
### `create()`
Create a instance of styles. You can create some property how an object.
```javascript
const styles = fly.create({
prop1 : {
// object styles
},
prop2 : {
// object styles
},
})
```
### `createDynamic()`
Create a instance of dynamic styles. You can create all properties how a function.
```javascript
const styles = fly.createDynamic({
prop3 : (params) => ({
// object styles
})
})
```
### `styles(...name, {...name} )`
Get a list properties created in the instance of styles. If you want to have a dynamic property this would cause an error.
```javascript
// Get all properties
styles("prop1", "prop2")
// Get the prop1
styles("prop1", false && "prop2")
// Get props as object
styles({
prop1 : true,
prop2 : true
})
```
If you want to get a dynamic styles use the self name and pass a object with the name and value.
```javascript
const styles = fly.createDynamic({
square : (size) => ({
width : size,
height: size
})
})
styles({
square: "20px"
})
```
### `css`
Create a string of styles and return an object style parsed
```javascript
import { css } from "fly-jss"
const styles = css`
background:blue;
color:white;
border-radius: 10px;
`
console.log(styles)
```
### `compose(...styles)`
Compose diferent styles and create a result of class names
```javascript
import fly from "fly-jss"
fly.compose(
styles("prop1"),
styles("prop2"),
styles({
square : "20px"
})
)
```
The project uses below [CXS](https://github.com/cxs-css/cxs), a library with high performance, deduplicates repeated styles and zero dependencies.
If you wank to know most about this subject, in the next link [Atomic CSS-in-JS](https://sebastienlorber.com/atomic-css-in-js) you can learn how work it methodology.
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
