@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.
![](/images/docs/bundler/bundler.png)
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.
This option expects files paths as string When file path starts with /
, it is an absolut path, otherwise is relative.
stylify-files
/path/to/layout.html
path/to/template/part.html
/stylify-files
Hooks
Bundler extends default hooks and adds a few more.
- bundler:initialized: When the bundler instance is created
- bundler:beforeInputFileRewritten: Before input file is rewritten
- bundler:beforeCssFileCreated: Before a CSS file is created
- bundler:bundleProcessed: When bundle is processed
- bundler:fileToProcessOpened: Before file is processed
import { hooks } from '@stylify/bundler';
hooks.addListener('hoook:name', (options) => {});
Where to go next?
- 🚀 Learn how to get started
- ⚙️ Or configure Stylify right away: