DEV Community

Cover image for Style your Angular website faster with Stylify CSS
Vladimír Macháček
Vladimír Macháček

Posted on • Edited on • Originally published at stylifycss.com

Style your Angular website faster with Stylify CSS

#emptystring

Style your Angular app quickly and easily with Stylify CSS. Split CSS for large pages or create one bundle for a whole app and get extremely small CSS.

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

First install the @stylify/bundler package using NPM or Yarn:

npm i -D @stylify/bundler
yarn add -D @stylify/bundler
Enter fullscreen mode Exit fullscreen mode

Also for the watch mode, we need to run two paralel tasks. This can be solved using concurrently:

yarn add -D concurrently
npm i concurrently
Enter fullscreen mode Exit fullscreen mode

Next, create a file, for example stylify.js:

const { Bundler } = require('@stylify/bundler');

const isDev = process.argv[process.argv.length - 1] === '--w';
const bundler = new Bundler({
  watchFiles: isDev,
  // Optional
  compiler: {
    mangleSelectors: !isDev,
    // https://stylifycss.com/docs/stylify/compiler#variables
    variables: {},
    // https://stylifycss.com/docs/stylify/compiler#macros
    macros: {},
    // https://stylifycss.com/docs/stylify/compiler#components
    components: {},
    // ...
  },
});

// This bundles all CSS into one file
// You can configure the Bundler to bundle CSS for each page separately
// See bundler link bellow
bundler.bundle([
    {
        files: ['./src/**/*.html', './src/**/*.ts'],
        outputFile: './src/styles.css',
    },

    // You can also split css for each component
    // You can map files within the components using content comment option
    // https://stylifycss.com/docs/bundler#files-content-option
    // Stylify takes that option and searches for defined files. If defined file
    // also has an option, id check also those files and so long.
    // This way it maps all files and all dependencies.
    /*
    {
        files: ['./src/app/app.component.*'],
        outputFile: './src/app/app.component.css',
    },
    */
]);
Enter fullscreen mode Exit fullscreen mode

If you don't use splitting and everything will not bundled into the styles.css, then don't forget to add paths to css files.

The last step is to add scripts into the package.json:

"scripts": {
    "dev": "concurrently 'yarn stylify.dev' 'ng serve -c development'",
    "prod": "yarn stylify.build & ng serve",
    "stylify.build": "node stylify.js",
    "stylify.dev": "node stylify.js --w"
}
Enter fullscreen mode Exit fullscreen mode

In production, you will get optimized CSS and mangled html:

<h1 class="font-size:24px color:#dd0031 font-family:arial">
Hello World!
</h1>
Enter fullscreen mode Exit fullscreen mode 
.a{font-size:24px}
.b{color:#dd0031}
.c{font-family:arial}
Enter fullscreen mode Exit fullscreen mode

Stackblitz Playground

Go ahead and try Stylify CSS + Angular on Stackblitz.

Configuration

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

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)