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 🙂.
Top comments (0)