https://github.com/behnammodi/atyled
atyled is a combination of 2 ideas (atomic css and styled-components)
https://github.com/behnammodi/atyled
atomic-css css-in-js styled-components
Last synced: about 1 year ago
JSON representation
atyled is a combination of 2 ideas (atomic css and styled-components)
- Host: GitHub
- URL: https://github.com/behnammodi/atyled
- Owner: behnammodi
- License: mit
- Created: 2023-02-23T20:19:31.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-10T05:54:05.000Z (about 3 years ago)
- Last Synced: 2024-10-29T13:15:12.341Z (over 1 year ago)
- Topics: atomic-css, css-in-js, styled-components
- Language: TypeScript
- Homepage: http://npmjs.com/package/atyled
- Size: 328 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## inspired by atomic css + styled-components
### This library inspired by atomic css and styled-components, plus:
- It generate atomic classes
- Final stylesheet is very optimized and small
- It's tiny and less than 2KB
- SSR support
- Faster than `styled-components`
- No overwrite rules
## Example
[Edit on Codesandbox](https://codesandbox.io/s/atyled-readme-sample-79rco6)
```js
import atyled from 'atyled';
const Button = atyled.button`
--background: transparent;
--color: #FF0000;
background: var(--background);
color: var(--color);
&:hover {
color: orange;
}
&::before {
content: ' ★ ';
}
`;
const PrimaryButton = atyled(Button)`
--background: #FF0000;
--color: white;
&::before {
content: ' ☀︎ ';
}
`;
const Container = atyled.div`
text-align: center;
`;
function App() {
return (
Normal Button
Primary Button
);
}
```
## Result
HTML:
```html
Normal Button
Primary Button
```
StyleSheet:
```css
.p0v0 { text-align: center; }
.p1v1 { --background: transparent; }
.p2v2 { --color: #FF0000; }
.p3v3 { background: var(--background); }
.p4v4 { color: var(--color); }
.p5v5:hover { color: orange; }
.p6v6::before { content: " ★ "; }
.p1v2 { --background: #FF0000; }
.p2v7 { --color: white; }
.p6v8::before { content: " ☀︎ "; }
```
## SSR (Server Side Rendering)
```jsx
import { createStyleCollector } from 'atyled';
const { jsx, getStyleSheet, getStyleTags } = createStyleCollector();
const html = React.renderToString(jsx);
getStyleSheet() // return all style rules
// or
getStyleTags() // return all style rules + tag ...
```
## Examples
[atyled](https://codesandbox.io/s/atyled-example-1-vxhd58)
[atyled + nodejs](https://codesandbox.io/p/sandbox/cold-rain-i0b7q4?file=%2FREADME.md)
[atyled + express](https://codesandbox.io/p/sandbox/gracious-lucy-51542e?file=%2FREADME.md)
[atyled + nextjs](https://codesandbox.io/p/sandbox/fast-breeze-4bxfz1?file=%2FREADME.md)
[atyled + remix](https://codesandbox.io/p/sandbox/atyled-gxp00f?file=%2FREADME.md)