Configuration

mozaic.config.js

mozaic.config.js allows you to configure and customize Mozaic.

Mozaic configuration can be defined in a file to customize it to your needs, such as enabling or disabling plugins, or change their configuration.

Naming the configuration file

The naming of Mozaic configuration file depends on the configuration of your module system. If you use CommonJS system, then you should create a file mozaic.config.js. If you use ESM, the name will be mozaic.config.cjs, to tell the compiler the config file uses CommonJS syntax.

To know which module system you use, have a look at your package.json. If you have a field type: "module", then you are in ESM system. Otherwise (no type or type: "commonjs"), you are in CommonJS. For further information, please have a look at official Node documentation

For the rest of the documentation, Mozaic configuration file will be referred as mozaic.config.js, even if you are in CommonJS case.

Create mozaic.config.js

Create a mozaic.config.js file at the root of your project:

mozaic.config.js

module.exports = {
/* options */
}

SASS options

sass.includePaths: array of paths

Allow you to import SCSS files from those paths without having to specify them. Specified paths will be added to the default ones.

Default values:


[
'./node_modules/@mozaic-ds/styles/',
'./node_modules/@mozaic-ds/styles/settings-tools/',
'./node_modules/@mozaic-ds/styles/typography/',
'./node_modules/@mozaic-ds/styles/layout/',
'./node_modules/@mozaic-ds/styles/utilities/',
'./node_modules/@mozaic-ds/styles/components/',
'./node_modules/@mozaic-ds/tokens/build/scss/',
'./node_modules/',
]

Example:

mozaic.config.js

module.exports = {
sass: {
includePaths: ['./src/path/to/cssDir/'],
},
}

sass.indentWidth: integer

Change the indent width of the compiled CSS file.

Default values: 2

Example:

mozaic.config.js

module.exports = {
sass: {
indentWidth: 4,
},
}

Tokens options:

tokens.localTokensSrcPath and tokens.localTokensExportPath

localTokensSrcPath is used to define your local emplacement for your custom tokens, localTokensExportPath defines where they should be built.

Note that both options should always be used together.

Use those options to customize tokens. For more information, read our Tokens customisation guide.

mozaic.config.js

module.exports = {
tokens: {
localTokensSrcPath: './src/tokens/', // path to your own js files
localTokensExportPath: './dest/build/', // path to compiled files
},
}

stylelint options:

stylelint.disabled

Allow you to disabled Mozaic built-in config. Default values: 'false' **Example: **


disbaled: true | false

stylelint.caseStyle: String or Regex

Allow you to choose the case style to lint. You can add your own Regex rule to lint.

Default values: 'kebab-case'

**Example: **


caseStyle: 'kebab-case' | 'camelCase' | 'snake_case' | 'PascalCase' | /^[a-z]+(_[a-z]+)*$/

stylelint.bemEntitiesDelimiters: Object

Allow you to specify separators to check the BEM structure.

**Default values: **

mozaic.config.js

bemEntitiesDelimiters: {
modifier: '--',
element: '__',
media: '@',
}

stylelint.prefixes: Array

Allow you to specify additional prefixes. Multiple prefixes can be added.

**Default values: ['mc-', 'ml-', 'mu-', 'mt-', 'mdu-'] **

mozaic.config.js

prefixes: ['lrc-', 'lrl-', 'LrUtility-'],

**Full example: **

mozaic.config.js

module.exports = {
stylelint: {
caseStyle: 'kebab-case', // ['camelCase', 'snake_case', 'PascalCase']
bemEntitiesDelimiters: {
modifier: '--',
element: '__',
media: '@',
},
prefixes: ['example-'],
},
}

Browserslist option:

browserslist : Array

`browserslist.disabled

Allow you to disabled Mozaic built-in config. Default values: 'false'

**Example: **


disabled: true | false

browserslist is used to define custom browsers to use for SCSS compilation.

** Default value: **


['> 0.3%', 'last 3 version', 'IE > 10']

**Full example: **

mozaic.config.js

module.exports = {
browserslist: ['last 2 versions', 'firefox >= 45', 'IE >= 11'],
}

PurgeCSS option:

purgecss : Object

Allow you to clean up CSS from your sources files. Default values: null

**Example: **

mozaic.config.js

purgecss: {
content: ['./src/**/*.html', './src/**/*.js', './src/**/*.vue']
}

To see all available options, referer to the official documentation of the PostCSS plugin