court.css
v0.1.0
Published
<div align="center">
Downloads
6
Readme
court.css
Tailwind-like CSS-in-JS with a predictable API, no compilation step, good typing, and a small footprint. Made by Tone Row
Getting Started
npm i court.cssBasic Usage
import "court.css/stylesheet"; // import stylesheet
import Box from "court.css"; // import component
export default function App() {
return (
<Box
as="h1"
$f-f="Comic Sans MS"
$c="blue"
$t-s="3px 3px lime"
$b="dashed red"
$p="5px"
>
What's the gist?
</Box>
);
}
// Codesandbox Link 👉 https://codesandbox.io/s/court-css-example-640dk?file=/src/App.js:0-332
1 Stylesheet + 1 Component
Add the stylesheet, import the polymorphic component and you're off to the races1 CSS Property = 1 Box prop
No helpers to learn, just CSS with the property names shorternedProgrammatic Prop Names
The name for the css property border is$b. border-top is$b-tand border-right$b-r. border-radius is$b-ra– we add one letter from the word radius because therwas already used for border-right. Another example is background, it's$babecause$bis used for border.Pseudo-states use underscore
$ou_focus= outline when focused.$bo-s_hover= box-shadow when hovered.
This is crazy, I could just use ______
OMG you're right! What was I thinking!?
Motivation
There are 9 zillion approaches to styling. This is another one. Depending on your needs, it's better AND worse than others. It's similar to tailwind but doesn't need to be compiled. It requires more runtime memory than tailwind because it converts props to classes & css variables, but less memory than CSS-in-JS options like styled-components, because it doesn't need to write styles to the <head>. It's generally smaller than other styling solutions because of how heavily it leverages css custom properties.
Most importantly, I thought this was a funny idea so I built it. Try it out. Use it if it works for you.
Why court.css?
For the French word court meaning short or brief.
API
CourtComponent (default)
import C from 'court.css'Full list of CSS props here src/CourtComponentProps.generated.ts
It's polymorphic (can be any html element), with the as prop.
<C as="marquee">I'm a marquee</C>intercept
Use intercept to intercept prop values and replace them with anything. Use this to implement t-shirt sizing, module types scales, color palettes... anything.
import "court.css/stylesheet";
import Box, { intercept } from "court.css";
/* 👇 intercept font size and implement t-shirt sizing */
intercept("$f-s", (size) => {
switch (size) {
case "sm":
return "12px";
case "md":
return "16px";
case "lg":
return "24px";
case "xl":
return "32px";
default:
return size;
}
});
function App() {
return (
<>
<Box $f-s="sm">Small</Box>
<Box $f-s="md">Medium</Box>
<Box $f-s="lg">Large</Box>
<Box $f-s="xl">Extra Large</Box>
</>
);
}
// Sandbox Link 👉 https://codesandbox.io/s/court-css-intercept-example-olwpg?file=/src/App.jsWorking in Typescript
import "court.css/stylesheet";
import Box, { CourtProps } from "court.css";
function Button(props: CourtProps<"button">) {
return <Box as="button" $f-f="cursive" $f-s="2rem" {...props} />;
}
export default function App() {
return (
<div className="App">
<Button>Hello</Button>
<Button onClick={() => alert("Ciao")}>Goodbye</Button>
</div>
);
}
// Sandbox Link 👉 https://codesandbox.io/s/court-css-typescript-3fr4t?file=/src/App.tsxRoadmap
- Add polymorphic component for friends: vue, svelte, preact, lit
- Allow users to generate CSS themselves (or add it at runtime) and alter class generation and modifiers
Contributing
If you find bugs please open an issue. If you there is some functionality you would like to add please open an issue to discuss before making a pull request.