scssProcessor() — vite Function Reference

Architecture documentation for the scssProcessor() function in css.ts from the vite codebase.

Function typescript PluginSystem AssetManagement calls 7 called by 1

Entity Profile

PluginSystem→ AssetManagement→ scssProcessor() — vite Function Reference

Dependency Diagram

graph TD
  0a163673_dac2_220c_2b8a_a489f9a38632["scssProcessor()"]
  c3eb47df_971b_0616_6c9f_29b3ded72224["css.ts"]
  0a163673_dac2_220c_2b8a_a489f9a38632 -->|defined in| c3eb47df_971b_0616_6c9f_29b3ded72224
  1da538be_8fb3_3d85_2856_d9bfecfb04f5["createPreprocessorWorkerController()"]
  1da538be_8fb3_3d85_2856_d9bfecfb04f5 -->|calls| 0a163673_dac2_220c_2b8a_a489f9a38632
  a4066f3a_4f19_8edd_3fb6_20980be68a48["loadSassPackage()"]
  0a163673_dac2_220c_2b8a_a489f9a38632 -->|calls| a4066f3a_4f19_8edd_3fb6_20980be68a48
  788c7102_1f9e_48db_0312_d3566b067276["makeScssWorker()"]
  0a163673_dac2_220c_2b8a_a489f9a38632 -->|calls| 788c7102_1f9e_48db_0312_d3566b067276
  b3a25877_fb4e_e12d_263d_f69173aee25a["getSource()"]
  0a163673_dac2_220c_2b8a_a489f9a38632 -->|calls| b3a25877_fb4e_e12d_263d_f69173aee25a
  1479899a_5d18_ab3c_da35_d44505504960["cleanScssBugUrl()"]
  0a163673_dac2_220c_2b8a_a489f9a38632 -->|calls| 1479899a_5d18_ab3c_da35_d44505504960
  2ed2578e_588a_efd0_df6b_829e1a96adf2["parse()"]
  0a163673_dac2_220c_2b8a_a489f9a38632 -->|calls| 2ed2578e_588a_efd0_df6b_829e1a96adf2
  a4adb1a7_cf54_091f_eb63_8217e684a8e1["normalizePath()"]
  0a163673_dac2_220c_2b8a_a489f9a38632 -->|calls| a4adb1a7_cf54_091f_eb63_8217e684a8e1
  969cb910_e45f_4b10_e707_9ec8d9fcc8d8["close()"]
  0a163673_dac2_220c_2b8a_a489f9a38632 -->|calls| 969cb910_e45f_4b10_e707_9ec8d9fcc8d8
  style 0a163673_dac2_220c_2b8a_a489f9a38632 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/node/plugins/css.ts lines 2603–2685

const scssProcessor = (
  maxWorkers: number | undefined,
): StylePreprocessor<SassStylePreprocessorInternalOptions> => {
  let worker: ReturnType<typeof makeScssWorker> | undefined
  let failedSassEmbedded: boolean | undefined

  return {
    close() {
      worker?.stop()
    },
    async process(environment, source, root, options, resolvers) {
      let sassPackage = loadSassPackage(root, failedSassEmbedded ?? false)
      if (failedSassEmbedded === undefined) {
        failedSassEmbedded = false
        try {
          await import(sassPackage.path)
        } catch (e) {
          if (/sass-embedded-[a-z0-9]+-[a-z0-9]+/i.test(e.message)) {
            failedSassEmbedded = true
            sassPackage = loadSassPackage(root, failedSassEmbedded)
          }
        }
      }

      worker ??= makeScssWorker(environment, resolvers, maxWorkers)

      const { content: data, map: additionalMap } = await getSource(
        source,
        options.filename,
        options.additionalData,
        options.enableSourcemap,
      )

      const optionsWithoutAdditionalData = {
        ...options,
        additionalData: undefined,
      }
      try {
        const result = await worker.run(
          pathToFileURL(sassPackage.path).href,
          data,
          optionsWithoutAdditionalData,
        )
        const deps = result.stats.includedFiles.map((f) => cleanScssBugUrl(f))
        const map: ExistingRawSourceMap | undefined = result.map
          ? JSON.parse(result.map.toString())
          : undefined

        if (map) {
          // Note: the real `Sourcemap#sources` maybe `null`, but rollup typing is not handle it.
          map.sources = map.sources!.map((url) =>
            url!.startsWith('file://')
              ? normalizePath(fileURLToPath(url!))
              : url,
          )
        }

        return {
          code: result.css.toString(),
          map,
          additionalMap,
          deps,
        }
      } catch (e) {
        // normalize SASS error
        e.message = `[sass] ${e.message}`
        e.id = e.file
        e.frame = e.formatted
        // modern api lacks `line` and `column` property. extract from `e.span`.
        // NOTE: the values are 0-based so +1 is required.
        if (e.span?.start) {
          e.line = e.span.start.line + 1
          e.column = e.span.start.column + 1
          // it also lacks `e.formatted`, so we shim with the message here since
          // sass error messages have the frame already in them and we don't want
          // to re-generate a new frame (same as legacy api)
          e.frame = e.message
        }
        return { code: '', error: e, deps: [] }
      }
    },