onCreateWebpackConfig.ts

Filename	Percent	Threshold	Total	Covered	Uncovered
gatsby/onCreateWebpackConfig.ts	44.62%	95%	65	29	36

import { CreateWebpackConfigArgs, GatsbyNode } from "gatsby"

import { ROOT_PATH } from "./constants"

// This is required after update to have valid CSS selectors for `.module.css` files, so classes don't have symbols
// like `+`, just numbers and letters
const fixCSSModules = ({ actions, getConfig }: CreateWebpackConfigArgs) => {
  const config = getConfig()

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  type Rule = any

  config.module.rules.forEach((topRule: Rule) => {
    const areCssRules = topRule.oneOf?.some((rule: Rule) =>
      rule.test.test("style.css")
    )

    if (!areCssRules) {
      return
    }

    topRule.oneOf.forEach((rule: Rule) => {
      rule.use.forEach((innerRule: Rule) => {
        if (!innerRule.options?.modules?.localIdentName) {
          return
        }

        // By default it is `base64` instead of `hex` which can contain invalid symbols
        innerRule.options.modules.localIdentName =
          "[name]--[local]--[hash:hex:5]"
      })
    })
  })

  actions.replaceWebpackConfig(config)
}

const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = (params) => {
  const { actions, plugins } = params

  actions.setWebpackConfig({
    plugins: [
      plugins.define({
        ROOT_PATH: JSON.stringify(ROOT_PATH),
      }),
    ],
  })

  fixCSSModules(params)
}

export { onCreateWebpackConfig }

[{"file":"gatsby/onCreateWebpackConfig.ts","line":7,"character":8,"text":"config","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":10,"character":7,"text":"Rule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":12,"character":2,"text":"config","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":12,"character":9,"text":"module","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":12,"character":16,"text":"rules","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":12,"character":22,"text":"forEach","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":12,"character":31,"text":"topRule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":12,"character":40,"text":"Rule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":13,"character":10,"text":"areCssRules","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":13,"character":24,"text":"topRule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":13,"character":32,"text":"oneOf","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":13,"character":39,"text":"some","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":13,"character":45,"text":"rule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":13,"character":51,"text":"Rule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":14,"character":6,"text":"rule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":14,"character":11,"text":"test","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":14,"character":16,"text":"test","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":17,"character":9,"text":"areCssRules","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":21,"character":4,"text":"topRule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":21,"character":12,"text":"oneOf","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":21,"character":18,"text":"forEach","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":21,"character":27,"text":"rule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":21,"character":33,"text":"Rule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":22,"character":6,"text":"rule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":22,"character":11,"text":"use","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":22,"character":15,"text":"forEach","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":22,"character":24,"text":"innerRule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":22,"character":35,"text":"Rule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":23,"character":13,"text":"innerRule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":23,"character":23,"text":"options","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":23,"character":32,"text":"modules","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":23,"character":41,"text":"localIdentName","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":28,"character":8,"text":"innerRule","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":28,"character":18,"text":"options","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":28,"character":26,"text":"modules","kind":1},{"file":"gatsby/onCreateWebpackConfig.ts","line":28,"character":34,"text":"localIdentName","kind":1}]

TypeScript coverage report