Monorepo

A guide to setting up Master CSS in a modern repository.

Foreword

The Language Server and ESLint both support the monorepo.

By default, the language server will form independent workspaces based on the location of the master.css.* configuration files, independent of the package manager's workspace. The same goes for ESLint, which forms a new working directory based on the location of its configuration file.

Officially integrated packages or extensions will automatically read the master.css.* configuration based on the current running directory. This means that you can start using it with zero configuration as long as you create a configuration file in the workspace.

One root master.css.js

Whether it's a single repository or a monorepo, create a master.css.js file in the root directory for your design system.

🗂️ src
📄 eslint.config.js
📄 master.css.js

The language service will create at least a root workspace regardless of whether master.css.* exists.

One master.css.js per microservice

When there are different design systems or complex requirements in a monorepo, you may need to create master.css.js and eslint.config.js for multiple folders to serve as workspaces.

This will create two workspaces, / and /apps/a.

🗂️ apps
|-- 🗂️ a
|   |-- 📄 eslint.config.js
|   `-- 📄 master.css.js
`-- 🗂️ b
📄 eslint.config.js
📄 master.css.js

Note that /apps/b will be considered part of the root workspace /.

Shared the configuration

In each workspace, you need to export the common root configuration.

export { default } from '../../master.css'

Or extend it and add workspace-specific customization options.

import common from '../../master.css'
 
export default {
    extends: [
        common
    ],
    ...
}

Regardless of whether there is a specific workspace configuration, exporting the configuration is necessary when the workspace exists in eslint.config.js.

Forgot to create /apps/a/master.css.js in the workspace and export the root configuration.

🗂️ apps
|-- 🗂️ a
|   |-- 📄 eslint.config.js
|   `-- 📄 master.css.js
`-- 🗂️ b
📄 eslint.config.js
📄 master.css.js

Unless this workspace is not using Master CSS, this is a common oversight.

Finally, using a monorepo and having multiple workspaces doesn't mean you have to create multiple configurations, in most cases, you just need one root master.css.js.