I Can't Believe It's Not CSS

Imagine a backend developer tries to change the color of a button.

After a few hours, they'll say CSS isn't a real language and the backend's the hard part anyway.

They'll look for a way out.

They'll try inline styles, CSS-in-JS, Tailwind. But they're not enough, these half-measures. Someone had to take it to the next level.

Introducing I Can't Believe It's Not CSS

Styling for developers in denial.

For years, you've pretended plain, basic, and minimalist websites were trendy, when really, you just didn't want to touch CSS.

Today, that ends.

Today, you can finally declare that CSS is the wrong kind of declarative.

Because CSS is temporary. SQL is eternal.

What It Is

Write your styles as SQL migrations. Apply them, and your styles appear in the browser. Need to undo a design decision? Just roll back with a down migration.

Because this isn't just a stylesheet, it's a CSS database.

You can query it. Inspect it. Even open it in Postgres. Or SQLite.

Media queries? Rows in a table.

Hover states? Also rows in a table.

Keyframe animations? Believe it or not, also rows in a table.

And when you're done, it compiles to a single CSS file. No runtime. No JavaScript. Just 15 perfectly reasonable database tables for your button styles.

Quick Example

Check out the GitHub repository or install it with npm:

1.npm install -D i-cant-believe-its-not-css
2.npx icbincss init

Here's how you style a button:

1.-- migrations/up/001_init.sql
2.CREATE TOKEN 'brand/500' VALUE #2266ee;
3.CREATE SELECTOR btn AS AND(E('button'), C('primary'));
4.CREATE STYLE SELECTOR btn (
5.  background = token('brand/500'),
6.  color = #fff,
7.  padding = 12px 24px
8.);

Apply the migration:

1.npx icbincss migrate up
2.npx icbincss build

And you get this CSS:

1.:root {
2.  --brand-500: #2266ee;
3.}
4.button.primary {
5.  background: var(--brand-500);
6.  color: #fff;
7.  padding: 12px 24px;
8.}

What You Can Do

Database Migrations for Styles

Version your styles with up/down migrations. Roll back that questionable design decision from last Tuesday.

1.npx icbincss migrate create --name=add_buttons
2.npx icbincss migrate up
3.npx icbincss migrate down

Query Your CSS with SQL

Because why wouldn't you SELECT your styles?

1.SELECT * FROM styles WHERE resp_kind = 'media';
2.SELECT * FROM styles WHERE selector = 'btn';

Use Real Databases

Store your styles in Postgres or SQLite. Open them in your favorite database GUI. Run JOIN queries on your button colors.

1.npx icbincss db init-postgres --database=my_styles
2.npx icbincss db sync-sqlite --file=styles.db

Catch Conflicts Before They Ship

Detect specificity issues and shorthand/longhand conflicts:

1.npx icbincss doctor
2.
3.# Cross-context overrides for .card (spec 0,1,0) → padding:
4.#   - (global)
5.#   - @media (min-width: 768px)
6.#
7.# Shorthand/longhand conflict for .box:
8.#   - border (shorthand) and border-left (longhand) both defined

Framework Integrations

Vite

1.// vite.config.ts
2.import { defineConfig } from "vite";
3.import { icbincssVitePlugin } from "i-cant-believe-its-not-css";
4.
5.export default defineConfig({
6.  plugins: [icbincssVitePlugin()],
7.});

1.// src/main.ts
2.import "virtual:icbincss.css";

Edits to migrations trigger HMR updates, because you deserve hot-reloading for your SQL.

Next.js

1.// next.config.mjs
2.import { withICBINCSS } from "i-cant-believe-its-not-css";
3.
4.export default withICBINCSS(
5.  { reactStrictMode: true },
6.  { outFile: "public/icbincss.css" }
7.);

Advanced Features

Responsive Design

Media queries, container queries, and feature queries:

1.ALTER STYLE SELECTOR card
2.  WHERE width >= 768px
3.  SET padding = 24px;
4.
5.ALTER STYLE SELECTOR sidebar
6.  WHERE container main > 600px
7.  SET display = grid;
8.
9.ALTER STYLE SELECTOR grid
10.  WHERE supports(display: grid)
11.  SET display = grid;

Cascade Layers

1.CREATE LAYERS (reset, base, components, utilities);
2.SET LAYER = components;
3.
4.CREATE STYLE SELECTOR card (
5.  padding = 16px
6.);

Keyframe Animations

1.CREATE KEYFRAMES fade_in (
2.  '0%' ( opacity = 0 ),
3.  '100%' ( opacity = 1 )
4.);

Font Faces

1.CREATE FONT_FACE family 'Inter' (
2.  src = url('/fonts/Inter.woff2') format('woff2'),
3.  font_weight = 400
4.);

Try It Yourself

It compiles to plain CSS with zero runtime overhead. It works with React, Vue, Angular, vanilla HTML. It supports both CommonJS and ESM.

Check out the GitHub repository or read the full documentation.

1.npm install -D i-cant-believe-its-not-css

Watch the full product release video to see it in action.