@quasar/app-webpack/lib/utils/inject-style-rules.js

Quasar Framework App CLI with Webpack

const ExtractLoader = require('mini-css-extract-plugin').loader
const { merge } = require('webpack-merge')
const path = require('node:path')
const { pathToFileURL } = require('node:url')

const quasarCssPaths = [
  path.join('node_modules', 'quasar', 'dist'),
  path.join('node_modules', 'quasar', 'src'),
  path.join('node_modules', '@quasar')
]

const absoluteUrlRE = /^[a-z][a-z0-9+.-]*:/i
const protocolRelativeRE = /^\/\//
const templateUrlRE = /^[{}[\]#*;,'§$%&(=?`´^°<>]/
const rootRelativeUrlRE = /^\//

/**
 * Inspired by loader-utils > isUrlRequest()
 * Mimics Webpack v4 & css-loader v3 behavior
 */
function shouldRequireUrl (url) {
  return (
    // an absolute url and it is not `windows` path like `C:\dir\file`:
    (absoluteUrlRE.test(url) === true && path.win32.isAbsolute(url) === false)
    // a protocol-relative:
    || protocolRelativeRE.test(url) === true
    // some kind of url for a template:
    || templateUrlRE.test(url) === true
    // not a request if root isn't set and it's a root-relative url
    || rootRelativeUrlRE.test(url) === true
  ) === false
}

async function createRule ({ rule, isModules, pref, loader, loaderOptions }) {
  if (pref.isServerBuild === true) {
    rule.use('null-loader')
      .loader('null-loader')

    return
  }

  if (pref.extract) {
    rule.use('mini-css-extract')
      .loader(ExtractLoader)
      .options({ publicPath: '../' })
  }
  else {
    rule.use('vue-style-loader')
      .loader('vue-style-loader')
      .options({
        sourceMap: pref.sourceMap
      })
  }

  const cssLoaderOptions = {
    sourceMap: pref.sourceMap,
    url: { filter: shouldRequireUrl },
    importLoaders:
      1 // stylePostLoader injected by vue-loader
      + 1 // postCSS loader
      + (!pref.extract && pref.minify ? 1 : 0) // postCSS with cssnano
      + (loader ? (loader === 'sass-loader' ? 2 : 1) : 0)
  }

  if (isModules) {
    Object.assign(cssLoaderOptions, {
      modules: {
        localIdentName: '[name]_[local]_[hash:base64:5]'
      }
    })
  }

  rule.use('css-loader')
    .loader('css-loader')
    .options(cssLoaderOptions)

  if (!pref.extract && pref.minify) {
    // needs to be applied separately,
    // otherwise it messes up RTL
    rule.use('cssnano')
      .loader('postcss-loader')
      .options({
        sourceMap: pref.sourceMap,
        postcssOptions: {
          plugins: [
            require('cssnano')({
              preset: [ 'default', {
                mergeLonghand: false,
                convertValues: false,
                cssDeclarationSorter: false,
                reduceTransforms: false
              } ]
            })
          ]
        }
      })
  }

  // need a fresh copy, otherwise plugins
  // will keep on adding making N duplicates for each one
  const { default: postCssConfig } = await import(
    pathToFileURL(pref.appPaths.postcssConfigFilename)
    + '?t='
    + Date.now()
  )

  let postCssOpts = { sourceMap: pref.sourceMap, ...postCssConfig }

  if (pref.rtl) {
    const postcssRTL = require('postcss-rtlcss')
    const postcssRTLOptions = pref.rtl === true ? {} : pref.rtl

    if (
      typeof postCssConfig.plugins !== 'function'
      && (postcssRTLOptions.source === 'ltr' || typeof postcssRTLOptions === 'function')
    ) {
      const originalPlugins = postCssOpts.plugins ? [ ...postCssOpts.plugins ] : []

      postCssOpts = ctx => {
        const plugins = [ ...originalPlugins ]
        const isClientCSS = quasarCssPaths.every(item => ctx.resourcePath.indexOf(item) === -1)

        plugins.push(postcssRTL(
          typeof postcssRTLOptions === 'function'
            ? postcssRTLOptions(isClientCSS, ctx.resourcePath)
            : {
                ...postcssRTLOptions,
                source: isClientCSS ? 'rtl' : 'ltr'
              }
        ))

        return { sourceMap: pref.sourceMap, plugins }
      }
    }
    else {
      postCssOpts.plugins.push(postcssRTL(postcssRTLOptions))
    }
  }

  rule.use('postcss-loader')
    .loader('postcss-loader')
    .options({ postcssOptions: postCssOpts })

  if (loader) {
    rule.use(loader)
      .loader(loader)
      .options({
        sourceMap: pref.sourceMap,
        ...loaderOptions
      })

    if (loader === 'sass-loader') {
      if (loaderOptions?.sassOptions?.syntax === 'indented') {
        rule.use('quasar-sass-variables-loader')
          .loader(pref.cssVariables.loader)
          .options(pref.cssVariables.sass)
      }
      else {
        rule.use('quasar-scss-variables-loader')
          .loader(pref.cssVariables.loader)
          .options(pref.cssVariables.scss)
      }
    }
  }
}

function injectRule (chain, pref, lang, test, loader, loaderOptions) {
  const baseRule = chain.module.rule(lang).test(test)

  // rules for <style lang="module">
  const modulesRule = baseRule.oneOf('modules-query').resourceQuery(/module/)

  // rules for *.module.* files
  const modulesExtRule = baseRule.oneOf('modules-ext').test(/\.module\.\w+$/)

  // rules for normal styles
  const normalRule = baseRule.oneOf('normal')

  return Promise.all([
    createRule({ rule: modulesRule, isModules: true, pref, loader, loaderOptions }),
    createRule({ rule: modulesExtRule, isModules: true, pref, loader, loaderOptions }),
    createRule({ rule: normalRule, isModules: false, pref, loader, loaderOptions })
  ])
}

module.exports.injectStyleRules = async function injectStyleRules (chain, pref) {
  await injectRule(chain, pref, 'css', /\.css$/)
  await injectRule(chain, pref, 'stylus', /\.styl(us)?$/, 'stylus-loader', pref.stylusLoaderOptions)
  await injectRule(chain, pref, 'scss', /\.scss$/, 'sass-loader', merge(
    {
      sassOptions: {
        style: /* required for RTL */ 'expanded',
        silenceDeprecations: [ 'import', 'global-builtin' ]
      },
      api: 'modern-compiler'
    },
    pref.scssLoaderOptions
  ))
  await injectRule(chain, pref, 'sass', /\.sass$/, 'sass-loader', merge(
    {
      sassOptions: {
        style: /* required for RTL */ 'expanded',
        syntax: 'indented',
        silenceDeprecations: [ 'import', 'global-builtin' ]
      },
      api: 'modern-compiler'
    },
    pref.sassLoaderOptions
  ))
  await injectRule(chain, pref, 'less', /\.less$/, 'less-loader', pref.lessLoaderOptions)
}