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.

• 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:antialiased

When 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

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'
    }
};

CSS variables

When you want to turn on CSS variables, just add replaceVariablesByCssVariables in stylify config. This will replace variable by a CSS variable instead of it's value.

Stylify tries to be strict by default. When the CSS variables are enabled, 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.

In a compiler config:

const compilerConfig = {
    // Enable CSS variables
    replaceVariablesByCssVariables: true,
    // 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.

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 the example below.

const compilerConfig = {
    macros: {
        'ml:(\\S+?)': ({macroMatch, selectorProperties}) => {
            // ml:24px => will create => margin-left: 24px
            selectorProperties.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 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">&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.

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.