Repository: tivac/modular-css
Pull request #996 (2023-12-02 01:45:40)

fix: Join class compositions for webpack JSON output
<!--- Provide a general summary of your changes in the Title above -->

## Description

JSON output for webpack package outputted arrays of classes, this change will join the classes into strings, matching behavior in m-css/rollup package.

## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran to -->
<!--- see how your change affects other areas of the code, etc. -->

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)

## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] I have read the **CONTRIBUTING** document.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.
- [x] I have added a changeset for my change.


changeset-bot[bot]: ###  🦋  Changeset detected

Latest commit: b7bbb64595d8a6098b99ad1d266084ec7731ffb8

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 1 package</summary>

  | Name                 | Type  |
| -------------------- | ----- |
| @modular-css/webpack | Patch |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/hjhopp/modular-css/new/main?filename=.changeset/tender-scissors-chew.md&value=---%0A%22%40modular-css%2Fwebpack%22%3A%20patch%0A---%0A%0Afix%3A%20Join%20class%20compositions%20for%20webpack%20JSON%20output%0A)


codesee-maps[bot]: <details open>
<summary><b>👇 <a href="https://app.codesee.io/r/reviews?pr=996&src=https%3A%2F%2Fgithub.com%2Ftivac%2Fmodular-css">Click on the image</a> for a new way to code review</b>
</summary>

####

[![Review these changes using an interactive CodeSee Map](https://s3.us-east-2.amazonaws.com/maps.codesee.io/images/github/tivac/modular-css/996/f346f744/b7bbb64595d8a6098b99ad1d266084ec7731ffb8.svg)](https://app.codesee.io/r/reviews?pr=996&src=https%3A%2F%2Fgithub.com%2Ftivac%2Fmodular-css)

#### Legend
<img src="https://app.codesee.io/Legend_v3.png" alt="CodeSee Map legend" width="220" height="156">
</details>
netlify[bot]: ### <span aria-hidden="true">✅</span> Deploy Preview for *m-css* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | b7bbb64595d8a6098b99ad1d266084ec7731ffb8 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/m-css/deploys/656a8c462a7b360008c45c8e |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-996--m-css.netlify.app](https://deploy-preview-996--m-css.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTk5Ni0tbS1jc3MubmV0bGlmeS5hcHAifQ.VXROU8vKlvHaPtzVeJC86sE8EiBz0Y4rv0wg6tjS7fU)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---

_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/m-css/configuration/deploys#deploy-notifications)._
codecov[bot]: ## [Codecov](https://app.codecov.io/gh/tivac/modular-css/pull/996?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Comparison is base [(`7d186b9`)](https://app.codecov.io/gh/tivac/modular-css/commit/7d186b93462add6cae722f73effd7e0bcbe3e957?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) 99.72% compared to head [(`b7bbb64`)](https://app.codecov.io/gh/tivac/modular-css/pull/996?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) 99.72%.
> Report is 2 commits behind head on main.


<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff           @@
##             main     #996   +/-   ##
=======================================
  Coverage   99.72%   99.72%           
=======================================
  Files          37       37           
  Lines        1452     1461    +9     
  Branches      240      240           
=======================================
+ Hits         1448     1457    +9     
  Misses          4        4           
```



</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/tivac/modular-css/pull/996?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit).


Patch:
diff --git a/.changeset/empty-tools-happen.md b/.changeset/empty-tools-happen.md
new file mode 100644
index 00000000..80e833c6
--- /dev/null
+++ b/.changeset/empty-tools-happen.md
@@ -0,0 +1,5 @@
+---
+"@modular-css/webpack": patch
+---
+
+Join class compositions for JSON output
diff --git a/packages/webpack/plugin.js b/packages/webpack/plugin.js
index b09427ed..0c66fe1a 100644
--- a/packages/webpack/plugin.js
+++ b/packages/webpack/plugin.js
@@ -3,6 +3,8 @@
 const { sources } = require("webpack");
 
 const Processor = require("@modular-css/processor");
+const output = require("@modular-css/processor/lib/output.js");
+const relative = require("@modular-css/processor/lib/relative.js");
 
 const PLUGIN_NAME = "@modular-css/webpack";
 
@@ -74,8 +76,30 @@ class ModularCSS {
                 }
     
                 if(this.options.json) {
+                    const files = Object.keys(this.processor.files);
+
+                    // Ensure file order is consistent
+                    files.sort();
+
+                    // Wait to ensure that all files have completed processing
+                    await Promise.all(
+                        files.map((id) => this.processor.files[id].result)
+                    );
+
+                    const json = Object.create(null);
+
+                    files.forEach((id) => {
+                        json[relative(this.processor.options.cwd, id)] = {
+                            // @values
+                            ...output.values(this.processor.files[id].values),
+    
+                            // classes
+                            ...output.fileCompositions(this.processor.files[id], this.processor, { joined : true }),
+                        };
+                    });
+    
                     assets[this.options.json] = new sources.RawSource(
-                        JSON.stringify(data.compositions, null, 4)
+                        JSON.stringify(json, null, 4)
                     );
                 }
             });


Test patch:
diff --git a/packages/webpack/test/__snapshots__/webpack.test.js.snap b/packages/webpack/test/__snapshots__/webpack.test.js.snap
index a8e8f161..2f85baa3 100644
--- a/packages/webpack/test/__snapshots__/webpack.test.js.snap
+++ b/packages/webpack/test/__snapshots__/webpack.test.js.snap
@@ -828,30 +828,22 @@ exports[`/webpack.js should handle dependencies 2`] = `
 exports[`/webpack.js should handle dependencies 3`] = `
 "{
     "packages/webpack/test/specimens/folder/folder.css": {
-        "folder": [
-            "mc_folder"
-        ]
+        "folder": "mc_folder"
     },
     "packages/webpack/test/specimens/local.css": {
-        "booga": [
-            "mc_booga"
-        ],
-        "looga": [
-            "mc_booga",
-            "mc_looga"
-        ]
+        "one": "red",
+        "two": "blue",
+        "folder": "white",
+        "booga": "mc_booga",
+        "looga": "mc_booga mc_looga"
     },
     "packages/webpack/test/specimens/start.css": {
-        "wooga": [
-            "mc_booga",
-            "mc_wooga"
-        ],
-        "booga": [
-            "mc_booga"
-        ],
-        "tooga": [
-            "mc_tooga"
-        ]
+        "one": "red",
+        "two": "blue",
+        "folder": "white",
+        "wooga": "mc_booga mc_wooga",
+        "booga": "mc_booga",
+        "tooga": "mc_tooga"
     }
 }"
 `;
@@ -1068,9 +1060,7 @@ __webpack_require__(/*! ./simple.css */ "./packages/webpack/test/specimens/simpl
 exports[`/webpack.js should output json to disk 2`] = `
 "{
     "packages/webpack/test/specimens/simple.css": {
-        "wooga": [
-            "mc_wooga"
-        ]
+        "wooga": "mc_wooga"
     }
 }"
 `;