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 and you 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 try our the Codepen Playground.

• Use _ (one underscore) for a space and ^ (a hat) for a quote
• To preserver underscore or a hat character, use \ (backslash) => \_
• The default syntax pattern is <screen>:<pseudo classes>:<property>:<value>. Sceens and pseudo classes are optional.
• You can group selectors to make them a bit shorter: <screen>:<pseudo classes>:{<multiple properties split by ; >}

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

hover:{color:blue;font-weight:bold} # Shortcut for multiple selectors
lg:hover:{color:blue;font-weight:bold} # The same but also for screen

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.

Screens can also be combined using logical operands: Logical AND: &&, Logical OR: ||

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+': (screen) => `(min-width: ${screen.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.

In a compiler config:

const compilerConfig = {
    variables: {
        fontSize: '24px',
        fontSizeLg: '32px',
        textShadow: '0 4px 8px #379adf'
    }
};

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.

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
        `,
    }
};

Adding Macros

In case you want to add for example a shorter variant for margin-left like ml, you can add macro as in example below.

const compilerConfig = {
    macros: {
        'ml:(\\S+?)': ({macroMatch, cssProperties}) => {
            // ml:24px => will create => margin-left: 24px
            cssProperties.add('margin-left', macroMatch.getCapture(0));
        }
    }
};

Custom selectors

Styling elements globally can be done using custom selectors. Syntax is folllowing [css selectors]{stylify selectors split by ;}. The & character always reffers to upper level 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">&plus;</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.

More Configuration

Check out the compiler for more configuration options.

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.