Skip to content
SpiraCSS v0.3.2-beta

spiracss.config.js (Common Configuration)

spiracss.config.js is the common configuration file for SpiraCSS tooling.

→ Download full template

Main sections:

  • aliasRoots: path resolution for Comment Links / Stylelint
  • selectorPolicy: variant/state representation policy
  • stylelint: SpiraCSS Stylelint plugin rule settings
  • htmlFormat: output attribute for HTML placeholders
  • jsxClassBindings: JSX class binding parsing rules (HTML CLI / VS Code)
  • generator: HTML-to-SCSS generation

Setup

Place spiracss.config.js at the project root.
If package.json has "type": "module", use ESM; otherwise use CommonJS.
For required files, see Quickstart.

// ESM
export default {
  // ...
}
// CommonJS
module.exports = {
  // ...
}

Loading behavior (common)

SpiraCSS tools share the same loading rules for spiracss.config.js.

  • Only spiracss.config.js is considered (no automatic .cjs / .mjs discovery)
  • Load location:
    HTML CLI: relative to process.cwd()
    VS Code extensions: workspace root
    Stylelint: argument passed to createRules() / createRulesAsync()
  • Failure behavior:
    HTML CLI: if the file is missing, continue with defaults for backward compatibility (providing the file is recommended); if it exists but fails to load, exit with an error
    VS Code extensions: warn and continue with defaults
    Stylelint: throw an error and exit

Project customization examples

module.exports = {
  aliasRoots: {
    components: ['components'],
    styles: ['styles']
  },
  selectorPolicy: {
    variant: { mode: 'data', dataKeys: ['data-variant'] },
    state: { mode: 'data', dataKey: 'data-state' }
  },
  stylelint: {
    class: {
      elementDepth: 4,
      childCombinator: true,
      rootSingle: true
    },
    interactionScope: {
      pseudos: [':hover', ':focus'],
      requireComment: true
    },
    pseudo: {
      enabled: true
    },
    rel: {
      requireScss: true
    }
  },
  htmlFormat: {
    classAttribute: 'class'
  },
  jsxClassBindings: {
    memberAccessAllowlist: ['styles', 'classes']
  },
  generator: {
    globalScssModule: '@styles/global',
    childScssDir: 'scss'
  }
}

Next