1. css-modules-loader-core
A loader-agnostic CSS Modules implementation, based on PostCSS
css-modules-loader-core
Package: css-modules-loader-core
Created by: css-modules
Last modified: Tue, 14 Jun 2022 04:43:56 GMT
Version: 1.1.0
License: ISC
Downloads: 1,217,523
Repository: https://github.com/css-modules/css-modules-loader-core

Install

npm install css-modules-loader-core
yarn add css-modules-loader-core

CSS Module Loader Core

A loader-agnostic CSS Modules implementation, based on PostCSS

Build Status

API

 import Core from 'css-modules-loader-core'
let core = new Core()

core.load( sourceString , sourcePath , pathFetcher ) =>
  Promise({ injectableSource, exportTokens })

Processes the input CSS sourceString, looking for dependencies such as @import or :import. Any localisation will happen by prefixing a sanitised version of sourcePath When dependencies are found, it will ask the pathFetcher for each dependency, resolve & inline any imports, and return the following object:

  • injectableSource: the final, merged CSS file without @import or :import statements
  • exportTokens: the mapping from local name to scoped name, as described in the file's :export block

These should map nicely to what your build-tool-specific loader needs to do its job.

new Core([plugins])

The default set of plugins is [postcss-modules-local-by-default, postcss-modules-extract-imports, postcss-modules-scope] (i.e. the CSS Modules specification). This can override which PostCSS plugins you wish to execute, e.g.

 import Core from 'css-loader-core'
import autoprefixer from 'autoprefixer'
import colorFunctions from 'postcss-color-function'

// Don't run local-by-default, but use colorFunctions 
// beforehand and autoprefixer afterwards:
let core = new Core([
  colorFunctions, 
  core.plugins.extractImports, 
  core.plugins.scope, 
  autoprefixer("Last 2 Versions")
])

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin