Set up Master CSS in Webpack

Guide to setting up Master CSS in your Webpack project.

Create a project

If you don't have a Webpack project, create one first. This guide uses a small app with src/index.js, src/style.css, and src/index.html.

mkdir my-appcd my-appnpm init -ynpm install webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader --save-dev

Install Master CSS Webpack

Install the Master CSS Webpack integration into your project via package managers.

npm i @master/css.webpack@rc

Add client types

If your source files are type-checked, add the Master CSS integration client types before importing Master CSS virtual manifest, emittedGlobals, or generated CSS modules.

/// <reference types="@master/css-integration/client" />

Create a Webpack config file

Create and configure the webpack.config.js file. Webpack feeds JavaScript modules to the scanner, then writes generated CSS into the stylesheet that imports @master/css.

import path from 'node:path'import HtmlWebpackPlugin from 'html-webpack-plugin'import MasterCSSPlugin from '@master/css.webpack'export default {    entry: './src/index.js',    output: {        filename: 'bundle.js',        path: path.resolve('dist')    },    plugins: [        new HtmlWebpackPlugin({            template: path.resolve('src/index.html')        }),        new MasterCSSPlugin()    ],    devServer: {        static: './dist',        port: 8080,        watchFiles: ['src/**/*']    },    module: {        rules: [            { test: /\.css$/, use: ['style-loader', 'css-loader'] }        ]    }}

Configure a HTML file

Create and configure the src/index.html template file.

<!doctype html><html lang="en"><head>    <meta charset="utf-8" />    <title>Master CSS Webpack</title></head><body>    <h1 class="hero-title native-card">Hello World</h1></body></html>

Import the app stylesheet

Import your stylesheet from the JavaScript entry.

import './style.css'

Import stylesheets

Import Master CSS from src/style.css. This stylesheet is also the project CSS entry.

@import '@master/css';

Author app CSS and manifest directives

Source stylesheets can contain ordinary CSS, @settings, @theme tokens and keyframes, top-level custom conditions/selectors, and managed definition directives together. Ordinary class selectors are kept only when they appear in scanned source. Add @preserve native; only when native CSS must be preserved as written.

A stylesheet that imports @master/css is also a project CSS entry, so its Master CSS manifest directives participate in the project manifest graph.

@import '@master/css';.native-card {    border: 1px solid rgb(0 0 0 / 12%);}@components {    hero-title {        @compose m:0 font:5xl font:heavy text:neutral;    }}

@import '@master/css';@import './src/style.css';

Add scripts to `package.json`

Add start and build scripts to standardize the development process.

{    "scripts": {        "dev": "webpack serve --mode development",        "build": "webpack --mode production"    }}

Launch server

Run the development server.

npm run dev

Hello world!

Now style your first element using Master CSS syntax!

<!doctype html><html lang="en"><head>    <meta charset="utf-8" />    <title>Master CSS Webpack</title></head><body>    <h1 class="hero-title native-card">Hello World</h1></body></html>

Open your browser to watch the changes.

localhost:8080