Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'postcss-modules' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
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: '',