https://github.com/royalicing/yieldcss
CSS Components using JavaScript Generator Functions
https://github.com/royalicing/yieldcss
css css-generator generator-functions javascript typescript
Last synced: 2 months ago
JSON representation
CSS Components using JavaScript Generator Functions
- Host: GitHub
- URL: https://github.com/royalicing/yieldcss
- Owner: RoyalIcing
- License: mit
- Created: 2021-02-15T23:05:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-01T07:18:45.000Z (over 5 years ago)
- Last Synced: 2025-01-18T23:42:57.027Z (over 1 year ago)
- Topics: css, css-generator, generator-functions, javascript, typescript
- Language: TypeScript
- Homepage: https://regenerated.dev/
- Size: 97.7 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
👑 🎨 Yield CSS
Generate CSS on-the-fly
## Install
```console
npm add yieldcss
```
## Why?
Yield CSS lets you generate CSS on-the-fly, making it perfect for a serverless environment like Cloudflare Workers.
Instead of using tooling to compile written files to other files and then uploading those somewhere, you write functions that output the CSS you want on-the-fly.
This mean you can have conditional CSS, substitute variables, run calculations, and write loops to automate repetitive CSS. You have the full power of JavaScript at hand.
## Examples
```javascript
import { prop, renderToString, rule } from "yieldcss";
// Inspired by https://github.com/sindresorhus/modern-normalize
function* Reset() {
yield rule(['*', '*::before', '*::after'])([
prop('box-sizing', 'border-box'),
prop('margin', '0'),
prop('font', 'inherit'),
]);
yield rule(['html'])([
// Correct the line height in all browsers.
prop('line-height', '1.15'),
// Prevent adjustments of font size after orientation changes in iOS.
prop('-webkit-text-size-adjust', '100%'),
]);
}
function* Main() {
yield Reset();
}
const css = await renderToString(Main());
```