Tailwind-like CSS-in-JS with a predictable API, no compilation step, good typing, and a small footprint. Made by Tone Row
npm i court.cssimport "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
- Add the stylesheet, import the polymorphic component and you're off to the races
- No helpers to learn, just CSS with the property names shorterned
-
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. -
$ou_focus= outline when focused.$bo-s_hover= box-shadow when hovered.
OMG you're right! What was I thinking!?
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.
For the French word court meaning short or brief.
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>
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.jsimport "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.tsx- 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
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.