vue Architecture Docs
Home / Function/ doCompileStyle() — vue Function Reference

doCompileStyle() — vue Function Reference

Architecture documentation for the doCompileStyle() function in compileStyle.ts from the vue codebase.

Function typescript SfcCompiler ScriptCompiler calls 4 called by 2

Entity Profile

Dependency Diagram

graph TD
  eb225a87_b3c1_d8e5_4365_2b3c8f37effc["doCompileStyle()"]
  1aad1b66_4ff0_fcc3_9eab_fd33ebad4a4c["compileStyle.ts"]
  eb225a87_b3c1_d8e5_4365_2b3c8f37effc -->|defined in| 1aad1b66_4ff0_fcc3_9eab_fd33ebad4a4c
  67f843de_b809_a79f_38cf_cf69959495f7["compileStyle()"]
  67f843de_b809_a79f_38cf_cf69959495f7 -->|calls| eb225a87_b3c1_d8e5_4365_2b3c8f37effc
  c437bb0e_7fd9_ef19_c27f_54f6001eb51d["compileStyleAsync()"]
  c437bb0e_7fd9_ef19_c27f_54f6001eb51d -->|calls| eb225a87_b3c1_d8e5_4365_2b3c8f37effc
  85b0ddf9_93d8_1f80_0dd8_439427b0d1ff["preprocess()"]
  eb225a87_b3c1_d8e5_4365_2b3c8f37effc -->|calls| 85b0ddf9_93d8_1f80_0dd8_439427b0d1ff
  96711959_2cc0_7721_49fa_91560867d8c7["cssVarsPlugin()"]
  eb225a87_b3c1_d8e5_4365_2b3c8f37effc -->|calls| 96711959_2cc0_7721_49fa_91560867d8c7
  1b5c1ba8_1851_1f8d_73f6_525738014182["trimPlugin()"]
  eb225a87_b3c1_d8e5_4365_2b3c8f37effc -->|calls| 1b5c1ba8_1851_1f8d_73f6_525738014182
  d86bae84_10d8_7bbb_4a04_234c48dfb075["scopedPlugin()"]
  eb225a87_b3c1_d8e5_4365_2b3c8f37effc -->|calls| d86bae84_10d8_7bbb_4a04_234c48dfb075
  style eb225a87_b3c1_d8e5_4365_2b3c8f37effc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/compiler-sfc/src/compileStyle.ts lines 49–131

export function doCompileStyle(
  options: SFCAsyncStyleCompileOptions
): SFCStyleCompileResults {
  const {
    filename,
    id,
    scoped = true,
    trim = true,
    isProd = false,
    preprocessLang,
    postcssOptions,
    postcssPlugins
  } = options
  const preprocessor = preprocessLang && processors[preprocessLang]
  const preProcessedSource = preprocessor && preprocess(options, preprocessor)
  const map = preProcessedSource ? preProcessedSource.map : options.map
  const source = preProcessedSource ? preProcessedSource.code : options.source

  const plugins = (postcssPlugins || []).slice()
  plugins.unshift(cssVarsPlugin({ id: id.replace(/^data-v-/, ''), isProd }))
  if (trim) {
    plugins.push(trimPlugin())
  }
  if (scoped) {
    plugins.push(scopedPlugin(id))
  }

  const postCSSOptions: ProcessOptions = {
    ...postcssOptions,
    to: filename,
    from: filename
  }
  if (map) {
    postCSSOptions.map = {
      inline: false,
      annotation: false,
      prev: map
    }
  }

  let result, code, outMap
  const errors: any[] = []
  if (preProcessedSource && preProcessedSource.errors.length) {
    errors.push(...preProcessedSource.errors)
  }
  try {
    result = postcss(plugins).process(source, postCSSOptions)

    // In async mode, return a promise.
    if (options.isAsync) {
      return result
        .then(
          (result: LazyResult): SFCStyleCompileResults => ({
            code: result.css || '',
            map: result.map && result.map.toJSON(),
            errors,
            rawResult: result
          })
        )
        .catch(
          (error: Error): SFCStyleCompileResults => ({
            code: '',
            map: undefined,
            errors: [...errors, error.message],
            rawResult: undefined
          })
        )
    }

    // force synchronous transform (we know we only have sync plugins)
    code = result.css
    outMap = result.map
  } catch (e) {
    errors.push(e)
  }

  return {
    code: code || ``,
    map: outMap && outMap.toJSON(),
    errors,
    rawResult: result

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does doCompileStyle() do?
doCompileStyle() is a function in the vue codebase, defined in packages/compiler-sfc/src/compileStyle.ts.
Where is doCompileStyle() defined?
doCompileStyle() is defined in packages/compiler-sfc/src/compileStyle.ts at line 49.
What does doCompileStyle() call?
doCompileStyle() calls 4 function(s): cssVarsPlugin, preprocess, scopedPlugin, trimPlugin.
What calls doCompileStyle()?
doCompileStyle() is called by 2 function(s): compileStyle, compileStyleAsync.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free