Home / File/ stylePreprocessors.ts — vue Source File

stylePreprocessors.ts — vue Source File

Architecture documentation for stylePreprocessors.ts, a typescript file in the vue codebase. 3 imports, 1 dependents.

File typescript SfcCompiler ScriptCompiler 3 imports 1 dependents 6 functions

Entity Profile

Dependency Diagram

graph LR
  ba46daf5_ee23_b1e3_6003_bd7f1eb01c21["stylePreprocessors.ts"]
  200ad2d5_77ac_22dd_cd1d_8cdf95529c81["merge-source-map"]
  ba46daf5_ee23_b1e3_6003_bd7f1eb01c21 --> 200ad2d5_77ac_22dd_cd1d_8cdf95529c81
  537f7054_6a5b_8943_060c_d8a93e82f44c["source-map"]
  ba46daf5_ee23_b1e3_6003_bd7f1eb01c21 --> 537f7054_6a5b_8943_060c_d8a93e82f44c
  09aa5370_2caa_6b33_3f44_6ac5211bd11b["util"]
  ba46daf5_ee23_b1e3_6003_bd7f1eb01c21 --> 09aa5370_2caa_6b33_3f44_6ac5211bd11b
  1aad1b66_4ff0_fcc3_9eab_fd33ebad4a4c["compileStyle.ts"]
  1aad1b66_4ff0_fcc3_9eab_fd33ebad4a4c --> ba46daf5_ee23_b1e3_6003_bd7f1eb01c21
  style ba46daf5_ee23_b1e3_6003_bd7f1eb01c21 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import merge from 'merge-source-map'
import { RawSourceMap } from 'source-map'
import { isFunction } from 'shared/util'

export type StylePreprocessor = (
  source: string,
  map: RawSourceMap | undefined,
  options: {
    [key: string]: any
    additionalData?: string | ((source: string, filename: string) => string)
    filename: string
  }
) => StylePreprocessorResults

export interface StylePreprocessorResults {
  code: string
  map?: object
  errors: Error[]
  dependencies: string[]
}

// .scss/.sass processor
const scss: StylePreprocessor = (source, map, options) => {
  const nodeSass = require('sass')
  const finalOptions = {
    ...options,
    data: getSource(source, options.filename, options.additionalData),
    file: options.filename,
    outFile: options.filename,
    sourceMap: !!map
  }

  try {
    const result = nodeSass.renderSync(finalOptions)
    const dependencies = result.stats.includedFiles
    if (map) {
      return {
        code: result.css.toString(),
        map: merge(map, JSON.parse(result.map.toString())),
        errors: [],
        dependencies
      }
    }

    return { code: result.css.toString(), errors: [], dependencies }
  } catch (e: any) {
    return { code: '', errors: [e], dependencies: [] }
  }
}

const sass: StylePreprocessor = (source, map, options) =>
  scss(source, map, {
    ...options,
    indentedSyntax: true
  })

// .less
const less: StylePreprocessor = (source, map, options) => {
  const nodeLess = require('less')

// ... (76 more lines)

Domain

Subdomains

Dependencies

  • merge-source-map
  • source-map
  • util

Frequently Asked Questions

What does stylePreprocessors.ts do?
stylePreprocessors.ts is a source file in the vue codebase, written in typescript. It belongs to the SfcCompiler domain, ScriptCompiler subdomain.
What functions are defined in stylePreprocessors.ts?
stylePreprocessors.ts defines 6 function(s): StylePreprocessorResults, getSource, less, sass, scss, styl.
What does stylePreprocessors.ts depend on?
stylePreprocessors.ts imports 3 module(s): merge-source-map, source-map, util.
What files import stylePreprocessors.ts?
stylePreprocessors.ts is imported by 1 file(s): compileStyle.ts.
Where is stylePreprocessors.ts in the architecture?
stylePreprocessors.ts is located at packages/compiler-sfc/src/stylePreprocessors.ts (domain: SfcCompiler, subdomain: ScriptCompiler, directory: packages/compiler-sfc/src).

Analyze Your Own Codebase

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

Try Supermodel Free