Configuration

mozaic.config.js

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

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/lm/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
},
}

platforms

By default, we generate tokens that can be consumed as scss or css variable files.

However, you may want to generate tokens that can be consumed by another technology.

To do so, you just have to add inside your mozaic.config.js filde in the tokens object, a platform key, which takes as value an array listing the desired technologies.


module.exports = {
tokens: {
platforms: ['js', 'ios'],
},
}

  • Default values: ['scss']
  • Allowed values: css, js, android, ios, ios-swift

Note that the values you add in the tokens.platforms array are in addition to the default values, but do not replace them.

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