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:

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:

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

sass.indentWidth: integer

Change the indent width of the compiled CSS file.

Default values: 2

Example:

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.

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

stylelint options:

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:

  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-']

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

Full example:

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