DEV Community

Cover image for Style your SolidJS website faster with StylifyCSS
Vladimír Macháček
Vladimír Macháček

Posted on • Edited on • Originally published at stylifycss.com

4

Style your SolidJS website faster with StylifyCSS

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
Enter fullscreen mode Exit fullscreen mode

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',
    },
});
Enter fullscreen mode Exit fullscreen mode

Add Stylify CSS in src/index.js:

import './stylify.css';
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

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

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!

If you like the idea, let me know that by starring Stylify repo ❤️.

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

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay