DEV Community

Cover image for I Can't Believe It's Not CSS - SQL to CSS Transpiler
Cody Pearce
Cody Pearce

Posted on • Originally published at codinhood.com

I Can't Believe It's Not CSS - SQL to CSS Transpiler

#showdev #css #sql #webdev

Devs have been trying to avoid CSS for years with inline styles, CSS-in-JS, Tailwind. But they're not enough, these half-measures. Someone had to take it to the next level.

Developers avoiding CSS

Introducing I Can't Believe It's Not CSS

Styling for developers in denial.

I can't believe its not CSS logo

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.

SQL to CSS workflow

Quick Example

Check out the GitHub repository or install it with npm:

npm install -D i-cant-believe-its-not-css
npx icbincss init
Enter fullscreen mode Exit fullscreen mode

Here's how you style a button:

-- migrations/up/001_init.sql
CREATE TOKEN 'brand/500' VALUE #2266ee;
CREATE SELECTOR btn AS AND(E('button'), C('primary'));
CREATE STYLE SELECTOR btn (
  background = token('brand/500'),
  color = #fff,
  padding = 12px 24px
);
Enter fullscreen mode Exit fullscreen mode

Apply the migration:

npx icbincss migrate up
npx icbincss build
Enter fullscreen mode Exit fullscreen mode

And you get this CSS:

:root {
  --brand-500: #2266ee;
}
button.primary {
  background: var(--brand-500);
  color: #fff;
  padding: 12px 24px;
}
Enter fullscreen mode Exit fullscreen mode

What You Can Do

Database Migrations for Styles

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

npx icbincss migrate create --name=add_buttons
npx icbincss migrate up
npx icbincss migrate down
Enter fullscreen mode Exit fullscreen mode

Query Your CSS with SQL

Because why wouldn't you SELECT your styles?

SELECT * FROM styles WHERE resp_kind = 'media';
SELECT * FROM styles WHERE selector = 'btn';
Enter fullscreen mode Exit fullscreen mode

Use Real Databases

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

npx icbincss db init-postgres --database=my_styles
npx icbincss db sync-sqlite --file=styles.db
Enter fullscreen mode Exit fullscreen mode

Catch Conflicts Before They Ship

Detect specificity issues and shorthand/longhand conflicts:

npx icbincss doctor

# Cross-context overrides for .card (spec 0,1,0) → padding:
#   - (global)
#   - @media (min-width: 768px)
#
# Shorthand/longhand conflict for .box:
#   - border (shorthand) and border-left (longhand) both defined
Enter fullscreen mode Exit fullscreen mode

Framework Integrations

Vite 

// vite.config.ts
import { defineConfig } from "vite";
import { icbincssVitePlugin } from "i-cant-believe-its-not-css";

export default defineConfig({
  plugins: [icbincssVitePlugin()],
});
Enter fullscreen mode Exit fullscreen mode 
// src/main.ts
import "virtual:icbincss.css";
Enter fullscreen mode Exit fullscreen mode

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

Next.js 

// next.config.mjs
import { withICBINCSS } from "i-cant-believe-its-not-css";

export default withICBINCSS(
  { reactStrictMode: true },
  { outFile: "public/icbincss.css" }
);
Enter fullscreen mode Exit fullscreen mode

Advanced Features

Responsive Design

Media queries, container queries, and feature queries:

ALTER STYLE SELECTOR card
  WHERE width >= 768px
  SET padding = 24px;

ALTER STYLE SELECTOR sidebar
  WHERE container main > 600px
  SET display = grid;

ALTER STYLE SELECTOR grid
  WHERE supports(display: grid)
  SET display = grid;
Enter fullscreen mode Exit fullscreen mode

Cascade Layers 

CREATE LAYERS (reset, base, components, utilities);
SET LAYER = components;

CREATE STYLE SELECTOR card (
  padding = 16px
);
Enter fullscreen mode Exit fullscreen mode

Keyframe Animations 

CREATE KEYFRAMES fade_in (
  '0%' ( opacity = 0 ),
  '100%' ( opacity = 1 )
);
Enter fullscreen mode Exit fullscreen mode

Font Faces 

CREATE FONT_FACE family 'Inter' (
  src = url('/fonts/Inter.woff2') format('woff2'),
  font_weight = 400
);
Enter fullscreen mode Exit fullscreen mode

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.

npm install -D i-cant-believe-its-not-css
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)