@modular-css/vite 29.1.2 → 30.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 30.0.0
+
+### Major Changes
+
+- [`7488bb1`](https://github.com/tivac/modular-css/commit/7488bb12add1175e8c5a1be59ca97ea8207a9d98) Thanks [@tivac](https://github.com/tivac)! - All the various interfaces to `@modular-css/processor` need to be updated because of the breaking changes to composition rules in #926
+
+### Patch Changes
+
+- Updated dependencies [[`7488bb1`](https://github.com/tivac/modular-css/commit/7488bb12add1175e8c5a1be59ca97ea8207a9d98), [`a61fa35`](https://github.com/tivac/modular-css/commit/a61fa35f81e0c5c181c425e596c27f017acd5096)]:
+  - @modular-css/css-to-js@29.0.0
+  - @modular-css/processor@29.0.0
+
+## 29.1.3
+
+### Patch Changes
+
+- [#919](https://github.com/tivac/modular-css/pull/919) [`989d1f0`](https://github.com/tivac/modular-css/commit/989d1f06caf0505d7cc7bfee52f29afd5a0a7760) Thanks [@tivac](https://github.com/tivac)! - Vite 4 support
+
 ## 29.1.2
 
 ### Patch Changes

package/README.md

@@ -49,4 +49,4 @@ You can set variable declaration kind, eg `var mc_rule = ...;`, by setting `vari
 
 ### Shared Options
 
-All other options are passed to the underlying `Processor` instance, see the [Processor Options](#processor-options).
+All other options are passed to the underlying `Processor` instance, see the [Processor Options](https://m-css.com/api/#direct-usage-js-api-processor-options).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modular-css/vite",
-  "version": "29.1.2",
+  "version": "30.0.0",
   "description": "vite support for modular-css",
   "main": "./vite.js",
   "repository": {
@@ -26,11 +26,11 @@
     "postcss"
   ],
   "dependencies": {
-    "@modular-css/css-to-js": "^28.4.1",
-    "@modular-css/processor": "^28.1.5",
-    "@rollup/pluginutils": "^4.1.2"
+    "@modular-css/css-to-js": "^29.0.0",
+    "@modular-css/processor": "^29.0.0",
+    "@rollup/pluginutils": "^5.0.2"
   },
   "peerDependencies": {
-    "vite": "^3.0.3"
+    "vite": "^3 || ^4"
   }
 }

package/tests/specimens/dynamic/a.mcss

@@ -0,0 +1,5 @@
+.a {
+    composes: c from "../shared/dynamic-c.mcss";
+
+    color: red;
+}

package/tests/specimens/dynamic/b.mcss

@@ -0,0 +1,5 @@
+.b {
+    composes: c from "../shared/dynamic-c.mcss";
+
+    color: white;
+}

package/tests/specimens/dynamic/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+
+<body>
+    <div id="a">A</div>
+
+    <div id="b">B</div>
+
+    <script type="module" src="./script.js"></script>
+</body>

package/tests/specimens/dynamic/script.js

@@ -0,0 +1,13 @@
+const aEl = document.querySelector("#a");
+const bEl = document.querySelector("#b");
+
+(async function() {
+    const a = await import("./a.mcss");
+    const b = await import("./b.mcss");
+    
+    console.log({ a, b });
+
+    aEl.className = a.a;
+    bEl.className = b.b;
+}());
+

package/tests/specimens/shared/dynamic-c.mcss

@@ -0,0 +1,6 @@
+.c {
+    background-color: blue;
+
+    width: 100px;
+    height: 100px;
+}

package/tests/specimens/shared/static-c.mcss

@@ -0,0 +1,6 @@
+.c {
+    background-color: blue;
+
+    width: 100px;
+    height: 100px;
+}

package/tests/specimens/static/a.mcss

@@ -0,0 +1,5 @@
+.a {
+    composes: c from "../shared/static-c.mcss";
+
+    color: red;
+}

package/tests/specimens/static/b.mcss

@@ -0,0 +1,5 @@
+.b {
+    composes: c from "../shared/static-c.mcss";
+
+    color: white;
+}

package/tests/specimens/static/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+
+<body>
+    <div id="a">A</div>
+
+    <div id="b">B</div>
+
+    <script type="module" src="./script.js"></script>
+</body>

package/tests/specimens/static/script.js

@@ -0,0 +1,10 @@
+import a from "./a.mcss";
+import b from "./b.mcss";
+
+console.log({ a, b });
+
+const aEl = document.querySelector("#a");
+const bEl = document.querySelector("#b");
+
+aEl.className = a.a;
+bEl.className = b.b;

package/tests/vite.spec.mjs

@@ -0,0 +1,25 @@
+import { test as testBase, expect } from "@playwright/test";
+
+const test = testBase.extend({
+    dir  : [ "static", { option : true }],
+});
+
+test("style ordering", async ({ page, dir }) => {
+    await page.goto(`/${dir}/`);
+    
+    const a = await page.getByText("A");
+
+    await expect(a).toBeVisible();
+
+    await expect(a).toHaveCSS("background-color", "rgb(0, 0, 255)");
+    await expect(a).toHaveCSS("color", "rgb(255, 0, 0)");
+    await expect(a).toHaveClass("mc_c mc_a");
+    
+    const b = await page.getByText("B");
+    
+    await expect(b).toBeVisible();
+    
+    await expect(b).toHaveCSS("background-color", "rgb(0, 0, 255)");
+    await expect(b).toHaveCSS("color", "rgb(255, 255, 255)");
+    await expect(b).toHaveClass("mc_c mc_b");
+});