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
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
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',
},
*/
]);
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"
}
In production, you will get optimized CSS and mangled html:
<h1 class="font-size:24px color:#dd0031 font-family:arial">
Hello World!
</h1>
.a{font-size:24px}
.b{color:#dd0031}
.c{font-family:arial}
Stackblitz Playground
Go ahead and try Stylify CSS + Angular on Stackblitz.
Configuration
The examples above doesn't include everything Stylify can do:
- Define components
- Add custom selectors
- Configure own macros like
ml:20px
for margin-left - Define custom screens
- You can map nested files in the template
- 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 🙂.
Top comments (0)