Stylify CSS: Style your SolidJS website faster with CSS-like utilities

Stylify CSS: Style your SolidJS website faster with CSS-like utilities

Style your SolidJS app quickly and easily without CSS-in-JS using Stylify CSS CSS-like utilities.

Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

  • ✨ CSS-like selectors

  • 💎 No framework to study

  • 💡 Less time spent in docs

  • 🧰 Mangled & Extremely small CSS

  • 🤘 No purge needed

  • 🚀 Components, Variables, Custom selectors

  • 📦 It can generate multiple CSS bundles

Also we have a page about what problems Stylify CSS solves and why you should give it a try!

Installation

Install Stylify using cli:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Add the following configuration into vite.config.js:

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';
import solidPlugin from 'vite-plugin-solid';

const stylifyPlugin = stylifyVite({
    bundles: [{ 
        outputFile: './src/stylify.css', 
        files: ['./src/**/*.jsx'] }
    ],
    // Optional
    compiler: {
        // https://stylifycss.com/docs/stylify/compiler#variables
        variables: {},
        // https://stylifycss.com/docs/stylify/compiler#macros
        macros: {},
        // https://stylifycss.com/docs/stylify/compiler#components
        components: {},
        // ...
    },
});

export default defineConfig({
    plugins: [stylifyPlugin, solidPlugin()],
    server: {
        port: 3000,
    },
    build: {
        target: 'esnext',
    },
});

Add Stylify CSS in src/index.js:

import './stylify.css';

Usage

Stylify syntax is similar to CSS. You just write _ instead of a space and ^ instead of a quote.

So if we edit the src/App.jsx:

function App() {
  return (
    <h1 class="font-size:24px margin:12px_24px">
      Hello World!
    </h1>
  );
}

export default App;

In production, you will get optimized CSS and mangled html:

<h1 class="p u">Hello World!</h1>
.p{font-size: 24px}
.u{margin: 12px 24px}

Stackblitz Playground

Go ahead and try Stylify CSS + SolidJS on Stackblitz.

Configuration

The examples above doesn't include everything Stylify can do:

Feel free to checkout the docs to learn more 💎.

Let me know what you think!

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.