How to use @modular-css/processor - 9 common examples

import fs from "fs";
import path from "path";

import { Store } from "svelte/store";
import Processor from "@modular-css/processor";
import lz from "lznext";

import listen from "./listen.js";
import { prompt } from "./data/prompt.js";

const processor = new Processor({
    cwd : "/",

    // Custom file resolver to work around gaps in fake node environment
    resolvers : [
        (src, file) => path.resolve(`/${file}`),
    ],
});

// iterators are so much fun
const first = (set) => set.values().next().value;


class CssStore extends Store {
    constructor(...args) {
        super(...args);

import path from "path";

import Processor from "@modular-css/processor";

const processor = new Processor({
    cwd : "/",

    // Custom file resolver to work around gaps in fake node environment
    resolvers : [
        (src, file) => path.resolve(`/${file}`),
    ],
});

export default processor;

log("transform", id);

            let processed;

            try {
                processed = await processor.string(id, code);
            } catch(e) {
                // Replace the default message with the much more verbose one
                e.message = e.toString();

                return this.error(e);
            }

            const { details, exports } = processed;

            const exported = output.join(exports);
            const relative = path.relative(processor.options.cwd, id);
            const dependencies = processor.dependencies(id);

            const out = [
                dev ?
                    dedent(`
                        const data = ${JSON.stringify(exported)};

                        export default new Proxy(data, {
                            get(tgt, key) {
                                if(key in tgt) {
                                    return tgt[key];
                                }

                                throw new ReferenceError(
                                    key + " is not exported by " + ${JSON.stringify(slash(relative))}

this.options.processor :
        // Webpack 4
        this._compiler.options.processor;

    if(options.cjs) {
        this.emitWarning(
            new Error("cjs option is deprecated, used namedExports: false instead")
        );
    }

    this.cacheable();

    try {
        const result = await processor.string(this.resourcePath, source);

        const exported = output.join(result.exports);
        const out = [];

        if(options.defaultExport) {
            out.push(`export default ${JSON.stringify(exported, null, 4)};`);
        }

        processor.dependencies(this.resourcePath).forEach(this.addDependency);

        // Just default object export in this case
        if(!options.namedExports) {
            return done(null, out.join("\n"));
        }

        // Warn if any of the exported CSS wasn't able to be used as a valid JS identifier
        // and exclude from the output
        Object.keys(exported).forEach((ident) => {

bundler.on("end", () => {
            const bundling = Object.keys(bundles).length > 0;

            if(options.json) {
                mkdirp.sync(path.dirname(options.json));

                fs.writeFileSync(
                    options.json,
                    JSON.stringify(output.compositions(processor), null, 4)
                );
            }

            if(!options.css) {
                return;
            }

            const common = processor.dependencies();

            mkdirp.sync(path.dirname(options.css));

            // Write out each bundle's CSS files (if they have any)
            each(
                Object.keys(bundles).map((key) => ({
                    bundle : key,
                    files  : bundles[key],

const prefixed = (cwd, file) => {
    let out = relative(cwd, file);

    if(!prefixRegex.test(out)) {
        out = `./${out}`;
    }

    return out;
};

import fs from "fs";

import Processor from "@modular-css/processor";

var state =  {
    files : [],

    output : {
        css : "",
        js  : false,
    },

    processor : new Processor({
        resolvers : [
            (src, file) => {
                file = file.replace(/^\.\.\/|\.\//, "");

                return `/${file}`;
            },
        ],
    }),
    
    tab : "CSS",
    
    error : false,
};

export function createFile() {
    var file = `/${state.files.length + 1}.css`;

const outputs = ({ exports }) => `module.exports = ${
    JSON.stringify(output.join(exports), null, 4)
};`;

view : () => [
        m("div", { class : css.hd },
            m("h1", { class : css.title },
                m("a", { href : "https://github.com/tivac/modular-css" }, "modular-css"),
                " ",
                m("span", { class : css.subhead }, `v${pkg.version}`)
            ),
            m("a", {
                    class : css.chat,
                    href  : "https://gitter.im/modular-css/modular-css",
                },
                m("img", {
                    src : "https://img.shields.io/gitter/room/modular-css/modular-css.svg",
                    alt : "Gitter",
                })
            )
        ),

        m("div", { class : css.content },
            m("div", { class : css.files },
                m("div", { class : css.actions },
                    m("button", {