@stylify/bundler

Bundler is a package that allows you to generate CSS files for your project. Bundler is internally used within other Stylify CSS packages.

Installation

Bundler can be only installed via CLI like NPM or Yarn:

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

Usage

import { Bundler } from '@stylify/bundler';

const bundler = new Bundler();

bundler.bundle([
	{
		outputFile: 'path/to/output.css',
		files: ['path/to/layout.html', 'path/to/page.vue']
	},
	{ outputFile: 'path/to/another.css', files: ['path/**/*.html'] }
]);

Configuration

Bundler provides various options for configuration:

import { defineConfig } from '@stylify/bundler';

const config = defineConfig({
	// Bundles are optional.
	// But if they are not passed during bundle() method call
	// they need to be passed here. Otherwise no bundles will be generated
	bundles: [],

	// Optional options are optional
	// https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {},
	// Path to a config file. When in a watch mode
	// nuxt watches the config file for changes
	configFile: 'path/to/config.js',
	// If verbose is enabled, the build info will be shown
	verbose: true,
	// The build is sync by default
	sync: true,
	// If set to true, after the build, bundler will start
	// watching files for a change
	watchFiles: false,
	// Bundles can be defined directly when the instance is created
	// The bundle configuration is shown below in bundler.bundle() method
	// The bundle() method must be called to initiate the bundling process
	bundles: [],
	// This configures CSS layers order and export
	cssLayersOrder: {
		// This will generate @layer layout,page;
		order: 'layout, page',
		// This tells Stylify to export the above layers order
		// only into bundles, that has layout CSS layer
		exportLayer: ['layout']
	},
	// If file path is provided in the following options
	// variables from the Compiler config will be exported into those files
	// so you can reuse them inside CSS, scss and etc.
	// -----------
	// CSS variables are by default injected into the generated CSS.
	// You can change this behavior by configuring compiler
	// See https://stylifycss.com/en/docs/stylify/compiler#variables
	cssVarsExportPath: 'path/to/vars',
	sassVarsExportPath: 'path/to/export-file.scss',
	lessVarsExportPath: 'path/to/vars',
	stylusVarsExportPath: 'path/to/vars'
});

const bundler = new Bundler(config);

// Array of bundles, returns Promise<void>
bundler.bundle([
	{
		// Required
		// Output file will be used to store the generated CSS
		// from given files
		outputFile: '/path/to/output.css',
		// Files or files masks will be used for finding files
		// from which the CSS will be generated.
		// Internally Stylify CSS uses https://npmjs.com/package/fast-glob
		// for finding files.
		files: [
			'path/to/file.html',
			'path/files/*/*.html',
			'path/to/files/**/*.html'
		],

		// Optional
		// This id can be used to find bundle by id
		id: 'my-bundle-id',
		// When true, selectors in given files will be mangled
		// If this option is set to true and rewriteSelectorsInFiles is false
		// it will only mangle CSS selectors
		mangleSelectors: false,
		// Can disable rewriting selectors inside a file when you want to just
		// mangle CSS but not files
		rewriteSelectorsInFiles: false,
		// When you want to generate CSS only for a specific part of page or don't want to
		// break other CSS in the project. Good for components and open source plugins
		// like chats and etc.
		// This selector is used EXACTLY as you set it. So if you use space on the end,
		// the space will be used in the scope.
		scope: '#my-scope',
		// Compiler config can be bundle specific
		// https://stylifycss.com/en/docs/stylify/compiler#configuration
		compiler: {},
		// If layer is configured, css will be wrapped into @layer <name> {}
		cssLayer: 'page'
	}
]);

// In case you need to wait for the CSS to be generated, call this method.
await bundler.waitOnBundlesProcessed();

Files content option

File content options allows you to configure options directly in a file. Apart from default content options, you can use the files option.

stylify-files
	/path/to/layout.html
	path/to/template/part.html
/stylify-files

Hooks

Bundler extends default hooks and adds a few more.

import { hooks } from '@stylify/bundler';

hooks.addListener('hoook:name', (options) => {});