Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eveningkid/pretty-components
Prop-based styled components
https://github.com/eveningkid/pretty-components
css-in-js javascript react style styled-components
Last synced: 2 months ago
JSON representation
Prop-based styled components
- Host: GitHub
- URL: https://github.com/eveningkid/pretty-components
- Owner: eveningkid
- Created: 2018-05-19T12:27:05.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-05-19T12:52:33.000Z (over 6 years ago)
- Last Synced: 2024-10-18T09:53:09.536Z (2 months ago)
- Topics: css-in-js, javascript, react, style, styled-components
- Language: JavaScript
- Size: 14.6 KB
- Stars: 43
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌈 Pretty Components
Prop-based styled components.
- React components props as selectors
- Sass nested styles
- Use variables
- Generate readable class names (Button, Button--is-selected, ...)
## Install
- `yarn add pretty-components`
- [Add support for `.pss` files using Webpack](https://github.com/eveningkid/pretty-loader)
```scss
// Hello.pss
Hello {
border: 2px solid yellow;
background: $background;
::isSelected {
&:hover {
border-color: purple;
}
}
::size {
::small {
font-size: 12px;
}
::big {
font-size: 16px;
}
}
}
// Will generate the following
.Hello
.Hello__is-selected
.Hello__size--small
.Hello__size--big
// For a nameless component, use ":root" instead of "Hello";
// it will generate a random identifier
```
## Why?
If you want to apply prop-based styles to your React components so far, you either need to:
- write css classes, then manually map them to each state of our component props
`if prop.isSelected, add 'is-selected' css class`
- use expressions (with css-in-js) inside style literals
`${props => props.isSelected ? 'blue' : 'red'}`
**Now, let's think for one second: do we have any additional logic for mapping our element to `hover` styles only when it'll be hovered?** Of course we don't, because we already acknowledge that writing `:hover` makes it conditionally styled, based on our element's state.
**The idea here is similar: making props part of that state, right inside our style declaration.**
## Link Style to its Component
```jsx
import React from 'react';
import { style } from 'pretty-components';
import styles from './Hello.pss'; // only possible when using Webpack
function Hello(props) {
return
{props.children}
;
}
// or even simpler
// const Hello = style('h1', styles);
export default style(Hello, styles);
// later
Hello World
```
## Set variables
```js
import { styleVariables } from 'pretty-components';
// This code needs to be called before any other `pretty-components`'d
// component code is called.
styleVariables({
background: 'red', // will be available as $background in every stylesheet
// ...
});
```
## How to Use without Webpack
Without Webpack —at least for now, you won't be able to directly use PSS syntax.
What the Webpack loader actually do is transforming PSS syntax into vanilla javascript code:
```js
import { stylesheet } from 'pretty-components-formatter';
export default stylesheet('Hello', {
border: '2px solid yellow',
background: '$background',
_isSelected: {
'&:hover': {
borderColor: 'purple',
}
},
_size: {
_small: {
fontSize: 12,
},
_big: {
fontSize: 16,
}
}
});
```
## License
[eveningkid](https://twitter.com/eveningkid) @ MIT