🚀Style your Vue.js website faster with Stylify CSS

Stylify + Vue + Vite. Style your Vue website faster with Stylify. Don't study selectors, syntax and documentation. Use pure CSS syntax and get generated CSS with advanced optimization for production.

For an easier start, you can check out the Stylify Stackblitz playground 🎮.

💎 Stylify Introduction

Stylify generates CSS dynamically based on what you write. The syntax is similar to css property:value. Defined utilities are combined with components selectors and in production minified to bare minimum like .color\:red,.button {color:red} to ._zx,._ga{color:red}.

Stylify allows you to get very small bundles, generate additional lazyloaded CSS chunks, and style the page by writing HTML and selectors 🤟.

🚀 Vue.js Setup

The easiest way to Setup the Vue is using cli:

• Run yarn create vite app
• Select vue
• Then cd app

This way you will get the default Vue application skeleton.

🔌 Stylify Integration

Install the @stylify/unplugin package using NPM or Yarn:

yarn add @stylify/unplugin
npm i @stylify/unplugin

Open the vite.config.js and copy the following content into it:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { vitePlugin } from '@stylify/unplugin';

const stylifyPlugin = vitePlugin({
  transformIncludeFilter: (id) => id.endsWith('vue'),
  bundles: [
    {
      files: ['./src/**/*.vue'],
      outputFile: './src/assets/stylify.css',
    },
  ],
  extend: {
    bundler: {
      compiler: {
        // Match v-bind:class and :class attributes
        selectorsAreas: ['(?:^|\\s+)(?:v-bind)?:class="([^"]+)"'],
      },
    },
  },
});

export default defineConfig(() => ({
    plugins: [stylifyPlugin, vue()]
}));

In the last step, open the src/main.js and add the path to stylify.css:

// ...
import './stylify.css'

Styling the website

If you copy the code bellow into the src/App.vue and run yarn dev you will get a styled Hello World! 🎉 text:

<template>
  <div class="max-width:800px margin:0__auto">
    <h1 class="text-align:center margin-top:100px font-size:42px">Hello World!🤩</h1>
  </div>
</template>

Stylify watches any change in the files that matches the mask in the bundle files and generates CSS into the src/stylify.css.

If you add for example color:blue, the CSS will be automatically updated 🎉.

Go ahead and try Stylify directly on Stackblitz.com 💡.

Components

To avoid bloated templates with utilities, you can use
components directly in files, where they are used through content options (expects javascript object without brackets) or in the compiler config.

<!--
stylify-components
  container: 'max-width:800px margin:0__auto',
  title: 'text-align:center margin-top:100px font-size:42px'
/stylify-components
-->
<template>
  <div class="container">
    <h1 class="title">Hello World!🤩</h1>
  </div>
</template>

Variables

If you like clean code, you also want to avoid hardcoded values in selectors. Variables can be defined the same way as components:

<!--
stylify-variables
  titleFontSize: '42px',
  containerWidth: '800px'
/stylify-variables

stylify-components
  container: 'max-width:$containerWidth margin:0__auto',
  title: 'text-align:center margin-top:100px font-size:$titleFontSize'
/stylify-components
-->
<template>
  <div class="container">
    <h1 class="title">Hello World!🤩</h1>
  </div>
</template>

Building for production

If you run yarn build + yarn preview, the vue markup will be mangled to this:

<template>
  <div class="_7tcrv">
    <h1 class="_88io">Hello World!🤩</h1>
  </div>
</template>

The css is shortened too:

:root {--titleFontSize: 42px;--containerWidth: 800px;}
._bcda8,._7tcrv{max-width:800px}
._m0vnad,._7tcrv{margin:0 auto}
._1vegb8,._88io{text-align:center}
._jimir,._88io{margin-top:100px}
._qe393,._88io{font-size:42px}

Configure anything you need

The examples above doesn't include everything Stylify can do:

• You can map nested files in the template
• Style global selectors
• Define custom screens
• Add own macros like ml:20px for margin-left
• 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 🙂.

---

Stay in touch:

👉 @8machy
👉 @stylifycss
👉 stylifycss.com
👉 dev.to/machy8
👉 medium.com/@8machy

Comments

[Konstantin BIFERT]

So, this is mainly a sugar syntax like stylus in it's own way?
Do you have any plans to have something with more boundaries (like for a Design System).
Also, how does it compare size wise to something like Tailwind?

[Vladimír Macháček]

Stylify is a compiler. It receives a configuration containing a reg exp for a macro that can be matched like color:\(\S+) to match color:red. There can be unlimited amount of macros.
Then it takes a content of any file and tries to match a class. if any macro reg exp matches content in the file, it generates the css for it.
The only syntax sugar is __ for a space and ^ (hat) for a queote, because selectors cannot contain such characters like space and quote.

In my latest tests Tailwind size was larger. I could not figure out how to generate separated CSS chunks and the selectors are not minified. The components optimization was not so good either.

Stylify can have separated css chunks for any page / component. The selectors of components are attached to utilities and then shrinked in production.

[Vladimír Macháček]

By design system you mean some UI components? Like buttons, dropdowns, tthemes?