コンテンツにスキップ
SpiraCSS v0.3.2-beta

spiracss.config.js（共通設定）

spiracss.config.js は SpiraCSS 関連ツールで共有される設定ファイルです。

→ 全項目入りテンプレートをダウンロード

主な参照先は以下です。

  • aliasRoots: Comment Links / Stylelint のパス解決
  • selectorPolicy: バリアント/状態の表現方針
  • stylelint: SpiraCSS Stylelint プラグインのルール設定
  • htmlFormat: HTML プレースホルダ付与の出力属性
  • jsxClassBindings: JSX の class バインディング解析設定（HTML CLI / VS Code）
  • generator: HTML→SCSS 生成

セットアップ

spiracss.config.js はプロジェクトルートに配置します。
package.json に "type": "module" がある場合は ESM、その他は CommonJS で記述してください。
必須ファイルの配置は クイックスタート を参照してください。

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

読み込み仕様（共通）

  • 対象ファイルは spiracss.config.js のみ（.cjs / .mjs の自動探索なし）
  • 読み込み位置:
    HTML CLI: process.cwd() 配下
    VS Code 拡張: ワークスペースルート
    Stylelint: createRules() / createRulesAsync() の引数
  • 読み込み失敗時の挙動:
    HTML CLI: ファイル未存在ならデフォルトで続行（設置推奨）。存在するのに読み込めない場合はエラー終了
    VS Code 拡張: 警告を出してデフォルト設定で続行
    Stylelint: 例外を投げて終了

プロジェクトごとのカスタマイズ例

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

次のステップ