Development Strategy

Monorepo

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

Foreword

The Language Server and ESLint both support the monorepo development strategy.

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.

Development Strategy
Responsive Design

Adapt your user interface to different devices with flexible responsive syntax.

Development Strategy
Reusing Styles

A guide to reusing styles and code de-duplication.

© Aoyue Design LLC.