@modular-css/vite 29.1.2 → 29.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 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/package.json

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

package/tests/specimens/a.mcss

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

package/tests/specimens/b.mcss

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

package/tests/specimens/c.mcss

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

package/tests/specimens/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/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, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+})
+
+test("a is right", async ({ page }) => {
+    const el = await page.getByText("A");
+
+    await expect(el).toBeVisible();
+
+    await expect(el).toHaveCSS("background-color", "rgb(0, 0, 255)");
+    await expect(el).toHaveCSS("color", "rgb(255, 0, 0)");
+    await expect(el).toHaveClass("mc_c mc_a");
+});
+
+test("b is right", async ({ page }) => {
+    const el = await page.getByText("B");
+
+    await expect(el).toBeVisible();
+
+    await expect(el).toHaveCSS("background-color", "rgb(0, 0, 255)");
+    await expect(el).toHaveCSS("color", "rgb(255, 255, 255)");
+    await expect(el).toHaveClass("mc_c mc_b");
+});