Use CSS in JS without messing with Babel or esbuild.
classno is a CSS-in-JS library that doesn’t require you to have a custom Babel config or to install an esbuild plugin, nor to hack your JSX runtime. In some ways, it works like Tailwind.
npm
npm install -D classno
yarn
yarn add -D classno
pnpm
pnpm add -D classno
.classno
FileCreate a .classno
file in the root directory of your project with a content
similar to this:
{
"paths": ["src/**/*.ts", "src/**/*.tsx"],
"out": "src/styles/main.css"
}
The
paths
option could be modified to include your target source files. Same for theout
option if you want to change where the CSS goes.
Import the path you included in the out
option to your app. It can be loaded
both as a module or from the head using a <link />
tag.
Extend the scripts
option of your package.json
in a way like the following.
"scripts": {
+ "dev": "concurrently \"classno --watch\" \"your dev command\""
- "dev": "your dev command"
+ "build": "classno && your build command"
- "build": "your build command"
}
If you’re going to use
concurrently
, don’t forget to install it to yourdevDependencies
.
To use classno, import the default function exported from classno
. There are
two ways of using it:
`${"my-component"} ...`
): The passed string literal`...`
): Thisimport classno from "classno";
const myComponent = classno`${"my-component"}
width: 100px;
height: 100px;
background-color: green;
`;
export default function MyComponent() {
return <div className={myComponent}></div>;
}
Like mentioned above, you can also use Stylus:
const myComponent = classno`${"my-component"}
width: 100px;
height: 100px;
background-color: green;
&:hover {
opacity: 0.5;
@media (prefers-color-scheme: dark) {
& > p {
text: blue;
}
}
}
`;
This also works:
const myComponent = classno`${"my-component"}
width 100px
height 100px
background-color green
:hover
opacity 0.5
@media (prefers-color-scheme: dark)
> p
text blue
`;
Conditional styles can be applied like this:
const dropdown = classno`${"dropdown"}
/* Your main styles here, perhaps some transition-duration? */
`;
const dropdownOpen = classno`${"dropdown-open"}
/* Conditional styles */
`;
const dropdownClosed = classno`${"dropdown-closed"}
/* Conditional styles */
`;
export default function Dropdown() {
return (
<div className={`${dropdown} ${open ? dropdownOpen : dropdownClosed}`}>
</div>
);
}
You can also declare global styles. Just don’t pass the class name:
classno`
my_black = rgba(10, 10, 10, 0.8)
apply-common-max-width()
max-width 980px
margin 0 auto
width 100%
html
scroll-behavior smooth
`;
The project is in its early stages, expect everything or nothing to change, and know that I am currently not sure if it is worth investing more time in.