How to use postcss-modules - 5 common examples

js += result.js
              }
            } catch (e) {
              throwCompileError({
                inputFile: this.inputFile,
                tag: 'style',
                charIndex: sfcBlock.start,
                action: 'compiling css modules',
                error: e,
                showError: true,
                showStack: true,
              })
            }
          } else {
            const moduleName = typeof sfcBlock.attrs.module === 'string' ? sfcBlock.attrs.module : defaultModuleName
            plugins.push(postcssModules({
              getJSON (cssFilename, json) {
                if (cssModules === undefined) { cssModules = {} }
                cssModules[moduleName] = { ...(cssModules[moduleName] || {}), ...json }
              },

              // Generate a class name in the form of .___
              // Ref.: https://github.com/css-modules/postcss-modules#generating-scoped-names
              generateScopedName: '[name]_[local]__[hash:base64:5]'
            }))
            isAsync = true
          }
        }

        // Autoprefixer
        if (sfcBlock.attrs.autoprefix !== 'off') {
          plugins.push(autoprefixer())

async callback({ file, resolve, addChunk, context }) {
      const extName = path.extname(file.filePath)
      if (!extensions.includes(extName)) {
        return null
      }

      let moduleMap = null
      const plugins = []
      const fileIsModule = file.meta.specified || file.filePath.endsWith(`.module${extName}`)

      if (fileIsModule) {
        plugins.push(
          postcssModules({
            scopeBehaviour: 'local',
            getJSON(_, map) {
              moduleMap = map
            },
          }),
        )
      }
      plugins.push(
        pluginImportResolver({
          resolve,
          context,
          addChunk,
        }),
      )

      const inlineCss = context.config.target === 'browser' && development && file.format === 'js'

import path from 'path'
import tools from 'browserify-transform-tools'
import postcss from 'postcss'
import postcssImport from 'postcss-import'
import postcssModules from 'postcss-modules'
import resolve from 'resolve'
import minimatch from 'minimatch'
import MemoryFS from 'memory-fs'
import Clean from 'clean-css'
import { CONFIG } from '../utils/config'
import { addToDepTree } from '../utils/deptree'

const fs = new MemoryFS()

const cssModulesPlugin = postcssModules({
  getJSON (cssFilename, json) {
    fs.mkdirpSync(path.dirname(cssFilename))
    fs.writeFileSync(cssFilename, json)
  }
})

export default tools.makeStringTransform('postcss', {
  includeExtensions: CONFIG.postcss.extensions
}, async (content, opts, done) => {
  try {
    const options = { from: opts.file }

    const plugins = [
      postcssImport({
        path: [
          CONFIG.sourceDir,

function compileModule (code, map, source, options) {
    let style
    debug(`CSS Modules: ${source.id}`)

    return postcss([
        modules({
            getJSON (filename, json) {
                style = json
            },
            ...options.cssModules
        })
    ]).process(code, { map: { inline: false, prev: map }, from: source.id, to: source.id })
        .then(
            result => ({ code: result.css, map: result.map.toString(), module: style }),
            error => {
                throw error
            }
        )
}

async function transpileCSSModule({ css, originalSource, pathname }) {
      if (css === null) {
        return {
          transformedSource: `module.exports = {}`,
          originalSource,
          map: null,
          pathname,
          dependencies: [],
          prettyCode: '',
          css: '',
        }
      }

      let jsonString = '{}'
      let plugins = [
        postcssModules({
          getJSON: function(cssFileName: any, json: any, outputFileName: any) {
            jsonString = JSON.stringify(json)
          },
        }),
      ]

      try {
        let result = await postcss(plugins).process(css)

        return {
          transformedSource: `module.exports = ` + jsonString,
          originalSource,
          map: result.map,
          pathname,
          dependencies: [],
          prettyCode: '',