@modular-css/processor
Advanced tools
The core functionality of modular-css exposed as a JS API.
$ npm i @modular-css/processor
Instantiate a new Processor instance, call it's .file(<path>) or .string(<name>, <contents>) methods, and then use the returned Promise to get access to the results/output.
const Processor = require("@modular-css/processor");
const processor = new Processor({
// See "API Options" for valid options to pass to the Processor constructor
});
// Add entries, either from disk using .file() or as strings with .string()
const result = await processor.file("./entry.css");
// result contains
// .exports - Scoped selector mappings
// .files - metadata about the file hierarchy
await processor.string("./fake-file.css", ".class { color: red; }");
// Once all files are added, use .output() to get at the rewritten CSS
const results = await processor.output();
// Output CSS lives on the .css property
results.css;
// Source map (if requested) lives on the .map property
results.map;
.string(file, css)Returns a promise. Add file to the Processor instance with css contents.
.file(file)Returns a promise. Add file to the Processor instance, reads contents from disk using fs.
.output({ args })Returns a promise. Finalize processing of all added CSS and create combined CSS output file.
Passing files as part of args will result in getting back combined output CSS just for the listed files and their dependencies.
Passing to as part of args will be passed along to teh after and done hooks for proper path adjustment in maps & any plugins that use it.
WARNING: Calling .output() before any preceeding .file(...)/.string(...) calls have resolved their returned promises will return a rejected promise. See usage for an example of correct usage.
.remove([files])Remove files from the Processor instance. Accepts a single file or array of files.
.dependencies([file])Returns an array of file paths. Accepts a single file argument to get the dependencies for, will return entire dependency graph in order if argument is omitted.
beforeSpecify an array of PostCSS plugins to be run against each file before it is processed.
new Processor({
before : [ require("postcss-import") ]
});
afterSpecify an array of PostCSS plugins to be run after files are processed, but before they are combined. Plugin will be passed a to and from option.
By default postcss-url is used in after mode.
new Processor({
after : [ require("postcss-someplugin") ]
});
doneSpecify an array of PostCSS plugins to be run against the complete combined CSS.
new Processor({
done : [ require("cssnano")()]
});
mapEnable source map generation. Can also be passed to .output().
Default: false
new Processor({
map : true
});
cwdSpecify the current working directory for this Processor instance, used when resolving composes/@value rules that reference other files.
Default: process.cwd()
new Processor({
cwd : path.join(process.cwd(), "/sub/dir")
})
namerSpecify a function (that takes filename & selector as arguments to produce scoped selectors.
Default: Function that returns "mc" + unique-slug(<file>) + "_" + selector
new Processor({
namer : function(file, selector) {
return file.replace(/[:\/\\ .]/g, "") + "_" + selector;
}
});
resolversIf you want to provide your own file resolution logic you can pass an array of resolver functions. Each resolver function receives three arguments:
src, the file that included filefile, the file path being included by src`resolve, the default resolver functionResolver functions should either return an absolute path or a falsey value. They must also be synchronous.
Default: See /src/lib/resolve.js for the default implementation.
new Processor({
resolvers : [
(src, file, resolve) => ...,
require("@modular-css/path-resolver")(
"./some/other/path"
)
]
})
exportGlobalsEnable exporting :global identifiers.
Default: true
new Processor({
exportDefaults: false
})
/* exportGlobals: true */
.a {}
:global(.b) {}
/* Outputs
{
"a" : "mc12345_a",
"b" : "b"
}
*/
/* exportGlobals: false */
.a {}
:global(.b) {}
/* Outputs
{
"a" : "mc12345_a"
}
*/
.filesReturns an object keyed by absolute file paths of all known files in the Processor instance.
.optionsReturns the options object passed to the Processor augmented with the defaults.
FAQs
A streamlined reinterpretation of CSS Modules
The npm package @modular-css/processor receives a total of 1,969 weekly downloads. As such, @modular-css/processor popularity was classified as popular.
We found that @modular-css/processor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.