@modular-css/vite 29.1.3 → 30.0.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 30.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`edbbe96`](https://github.com/tivac/modular-css/commit/edbbe9667fa4333913bb95cd8c7e67f386f57054), [`ffab76d`](https://github.com/tivac/modular-css/commit/ffab76d4428211ba33e6f7a6d518618b5cfdef00)]:
+  - @modular-css/processor@29.0.1
+  - @modular-css/css-to-js@29.0.1
+
+## 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

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.3",
+  "version": "30.0.1",
   "description": "vite support for modular-css",
   "main": "./vite.js",
   "repository": {
@@ -26,8 +26,8 @@
     "postcss"
   ],
   "dependencies": {
-    "@modular-css/css-to-js": "^28.4.1",
-    "@modular-css/processor": "^28.1.5",
+    "@modular-css/css-to-js": "^29.0.1",
+    "@modular-css/processor": "^29.0.1",
     "@rollup/pluginutils": "^5.0.2"
   },
   "peerDependencies": {

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/index.html

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

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/vite.spec.mjs

@@ -1,25 +1,25 @@
-import { test, expect } from "@playwright/test";
+import { test as testBase, 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");
+const test = testBase.extend({
+    dir  : [ "static", { option : true }],
 });
 
-test("b is right", async ({ page }) => {
-    const el = await page.getByText("B");
+test("style ordering", async ({ page, dir }) => {
+    await page.goto(`/${dir}/`);
+    
+    const a = await page.getByText("A");
 
-    await expect(el).toBeVisible();
+    await expect(a).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");
+    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");
 });

package/tests/specimens/a.mcss

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

package/tests/specimens/b.mcss

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