Repository: tivac/modular-css
Pull request #862 (2022-06-29 19:24:51)

fix: always use normalized path
<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->
Since the module already had to normalize paths to be absolute it will now use those absolute paths internally when looking up information from the `Processor` instance.

## 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. -->
Previously `@modular-css/css-to-js` would use the path as passed to it, which could cause issues with bundlers that passed relative paths (usually because of the use of aliases). 

## 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. -->
Updated tests

## 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.


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

Latest commit: 3e8f025428e9d09a95aa0452b77386e557b1a165

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

<details><summary>This PR includes changesets to release 4 packages</summary>

  | Name                   | Type  |
| ---------------------- | ----- |
| @modular-css/css-to-js | Patch |
| @modular-css/rollup    | Patch |
| @modular-css/vite      | Patch |
| @modular-css/webpack   | Patch |

</details>

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

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/tivac/modular-css/new/normalized-paths?filename=.changeset/odd-olives-reflect.md&value=---%0A%22%40modular-css%2Fcss-to-js%22%3A%20patch%0A---%0A%0Afix%3A%20always%20use%20normalized%20path%0A)


codesee-maps[bot]: <details>
<summary><b>👇 <a href="https://app.codesee.io/r/reviews?pr=862&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=862&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/862/23b4810f/3e8f025428e9d09a95aa0452b77386e557b1a165.svg)](https://app.codesee.io/r/reviews?pr=862&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 | 3e8f025428e9d09a95aa0452b77386e557b1a165 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/m-css/deploys/62bca7076e846b0009859718 |
|<span aria-hidden="true">😎</span> Deploy Preview | https://deploy-preview-862--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.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTg2Mi0tbS1jc3MubmV0bGlmeS5hcHAifQ.FPTb8Z20B0lM2xp7kUQQqiK0m5ATXq11Vo--NWsdoYM)<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/862?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) Report
> Merging [#862](https://codecov.io/gh/tivac/modular-css/pull/862?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) (3e8f025) into [main](https://codecov.io/gh/tivac/modular-css/commit/bea73203644f612602ab94a35fca33ccf62cb57d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) (bea7320) will **not change** coverage.
> The diff coverage is `100.00%`.

```diff
@@           Coverage Diff           @@
##             main     #862   +/-   ##
=======================================
  Coverage   99.71%   99.71%           
=======================================
  Files          37       37           
  Lines        1416     1416           
  Branches      226      226           
=======================================
  Hits         1412     1412           
  Misses          4        4           
```


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

------

[Continue to review full report at Codecov](https://codecov.io/gh/tivac/modular-css/pull/862?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/862?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit). Last update [bea7320...3e8f025](https://codecov.io/gh/tivac/modular-css/pull/862?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).


Patch:
diff --git a/.changeset/old-bugs-sell.md b/.changeset/old-bugs-sell.md
new file mode 100644
index 00000000..005764c2
--- /dev/null
+++ b/.changeset/old-bugs-sell.md
@@ -0,0 +1,7 @@
+---
+"@modular-css/css-to-js": patch
+---
+
+Always use absolute paths internally
+
+Previously `@modular-css/css-to-js` would use the path as passed to it, which could cause issues with bundlers that passed relative paths (usually because of the use of aliases). Since the module already had to normalize paths to be absolute it will now use those absolute paths internally when looking up information from the `Processor` instance.
diff --git a/packages/css-to-js/css-to-js.js b/packages/css-to-js/css-to-js.js
index 48c03440..78f6afe3 100644
--- a/packages/css-to-js/css-to-js.js
+++ b/packages/css-to-js/css-to-js.js
@@ -69,7 +69,7 @@ exports.transform = (file, processor, opts = {}) => {
     const { graph } = processor;
 
     const id = processor.normalize(file);
-    const details = processor.files[file];
+    const details = processor.files[id];
 
     const warnings = [];
     const dependencies = new Set();


Test patch:
diff --git a/packages/css-to-js/test/api.test.js b/packages/css-to-js/test/api.test.js
index cc6ce2b6..c42ce123 100644
--- a/packages/css-to-js/test/api.test.js
+++ b/packages/css-to-js/test/api.test.js
@@ -37,7 +37,7 @@ describe("@modular-css/css-to-js API", () => {
 
         await processor.string("./a.css", `.a { color: red; }`);
 
-        const { code, namedExports } = transform(processor.normalize("./a.css"), processor);
+        const { code, namedExports } = transform("./a.css", processor);
 
         expect(code).toMatchSnapshot("code");
         expect(namedExports).toEqual([ "a" ]);
@@ -48,7 +48,7 @@ describe("@modular-css/css-to-js API", () => {
 
         await processor.string("./a.css", `.a { color: red; }`);
 
-        const { code } = transform(processor.normalize("./a.css"), processor, { dev : true });
+        const { code } = transform("./a.css", processor, { dev : true });
 
         expect(code).toMatchSnapshot("code");
     });
@@ -70,7 +70,7 @@ describe("@modular-css/css-to-js API", () => {
 
         await processor.string("./a.css", `.a { color: blue; } .b { composes: a; }`);
 
-        const { code, namedExports } = transform(processor.normalize("./a.css"), processor);
+        const { code, namedExports } = transform("./a.css", processor);
 
         expect(code).toMatchSnapshot("code");
         expect(namedExports).toEqual([ "a", "b" ]);
@@ -83,7 +83,7 @@ describe("@modular-css/css-to-js API", () => {
 
         await processor.string("./b.css", `.b { composes: a from "./a.css"; color: blue; }`);
 
-        const { code, namedExports } = transform(processor.normalize("./b.css"), processor);
+        const { code, namedExports } = transform("./b.css", processor);
 
         expect(code).toMatchSnapshot("code");
         expect(namedExports).toEqual([ "b" ]);
@@ -96,7 +96,7 @@ describe("@modular-css/css-to-js API", () => {
 
         await processor.string("./b.css", `.b { composes: a from "./a.css"; color: blue; }`);
 
-        const { code, namedExports } = transform(processor.normalize("./b.css"), processor, { relativeImports : true });
+        const { code, namedExports } = transform("./b.css", processor, { relativeImports : true });
 
         expect(code).toMatchSnapshot("code");
         expect(namedExports).toEqual([ "b" ]);
@@ -107,7 +107,7 @@ describe("@modular-css/css-to-js API", () => {
 
         await processor.string("./a.css", `.a { color: red; }`);
 
-        const { code, namedExports } = transform(processor.normalize("./a.css"), processor, { styleExport : true });
+        const { code, namedExports } = transform("./a.css", processor, { styleExport : true });
 
         expect(code).toMatchSnapshot("code");
         expect(namedExports).toEqual([ "a" ]);
@@ -119,7 +119,7 @@ describe("@modular-css/css-to-js API", () => {
         await processor.string("./a.css", `.a { color: red; }`);
         await processor.string("./b.css", `.a { composes: a from "./a.css"; color: blue; }`);
 
-        const { code, namedExports } = transform(processor.normalize("./b.css"), processor);
+        const { code, namedExports } = transform("./b.css", processor);
 
         expect(code).toMatchSnapshot("code");
         expect(namedExports).toEqual([ "a1 as a" ]);
@@ -130,7 +130,7 @@ describe("@modular-css/css-to-js API", () => {
 
         await processor.string("./a.css", `@value v: #00F; .a { color: v; }`);
 
-        const { code, namedExports } = transform(processor.normalize("./a.css"), processor);
+        const { code, namedExports } = transform("./a.css", processor);
 
         expect(code).toMatchSnapshot("code");
         expect(namedExports).toEqual([ "$values", "a" ]);
@@ -142,7 +142,7 @@ describe("@modular-css/css-to-js API", () => {
         await processor.string("./a.css", `@value v: #00F;`);
         await processor.string("./b.css", `@value v from "./a.css"; .b { color: v; }`);
 
-        const { code, namedExports } = transform(processor.normalize("./b.css"), processor);
+        const { code, namedExports } = transform("./b.css", processor);
 
         expect(code).toMatchSnapshot("code");
         expect(namedExports).toEqual([ "$values", "b" ]);
@@ -163,7 +163,7 @@ describe("@modular-css/css-to-js API", () => {
             }
         `));
 
-        const { code, namedExports } = transform(processor.normalize("./b.css"), processor);
+        const { code, namedExports } = transform("./b.css", processor);
 
         expect(code).toMatchSnapshot("code");
         expect(namedExports).toEqual([ "$values", "b" ]);
@@ -181,7 +181,7 @@ describe("@modular-css/css-to-js API", () => {
 
         await processor.string("./a.css", `.a-1 { color: red; }`);
 
-        const { code, namedExports : exported, warnings } = transform(processor.normalize("./a.css"), processor, { namedExports });
+        const { code, namedExports : exported, warnings } = transform("./a.css", processor, { namedExports });
 
         expect(code).toMatchSnapshot("code");
         expect(warnings).toMatchSnapshot("warnings");