Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lttb/taddy
Compile-time Atomic CSS-in-JS
https://github.com/lttb/taddy
atomic-css babel-plugin css css-in-js
Last synced: about 10 hours ago
JSON representation
Compile-time Atomic CSS-in-JS
- Host: GitHub
- URL: https://github.com/lttb/taddy
- Owner: lttb
- License: mit
- Created: 2020-08-17T20:29:22.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-10T23:30:04.000Z (6 months ago)
- Last Synced: 2024-04-14T06:10:51.293Z (5 months ago)
- Topics: atomic-css, babel-plugin, css, css-in-js
- Language: TypeScript
- Homepage: https://taddy.dev
- Size: 3.26 MB
- Stars: 32
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Roadmap: ROADMAP.md
Awesome Lists containing this project
README
taddy
Compile-time Atomic CSS-in-JS
## Quick Start
```sh
npm install --save taddy
```
```jsx
import React from 'react'
import {css} from 'taddy'
export function Title() {
return (
Hello, taddy!
)
}
```
## Usage
### css
There is an agnostic `css` function, that returns an object of `className` and `style`.
That's a framework-agnostic function, so it's ready for the usage at any environment.
```js
// button = {className: 'hash1 hash2', style: {}}
const button = css({padding: '10px', border: 'none'});
```
#### pseudo classes
```js
const button = css({
padding: '10px',
border: 'none',
color: 'red',
':hover': {
color: 'blue',
},
});
```
### css.mixin
In terms of `taddy`, mixin is a special styling object, that can be used as a part of styles by `css`.
To declare the mixin styles, there is a special function `css.mixin`:
```js
const heading = css.mixin({
fontSize: '20px',
fontWeight: 'bold',
});
```
`mixin` also could be used as a named export:
```js
import {mixin} from 'taddy';
const heading = mixin({
fontSize: '20px',
fontWeight: 'bold',
});
```
#### merge
Mixin can be applied by spreading to the styles, consumed by `css`:
```js
const heading = css.mixin({
fontSize: '20px',
fontWeight: 'bold',
});
const Title = ({children}) => (
{children}
);
```
Mixins also could be used on the nested level:
```js
const halfTransparent = css.mixin({
opacity: 0.5,
});
const Title = ({children}) => (
{children}
);
```
#### composes
Mixins are cool, but they have some restrictions.
For example, let's consider two mixins:
```js
const colorStateful = css.mixin({
color: 'red',
':hover': {
color: 'blue',
},
});
const opacityStateful = css.mixin({
opacity: 1,
':hover': {
opacity: 0.5,
},
});
```
In terms of merge, the result of `css({...colorStateful, ...opacityStateful})` would be `{color: 'red', opacity: 1, ':hover': {opacity: 0.5}}`
But what if we want to apply both mixins together?
There is `composes` interface for that (mixins and styles as `css` arguments):
```js
const Title = ({children}) => (
{children}
);
```