https://github.com/royalicing/ctss
Functional CSS meet TypeScript
https://github.com/royalicing/ctss
Last synced: about 1 year ago
JSON representation
Functional CSS meet TypeScript
- Host: GitHub
- URL: https://github.com/royalicing/ctss
- Owner: RoyalIcing
- Created: 2019-02-05T11:07:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-17T09:36:31.000Z (over 7 years ago)
- Last Synced: 2025-05-08T21:29:43.650Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://typedtailwind.netlify.com/
- Size: 153 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CTSS: Composable TypeScript Styles
## Benefits
- Works with React, Vue, Preact.
- Use static CSS, _not_ CSS-in-JS.
- No dynamically inserted stylesheets.
- No [CSS injection attacks.](https://frontarm.com/james-k-nelson/how-can-i-use-css-in-js-securely/)
- No JavaScript event subscribers for `@media` queries, `:hover`, `:focus`, `:active`.
- Autocompletion and type-safety with TypeScript — typos in class names are compile-time errors.
- Handle breakpoints easily: `sm() md() lg() xl()`
- Handle hover and focus states: `hover() focus() active()`
- Reusable atomic building blocks for your components.
## Example with TailwindCSS
Using the our [TailwindCSS functions](https://github.com/RoyalIcing/ctss/blob/master/packages/tailwind/README.md). You can bring your own too.
### Compose multiple classes with type-safety
```ts
import { ctss } from "ctss";
import { text, font, bg, p } from "ctss-tailwind";
const className = ctss(
text("center", "lg", "purple-dark"),
font("sans")
bg("white"),
p("4")
);
// "text-center text-lg text-purple-dark font-sans bg-white p-4"
```
### Handle hover states
```ts
const className = ctss(
bg("white"),
hover(
bg("red")
)
);
// "bg-white hover:bg-red"
```
### Dynamically change based on variables
```ts
const makeButtonClass = (isPrimary: boolean) => ctss(
isPrimary ? bg("primary") : bg("white"),
hover(
isPrimary ? bg("primary-light") : bg("grey-lightest")
)
);
makeButtonClass(true); // "bg-primary hover:bg-primary-light"
makeButtonClass(false); // "bg-white hover:bg-grey-lightest"
```
## Core package: @ctss/core
Core currently has two functions.
```ts
export function ctss(...arrayOfNames: Array>): string;
export function addPrefixToMany(arrayOfSuffixes: Array>, prefix: string): Array;
```
## Further Reading
- [CSS Utility Classes and “Separation of Concerns”](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)
- [In Defense of Functional CSS](https://www.mikecr.it/ramblings/functional-css/)
- [In Defense of Utility-First CSS](https://frontstuff.io/in-defense-of-utility-first-css)
- [Shopify’s Polaris: Design Tokens](https://shopify.github.io/polaris-tokens/)
- [Thumbtack’s Thumbprint: Color System](https://thumbprint.design/guide/product/color/)
- [Salesforce’s Lightning: Design Tokens](https://www.lightningdesignsystem.com/design-tokens/)