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 

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:

• Define components
• Add custom selectors
• Configure own macros like ml:20px for margin-left
• Define custom screens
• You can map nested files in the template
• And a lot more

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 🙂.