Using Stylify CSS in CakePHP

CakePHP is an open-source web, rapid development framework that makes building web applications simpler, faster and require less code.

Because CakePHP doesn’t ship with any bundler, you can integrate Stylify into the CakePHP using the Bundler package.

How to integrate the Stylify CSS into the CakePHP

In the example below we will use the Bundler package on its own.

Installation

Because there is no package.json, we need to creat it:

yarn init
npm init

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

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

Usage

Next, create a file, for example stylify.js in the root:

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: ['./templates/**/*.php', './src/**/*.php'], outputFile: './webroot/css/stylify.css' },
]);

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

"scripts": {
	"build": "node bundles.js",
	"watch": "node bundles.js --w"
}

Now you can add the path to stylify.css file into the templates/layouts/default.php:

<?= $this->Html->css(['stylify']) ?>

You can customize the build above however you want.