@modular-css/vite 27.1.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [27.1.0](https://github.com/tivac/modular-css/compare/v27.0.3...v27.1.0) (2022-02-03)
+
+
+### Features
+
+* **vite:** vite plugin ([46c80da](https://github.com/tivac/modular-css/commit/46c80dab3c552b5ddf2c43683984d6c9112ecd39))
+* **www:** m-css.com on sveltekit ([d434f92](https://github.com/tivac/modular-css/commit/d434f927a4201df8d66cd7ed5ea2be63daa42b7a))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Pat Cavit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+# @modular-css/vite  [![NPM Version](https://img.shields.io/npm/v/@modular-css/vite.svg)](https://www.npmjs.com/package/@modular-css/vite) [![NPM License](https://img.shields.io/npm/l/@modular-css/vite.svg)](https://www.npmjs.com/package/@modular-css/vite) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/vite.svg)](https://www.npmjs.com/package/@modular-css/vite)
+
+Vite support for [`modular-css`](https://github.com/tivac/modular-css).
+
+- [Install](#install)
+- [Usage](#usage)
+- [Options](#options)
+
+## Install
+
+```shell
+> npm i @modular-css/vite
+```
+
+## Usage
+
+```javascript
+// vite.config.js
+import mcss from "@modular-css/vite";
+
+export default {
+    plugins : [
+        mcss()
+    ]
+};
+```
+
+## Options
+
+### `include`/`exclude`
+
+A minimatch pattern, or an array of minimatch patterns, relative to `process.cwd()`. `include` defaults to `**/*.css`.
+
+### `processor`
+
+Pass an already-instantiated `Processor` instance to the rollup plugin. It will then add any files found when traversing the modules to it and both the rollup-discovered and any already-existing files will be output in the final CSS.
+
+### Shared Options
+
+All other options are passed to the underlying `Processor` instance, see the [Processor Options](#processor-options).

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@modular-css/vite",
+  "version": "27.1.0",
+  "description": "vite support for modular-css",
+  "main": "./vite.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tivac/modular-css.git",
+    "directory": "packages/vite"
+  },
+  "bugs": {
+    "url": "https://github.com/tivac/modular-css/issues"
+  },
+  "author": "Pat Cavit <npm@patcavit.com>",
+  "homepage": "https://m-css.com",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "css",
+    "css-modules",
+    "modular-css",
+    "postcss"
+  ],
+  "dependencies": {
+    "@modular-css/css-to-js": "^27.1.0",
+    "@modular-css/processor": "^27.1.0",
+    "@rollup/pluginutils": "^4.1.2"
+  },
+  "peerDependencies": {
+    "vite": "^2.7.3"
+  },
+  "gitHead": "e302570bde992b563a69bad58245c68adda65504"
+}

package/vite.js

@@ -0,0 +1,222 @@
+"use strict";
+
+const path = require("path");
+
+const utils = require("@rollup/pluginutils");
+const dedent = require("dedent");
+
+const Processor = require("@modular-css/processor");
+const { transform } = require("@modular-css/css-to-js");
+
+const { fileKey, filterByPrefix, FILE_PREFIX } = Processor;
+
+// sourcemaps for css-to-js don't make much sense, so always return nothing
+// https://github.com/rollup/rollup/wiki/Plugins#conventions
+const emptyMappings = {
+    mappings : "",
+};
+
+const DEFAULTS = {
+    verbose : false,
+
+    // Regexp to work around https://github.com/rollup/rollup-pluginutils/issues/39
+    include : /\.mcss$/i,
+};
+
+const CSS_QUERY = "mcss&type=style&lang.css";
+
+const normalize = (file) => file.replace(/\/|\\/g, path.sep);
+const slash = (file) => file.replace(/\\/g, "/");
+const virtualize = (file) => `${file}?${CSS_QUERY}`;
+const devirtualize = (file) => `${file.split("?")[0]}`;
+const isVirtual = (file) => file.endsWith(`?${CSS_QUERY}`);
+
+// NOTE: Can't use basic isAbsolute check because of paths vite passes in. On windows they can be
+// "/foo/bar/baz.mcss" which isAbsolute will treat as absolute, even though it definitely isn't
+const isPartial = (file) => (process.platform !== "win32" ? !path.isAbsolute(file) : path.parse(file).root === "/");
+
+module.exports = (
+    /* istanbul ignore next: too painful to test */
+    pluginOptions = {}
+) => {
+    const options = {
+        __proto__ : null,
+        ...DEFAULTS,
+        ...pluginOptions,
+    };
+
+    const {
+        processor = new Processor(options),
+    } = options;
+
+    const filter = utils.createFilter(options.include, options.exclude);
+
+    const { graph } = processor;
+
+    // eslint-disable-next-line no-console, no-empty-function
+    const log = options.verbose ? console.log.bind(console, "[@mcss/vite]") : () => { };
+
+    // istanbul ignore if: too hard to test this w/ defaults
+    if(typeof options.map === "undefined") {
+        // Sourcemaps default to true otherwise
+        options.map = true;
+    }
+
+    let viteServer;
+
+    return {
+        name    : "@modular-css/vite",
+        enforce : "pre",
+
+        configureServer(instance) {
+            viteServer = instance;
+
+            viteServer.watcher.on("change", (file) => {
+                log("change", file);
+                
+                if(!processor.has(file)) {
+                    return;
+                }
+
+                processor.invalidate(file);
+            });
+        },
+
+        buildStart() {
+            log("build start");
+
+            // Watch any files already in the procesor
+            Object.keys(processor.files).forEach((file) => this.addWatchFile(file));
+        },
+
+        resolveId(source) {
+            if(!isVirtual(source)) {
+                return null;
+            }
+
+            let resolved = source;
+
+            if(isPartial(resolved)) {
+                resolved = path.join(process.cwd(), resolved);
+            }
+
+            resolved = slash(resolved);
+
+            log("resolved", source, "to", resolved);
+
+            return resolved;
+        },
+
+        // Load the virtual CSS files
+        async load(id, opts = false) {
+            log("load", id);
+
+            // Only want this to run for the virtual CSS modules
+            if(!isVirtual(id)) {
+                return null;
+            }
+
+            log("loading", id);
+
+            let file = devirtualize(id);
+
+            if(isPartial(file)) {
+                file = path.join(process.cwd(), file);
+            }
+
+            if(!processor.has(file)) {
+                log("no loading", file);
+
+                return null;
+            }
+
+            if(viteServer) {
+                const node = await viteServer.moduleGraph.ensureEntryFromUrl(id);
+                const deps = graph.directDependenciesOf(fileKey(normalize(file)));
+                const imported = filterByPrefix(FILE_PREFIX, deps).map((dep) => virtualize(slash(dep)));
+
+                await Promise.all(imported.map((dep) => viteServer.moduleGraph.ensureEntryFromUrl(dep)));
+
+                log("load deps", id, "=>", imported);
+
+                const hmrDeps = imported;
+
+                await viteServer.moduleGraph.updateModuleInfo(
+                    node,
+                    new Set(imported),
+                    new Set(hmrDeps),
+                    true,
+                    Boolean(opts.ssr),
+                );
+            }
+
+            const result = await processor.output({
+                files : [ file ],
+            });
+
+            log("loaded", id, "\n", result.css);
+
+            return result.css;
+        },
+
+        // Convert .mcss files to .js files
+        async transform(code, id) {
+            log("transform", id);
+
+            if(!filter(id)) {
+                return null;
+            }
+
+            const file = normalize(id);
+
+            log("transforming", file);
+
+            try {
+                await processor.string(file, code);
+            } catch(e) {
+                // Replace the default message with the much more verbose one
+                e.message = e.toString();
+
+                return this.error(e);
+            }
+
+            const { code : css, namedExports, warnings } = transform(file, processor, pluginOptions);
+
+            warnings.forEach((warning) => {
+                this.warn(warning);
+            });
+
+            const deps = processor.fileDependencies(file);
+
+            deps.forEach((dep) => this.addWatchFile(slash(dep)));
+
+            // TODO: Gets CSS order right by forcing them to load their dependent CSS first.
+            // Feels very brittle and overkill, but this is what we've got for now
+            const result = dedent(`
+                ${deps.map((dep) => `import "${virtualize(slash(dep))}";`).join("\n")}
+                import "${virtualize(id)}";
+
+                ${css}
+            `);
+
+            // TODO: Doesn't get CSS order right, but the previous one makes for a weird-looking graph
+            // const result = dedent(`
+            //     import "${virtualize(id)}";
+
+            //     ${css}
+            // `);
+
+            log("transformed", id, "\n", result);
+
+            // Return JS representation to vite
+            return {
+                code : result,
+                map  : emptyMappings,
+
+                // Disable tree-shaking for CSS modules w/o any classes/values to export
+                // to make sure they're included in the bundle
+                moduleSideEffects : namedExports.length || "no-treeshake",
+            };
+        },
+    };
+};