Style your Angular website faster with Stylify CSS

npm i -D @stylify/bundler
yarn add -D @stylify/bundler

yarn add -D concurrently
npm i concurrently

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',
    },
    */
]);

"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"
}

<h1 class="font-size:24px color:#dd0031 font-family:arial">
Hello World!
</h1>

.a{font-size:24px}
.b{color:#dd0031}
.c{font-family:arial}