Repository: tivac/modular-css
Pull request #872 (2022-07-22 11:34:06)

Do not invalidate non css files
<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->
Fix for webpack's watch mode.

## 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. -->
Webpack plugin throws `Unknown file: ...` on non-css file change.
https://github.com/tivac/modular-css/blob/3d4b600947662a718fa1a3e7e99692ee0a80ae1a/packages/webpack/plugin.js#L23-L25

## 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. -->

New unit test has been added.

## 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! -->
- [ ] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have read the **CONTRIBUTING** document.
- [ ] I have added tests to cover my changes.
- [ ] All new and existing tests passed.


changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: f4b6f59d4101d8991be351b79901594d7d8703ed

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/plesiecki/modular-css/new/do-not-invalidate-non-css-files?filename=.changeset/seven-pigs-work.md&value=---%0A%22%40modular-css%2Fwebpack%22%3A%20patch%0A---%0A%0ADo%20not%20invalidate%20non%20css%20files%0A)


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

  - Make big changes easier — review code in small groups of related files
  - Know where to start — see the whole change at a glance
  - Take a code tour — explore the change with an interactive tour
  - Make comments and review — all fully sync’ed with github

    [Try it now!](https://app.codesee.io/r/reviews?pr=872&src=https%3A%2F%2Fgithub.com%2Ftivac%2Fmodular-css)
</details>

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

#### Legend
![CodeSee Map Legend](https://app.codesee.io/Legend_v2.png)
netlify[bot]: ### <span aria-hidden="true">✅</span> Deploy Preview for *m-css* ready!


|  Name | Link |
|---------------------------------|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | f4b6f59d4101d8991be351b79901594d7d8703ed |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/m-css/deploys/62da8b2fa0cfe0000968b528 |
|<span aria-hidden="true">😎</span> Deploy Preview | https://deploy-preview-872--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.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTg3Mi0tbS1jc3MubmV0bGlmeS5hcHAifQ.5I_uhk3L0OZuxyfC-b4qwLgkWc3TVNAloAzBRMgSq7E)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---

_To edit notification comments on pull requests, go to your [Netlify site settings](https://app.netlify.com/sites/m-css/settings/deploys#deploy-notifications)._
codecov[bot]: # [Codecov](https://codecov.io/gh/tivac/modular-css/pull/872?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) Report
> Merging [#872](https://codecov.io/gh/tivac/modular-css/pull/872?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) (f4b6f59) into [main](https://codecov.io/gh/tivac/modular-css/commit/3d4b600947662a718fa1a3e7e99692ee0a80ae1a?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) (3d4b600) will **increase** coverage by `0.00%`.
> The diff coverage is `100.00%`.

```diff
@@           Coverage Diff           @@
##             main     #872   +/-   ##
=======================================
  Coverage   99.71%   99.71%           
=======================================
  Files          37       37           
  Lines        1416     1417    +1     
  Branches      226      227    +1     
=======================================
+ Hits         1412     1413    +1     
  Misses          4        4           
```


| [Impacted Files](https://codecov.io/gh/tivac/modular-css/pull/872?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) | Coverage Δ | |
|---|---|---|
| [packages/webpack/plugin.js](https://codecov.io/gh/tivac/modular-css/pull/872/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit#diff-cGFja2FnZXMvd2VicGFjay9wbHVnaW4uanM=) | `100.00% <100.00%> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/tivac/modular-css/pull/872?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/tivac/modular-css/pull/872?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit). Last update [3d4b600...f4b6f59](https://codecov.io/gh/tivac/modular-css/pull/872?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit).

tivac: Oof, good catch and super-appreciate the PR (with a **test**! 😁). One minor code note but otherwise lgtm.

Patch:
diff --git a/.changeset/nine-apples-share.md b/.changeset/nine-apples-share.md
new file mode 100644
index 00000000..94ba8553
--- /dev/null
+++ b/.changeset/nine-apples-share.md
@@ -0,0 +1,5 @@
+---
+"@modular-css/webpack": patch
+---
+
+Do not invalidate files the `processor` doesn't already know about.
diff --git a/packages/webpack/plugin.js b/packages/webpack/plugin.js
index e2b9078f..b09427ed 100644
--- a/packages/webpack/plugin.js
+++ b/packages/webpack/plugin.js
@@ -21,7 +21,9 @@ class ModularCSS {
     apply(compiler) {
         // File invalidated by webpack watcher
         compiler.hooks.invalid.tap(PLUGIN_NAME, (file) => {
-            this.processor.invalidate(file);
+            if(this.processor.has(file)) {
+                this.processor.invalidate(file);
+            }
         });
 
         // Runs before compilation begins


Test patch:
diff --git a/packages/webpack/test/webpack.test.js b/packages/webpack/test/webpack.test.js
index dc8821f3..52202412 100644
--- a/packages/webpack/test/webpack.test.js
+++ b/packages/webpack/test/webpack.test.js
@@ -238,6 +238,39 @@ describe("/webpack.js", () => {
         });
     }));
 
+    it("should not throw in watch mode when non-css files change", () => new Promise((resolve) => {
+        let changed = 0;
+
+        // Create v1 of the file
+        fs.writeFileSync(
+            path.join(__dirname, "./output/watch.js"),
+            ""
+        );
+
+        const compiler = webpack(config({
+            entry : require.resolve("./output/watch.js"),
+        }));
+
+        expect(() => {
+            const watcher = compiler.watch(null, (err, stats) => {
+                changed++;
+    
+                success(err, stats);
+
+                if(changed < 2) {
+                    return fs.writeFileSync(
+                        path.join(__dirname, "./output/watch.js"),
+                        "console.log('changed')"
+                    );
+                }
+    
+                watcher.close();
+    
+                return resolve();
+            });
+        }).not.toThrow();
+    }));
+
     // TODO: How on earth do I get webpack to tell me what files changed?
     // eslint-disable-next-line jest/no-disabled-tests
     it.skip("should generate correct builds when files change", () => {