Get Started
Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS on demand. Stylify processes content (of a file for example), finds class selectors and generates CSS for them. Then it does some optimization and generates CSS files.
All you have to do in order to start using Stylify is to install it and write CSS-like selectors into class attributes. No configuration required. You don’t have to create any CSS files, add any configuration or study anything. If you know CSS a bit, you already know, how to use Stylify.
However, if you want, you can use other features like Variables, Components, Macros and Custom selectors. More about them below.
Stylify CSS doesn’t ship with any “Fancy Pants” shortcuts, color themes and predefined typography. You might be asking why, so here are a few explanations for start:
- Shortcuts: They are hard to remember and impractical. Yes, using them means less typing and shorter class attributes for the cost of studying syntax (which is easy to forget) and increased complexity.
- Color palettes: Stylify doesn’t provide any because they doesn’t match design needs in most cases. When working on a project, you will also have to get them from project designer, downloaded theme or generate them on your own using some tool like Material Theme Builder.
- Typography: The same as color palettes. You can find some typography tools and assets and typography snippets in Stlyify docs.
- To sum it up, the goal is to stick as much as possible with the native CSS syntax without unnecessary predefined configuration that is practically useless and overvalued.
Installation
Stylify can work with any tool. For some of them it have its own integration. If you havent found your favorite let us know.
Quick Start
The easiest way to start is to play within the editors below or copy the examples and test it within the Codepen Playground.
Syntax is similar to CSS property:value with a few differences:
- Use
_(one underscore) for a space and^(a hat) for a quote - To preserver underscore or a hat character, use
\(a backslash) =>\_ - For vendor prefixes
-webkit,-moz, do not add-(a hyphen) at the beginning - The default syntax pattern is
<screen>:<pseudo classes>:<property>:<value>. Sceens and pseudo classes are optional
color:blue => blue color
hover:color:blue => blue color after hover
lg:color:blue => blue color for from selected screen
lg:hover:color:blue => blue color after hover from selected screen
webkit-font-smoothing:antialiasedWhen a lot of properties repeats for the same screen or pseudo class, you can group them like in the example below. The syntax is <screen>:<pseudo classes>:{stylify selectors split by ;}
hover:{color:blue;font-weight:bold} # Shortcut for multiple selectors
lg:hover:{color:blue;font-weight:bold} # The same but also for screen<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
height:120px
width:auto
border-radius:4px
transition:.3s
hover:scale:1.1
"><!-- Edit Me 😎! Write selectors as CSS property:value Use _ for a space and ^ for a quote --> <img src="/images/p1.jpg" class=" height:120px width:auto border-radius:4px transition:.3s hover:scale:1.1 ">
.border-radius\:4px{
border-radius: 4px
}
.height\:120px{
height: 120px
}
.hover\:scale\:1\.1:hover{
scale: 1.1
}
.transition\:\.3s{
transition: .3s
}
.width\:auto{
width: auto
}.z{
border-radius: 4px
}
.zp{
height: 120px
}
.zo:hover{
scale: 1.1
}
.dr{
transition: .3s
}
.cw{
width: auto
}<!-- Edit Me 😎! Write selectors as CSS property:value Use _ for a space and ^ for a quote --> <img src="/images/p1.jpg" class=" zp cw z dr zo ">
Screens Usage
Stylify has predefined shortcuts like sm, md, lg and dynamic screens such as minw, maxw, rng. Dynamic screens are flexible and the generated media query depends on the value you choose when using them.
Check out the full list. All generated screens are automaticaly sorted.
<div class="font-size:12px minw768px:font-size:32px lg:font-size:24px">
Screens
</div><div class="font-size:12px minw768px:font-size:32px lg:font-size:24px"> Screens </div>
.font-size\:12px{
font-size: 1.2rem;
line-height: 2.04rem
}
@media (min-width: 768px) {
.minw768px\:font-size\:32px{
font-size: 3.2rem;
line-height: 3.84rem
}
}
@media (min-width: 1024px) {
.lg\:font-size\:24px{
font-size: 2.4rem;
line-height: 4.08rem
}
}.bo{
font-size: 1.2rem;
line-height: 2.04rem
}
@media (min-width: 768px) {
.zz{
font-size: 3.2rem;
line-height: 3.84rem
}
}
@media (min-width: 1024px) {
.op{
font-size: 2.4rem;
line-height: 4.08rem
}
}<div class="bo zz op"> Screens </div>
Screens can also be combined using logical operands: Logical AND: &&, Logical OR: ||
<div class="lg||landscape:color:orange sm&&dark:color:grey lg&&dark:color:white">
Combined screens
</div><div class="lg||landscape:color:orange sm&&dark:color:grey lg&&dark:color:white"> Combined screens </div>
@media (min-width: 1024px), (orientation: landscape) {
.lg\|\|landscape\:color\:orange{
color: orange
}
}
@media (min-width: 640px) and (prefers-color-scheme: dark) {
.sm\&\&dark\:color\:grey{
color: grey
}
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) {
.lg\&\&dark\:color\:white{
color: white
}
}@media (min-width: 1024px), (orientation: landscape) {
.aaa{
color: orange
}
}
@media (min-width: 640px) and (prefers-color-scheme: dark) {
.aab{
color: grey
}
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) {
.aac{
color: white
}
}<div class="aaa aab aac"> Combined screens </div>
If you want to add a custom screen, you can do that like this:
const compilerConfig = {
screens: {
'xs': '(min-width: 400px)',
// Screens can also be functions => dynamic screens
'customScreen\\w+': (match) => `(min-width: ${match.fullMatch.replace('customScreen', '')})`
}
};Adding a Variable
It’s not a good practice to have hardcoded values in the code. Therefore you can define variables.
Variable can be defined in a content (expects an object without surounding brackets) when used localy or in a compiler config, when used globally.
<!--
stylify-variables
height: '120px',
radius: '4px',
scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
width:auto
transition:.3s
height:$height
border-radius:$radius
hover:scale:$scale
"><!-- stylify-variables height: '120px', radius: '4px', scale: '1.1' /stylify-variables --> <img src="/images/p3.jpg" class=" width:auto transition:.3s height:$height border-radius:$radius hover:scale:$scale ">
:root {
--height: 120px;
--radius: 4px;
--scale: 1.1;
}
.border-radius\:\$radius{
border-radius: var(--radius)
}
.height\:\$height{
height: var(--height)
}
.hover\:scale\:\$scale:hover{
scale: var(--scale)
}
.transition\:\.3s{
transition: .3s
}
.width\:auto{
width: auto
}:root {
--height: 120px;
--radius: 4px;
--scale: 1.1;
}
.zv{
border-radius: var(--radius)
}
.zu{
height: var(--height)
}
.zt:hover{
scale: var(--scale)
}
.dr{
transition: .3s
}
.cw{
width: auto
}<!-- stylify-variables height: '120px', radius: '4px', scale: '1.1' /stylify-variables --> <img src="/images/p3.jpg" class=" cw dr zu zv zt ">
In a compiler config:
const compilerConfig = {
variables: {
fontSize: '24px',
fontSizeLg: '32px',
textShadow: '0 4px 8px #379adf'
}
};CSS variables
Stylify tries to be strict by default. You might want to set external variables, to inform Stylify, that some variables exists but are external. If you don’t want to configure all of them, you can disable the warning completely.
md- for Material Theme. If so, it will be matched as external. This way you don’t have to parse any files and check for names.In a compiler config:
const compilerConfig = {
// Set external variables
externalVariables: [
// Simple string check
'some-color',
// Define callback to specify more flexible check.
// This will for example mark every variable that starts with md-
// as external.
(variable) => variable.startsWith('md-') ? true : undefined
],
// Disable undefined variable error
// 'silent' => disables warning completely
// 'warn' => is default for development
// 'error' => is default for production
undefinedVariableWarningLevel: 'silent'
};Defining a Component
When we want to reuse a piece of code, for example for a button without duplicating classes, we can define a component. Component can be defined in a content (expects an object without surounding brackets) when used localy (one file / a few pages) or in a compiler config, when used globally.
<!--
stylify-components
'image': `
height:100px
width:auto
border-radius:4px
transition:.3s
margin:0_8px
hover:scale:1.1
`
/stylify-components
-->
<img src="/images/p1.jpg" class="image">
<img src="/images/p2.jpg" class="image"><!-- stylify-components 'image': ` height:100px width:auto border-radius:4px transition:.3s margin:0_8px hover:scale:1.1 ` /stylify-components --> <img src="/images/p1.jpg" class="image"> <img src="/images/p2.jpg" class="image">
.image{
border-radius: 4px
}
.image{
height: 100px
}
.image{
margin: 0 8px
}
.image:hover{
scale: 1.1
}
.image{
transition: .3s
}
.image{
width: auto
}.zq{
border-radius: 4px
}
.zq{
height: 100px
}
.zq{
margin: 0 8px
}
.zq:hover{
scale: 1.1
}
.zq{
transition: .3s
}
.zq{
width: auto
}<!-- stylify-components 'image': ` height:100px width:auto border-radius:4px transition:.3s margin:0_8px hover:scale:1.1 ` /stylify-components --> <img src="/images/p1.jpg" class="zq"> <img src="/images/p2.jpg" class="zq">
In a compiler config:
const compilerConfig = {
components: {
'label-icon': 'lg:font-size:48px margin-left:8px',
label: `
display:flex
line-height:1.2
font-size:32px
align-items:center
`,
}
};link this selector can have a collision in production with selector like sidebar-link, when mangling selectors. Check out components documentation for more info.Adding Macros
In case you want to add for example a shorter variant for margin-left like ml, you can add macro as in the example below.
const compilerConfig = {
macros: {
'ml:(\\S+?)': (match) => {
// ml:24px => will create => margin-left: 24px
// match.fullMatch => full match => ml:24px
// match.getCapture(xy) => returns captures from () according to index
// getCapture(0) => 24px
// getCapture(1) => undefined => there is only one capture in macro
return {'margin-left': match.getCapture(0)}
}
}
};Custom selectors
Styling elements globally can be done using custom selectors.
Syntax is folllowing [css selectors]{stylify selectors split by ; (semicolon)}.
The & character always refers to current element like in SCSS.
For a space use the _ (underscore) and for a quote ^ a hat character.
<!-- Every <a> is going to have blue color -->
<div class="[a]{color:blue}">
<!-- When the cursor is over the link, only the label is going to be underlined -->
<a href="#" class="
hover:text-decoration:none
[&:hover_.label]{text-decoration:underline;font-weight:bold}
">
<span class="icon">+</span>
<span class="label">Blue link</span>
</a>
</div>Prepared Components
Are you looking for some prearanged components? We have you covered!
Material Theme Integration guide
If you are looking for some color palettes, there is a guide on how to use Material Theme Builder to easily generate Material Theme for your next project.
Advanced Configuration
Check out the compiler for more configuration options. The Compiler Config is reusable and the same for all packages listed below.
In case you want to use Stylify within the browser directly, you should check out the Runtime documentation.
Stylify CSS Packages
Stylify ships with multiple packages. All of them can be installed using NPM or YARN. Stylify CSS and Profiler can also be used directly through CDN:
- @stylify/astro - Integration module for Astro.build
- @stylify/stylify - The core. Generates CSS. Rewrites (mangles) selectors
- @stylify/bundler - For generating CSS bundles
- @stylify/unplugin - Universal plugin for Rollup, Webpack, Vite and Esbuild
- @stylify/nuxt - A module for Nuxt.js v3
- @stylify/nuxt-module - A module for Nuxt.js v2 < v3
Try Stylify CSS with your favorite tool!
For easier start with your favorite tool check out the integration examples.
