Using Stylify CSS in Angular

Angular is a platform for building mobile and desktop web applications.

Stylify can be integrated into the Angular using Bundler.

Try it on StackBlitz

How to integrate the Stylify CSS into the Angular

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

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

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

yarn add -D concurrently
npm i concurrently

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 config info https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/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 below
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/en/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',
	},
	*/
]);

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

Now when you run yarn dev, the CSS files will be generated. In production, the selectors will be mangled.

You can customize the build above however you want.

Custom Webpack Build

If you decide to use Custom Builder like @angular-builders/custom-webpack, check out Webpack Guide