sassModuleTests() — vite Function Reference

Architecture documentation for the sassModuleTests() function in sass-tests.ts from the vite codebase.

Function typescript ViteCore ConfigEngine called by 1

Entity Profile

ViteCore→ ConfigEngine→ sassModuleTests() — vite Function Reference

Dependency Diagram

graph TD
  232f303f_2fa9_44e9_cf63_8e94f647770a["sassModuleTests()"]
  48f28f67_4a5c_e42b_f942_68d103bdd95b["sass-tests.ts"]
  232f303f_2fa9_44e9_cf63_8e94f647770a -->|defined in| 48f28f67_4a5c_e42b_f942_68d103bdd95b
  d2817fdd_4dd1_2a8b_dd89_2038bea82b33["tests()"]
  d2817fdd_4dd1_2a8b_dd89_2038bea82b33 -->|calls| 232f303f_2fa9_44e9_cf63_8e94f647770a
  style 232f303f_2fa9_44e9_cf63_8e94f647770a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

playground/css/__tests__/sass-tests.ts lines 81–117

export const sassModuleTests = (enableHmrTests = false) => {
  test('sass modules composes/from path resolving', async () => {
    const imported = await page.$('.path-resolved-modules-sass')
    expect(await getColor(imported)).toBe('orangered')

    // check if the generated CSS module class name is indeed using the
    // format specified in vite.config.js
    expect(await imported.getAttribute('class')).toMatch(
      /.composed-module__apply-color___[\w-]{5}/,
    )

    expect(await imported.getAttribute('class')).toMatch(
      /.composes-path-resolving-module__path-resolving-sass___[\w-]{5}/,
    )

    // @todo HMR is not working on this situation.
    // editFile('composed.module.scss', (code) =>
    //   code.replace('color: orangered', 'color: red')
    // )
    // await expect.poll(() => getColor(imported)).toMatch('red')
  })

  test('css modules w/ sass', async () => {
    const imported = await page.$('.modules-sass')
    expect(await getColor(imported)).toBe('orangered')
    expect(await imported.getAttribute('class')).toMatch(
      /.mod-module__apply-color___[\w-]{5}/,
    )

    if (isBuild) return

    editFile('mod.module.scss', (code) =>
      code.replace('color: orangered', 'color: blue'),
    )
    await expect.poll(() => getColor(imported)).toBe('blue')
  })
}