Repository: tivac/modular-css
Pull request #563 (2019-02-06 06:17:06)

fix: force rollup output to use .css
<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->
Don't use the source file's original extension, it may not be `.css` and that does bad things.

See https://5c5a73dabd66690008908a73--m-css.netlify.com/ for an example of the "bad things" I'm referring to 🤨

## 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. -->
In this case it was the svelte plugin's support for inline `<style>` tags, meaning that a bunch of `.html` files were generated containing CSS. Most web servers handle content-type by file extension, so this went poorly.

## 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. -->
Added a test, also ran https://m-css.com locally & verified that this fixed the issue.

## 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.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.


TravisBuddy: ## Travis tests have failed

Hey @tivac,
Please read the following log in order to understand the failure reason.
It'll be awesome if you fix what's wrong and commit the changes.


### Node.js: 8

<a href="https:&#x2F;&#x2F;travis-ci.org&#x2F;tivac&#x2F;modular-css&#x2F;jobs&#x2F;489395035">View build log</a>


<details>
  <summary>
    <strong>
     npm test -- --ci
    </strong>
  </summary>

```
> modular-css@0.0.0 pretest /home/travis/build/tivac/modular-css
> npm run parser


> modular-css@0.0.0 parser /home/travis/build/tivac/modular-css
> pegjs packages/processor/parsers/parser.pegjs


> modular-css@0.0.0 test /home/travis/build/tivac/modular-css
> jest "--ci"

PASS lint packages/rollup/test/rollup.test.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/rollup/test/rollup.test.js
        663:9  warning  Skipped test  jest/no-disabled-tests
      
      ✖ 1 problem (0 errors, 1 warning)
      

PASS lint packages/processor/test/options.test.js
PASS lint packages/processor/test/api.test.js
PASS lint packages/rollup/test/splitting.test.js
PASS lint packages/processor/processor.js
PASS lint packages/rollup/test/watch.test.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/rollup/test/watch.test.js
        7:7  warning  'read' is assigned a value but never used  no-unused-vars
      
      ✖ 1 problem (0 errors, 1 warning)
      

PASS lint packages/rollup/rollup.js
PASS lint packages/svelte/test/svelte.test.js
PASS lint packages/webpack/test/webpack.test.js
PASS lint packages/browserify/browserify.js
PASS lint packages/browserify/test/factor-bundle.test.js
PASS lint packages/svelte/svelte.js
PASS lint packages/browserify/test/browserify.test.js
PASS lint packages/processor/test/composition.test.js
PASS lint packages/processor/test/values.test.js
PASS lint packages/rollup-rewriter/test/rewriter.test.js
PASS lint packages/www/src/repl/store.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/www/src/repl/store.js
         97:13  warning  Unexpected console statement  no-console
        117:13  warning  Unexpected console statement  no-console
      
      ✖ 2 problems (0 errors, 2 warnings)
      

PASS lint packages/www/rollup.config.js
PASS lint packages/postcss/test/postcss.test.js
PASS lint packages/browserify/test/watchify.test.js
PASS lint packages/rollup-rewriter/rewriter.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/rollup-rewriter/rewriter.js
        46:34  warning  'imports' is assigned a value but never used  no-unused-vars
      
      ✖ 1 problem (0 errors, 1 warning)
      

PASS lint packages/rollup/chunker.js
PASS lint packages/scratchpad/chunks.js
PASS lint packages/processor/plugins/composition.js
PASS lint packages/processor/plugins/scoping.js
PASS lint packages/processor/plugins/values-replace.js
PASS lint packages/webpack/plugin.js
PASS lint packages/aliases/test/aliases.test.js
PASS lint packages/processor/test/scoping.test.js
PASS lint packages/browserify/test/issue-58.test.js
PASS lint packages/processor/test/keyframes.test.js
PASS lint packages/browserify/test/issue-313.test.js
PASS lint packages/cli/test/cli.test.js
PASS lint packages/paths/test/paths.test.js
PASS lint packages/processor/plugins/externals.js
PASS lint packages/processor/test/externals.test.js
PASS lint packages/processor/plugins/graph-nodes.js
PASS lint packages/webpack/loader.js
PASS lint packages/cli/cli.js
PASS lint packages/browserify/test/issue-105.test.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/browserify/test/issue-105.test.js
        16:13  warning  Skipped test  jest/no-disabled-tests
        23:13  warning  Skipped test  jest/no-disabled-tests
      
      ✖ 2 problems (0 errors, 2 warnings)
      

PASS lint packages/processor/test/getters.test.js
PASS lint packages/scratchpad/test/chunks.test.js
PASS lint packages/www/build/html/guide.js
PASS lint packages/www/build/rollup-plugin-postcss.js
PASS lint packages/namer/test/namer.test.js
PASS lint packages/www/build/html/repl.js
PASS lint packages/glob/test/glob.test.js
PASS lint packages/postcss/postcss.js
PASS lint packages/www/build/rollup-plugin-generate-html.js
PASS lint packages/processor/test/exports.test.js
PASS lint packages/namer/namer.js
PASS lint packages/www/build/html/changelog.js
PASS lint packages/processor/test/issues/issue-191.test.js
PASS lint packages/www/build/html/home.js
PASS lint packages/processor/test/issues/issue-56.test.js
PASS lint packages/processor/test/issues/issue-24.test.js
PASS lint packages/www/build/html/css.js
PASS lint packages/processor/test/issues/issue-98.test.js
PASS lint packages/processor/plugins/values-local.js
PASS lint packages/processor/plugins/values-composed.js
PASS lint packages/processor/plugins/values-namespaced.js
PASS lint packages/processor/plugins/values-imported.js
PASS lint packages/www/build/svelte.js
PASS lint packages/scratchpad/chunktest.js
  ● Console

    console.warn 
      
      /home/travis/build/tivac/modular-css/packages/scratchpad/chunktest.js
        37:1   warning  Unexpected console statement  no-console
        40:5   warning  Unexpected console statement  no-console
        43:20  warning  Unexpected console statement  no-console
        46:1   warning  Unexpected console statement  no-console
      
      ✖ 4 problems (0 errors, 4 warnings)
      

PASS lint packages/processor/plugins/values-export.js
PASS lint packages/scratchpad/test/construct.js
PASS lint packages/www/build/rollup-plugin-sirv.js
PASS lint packages/processor/plugins/keyframes.js
PASS lint packages/rollup-rewriter/formats/amd.js
PASS lint packages/processor/test/unicode.test.js
PASS lint packages/aliases/aliases.js
PASS lint packages/processor/lib/graph-tiers.js
PASS lint packages/rollup-rewriter/formats/system.js
PASS lint packages/glob/glob.js
PASS lint packages/test-utils/logs.js
PASS lint packages/processor/lib/resolve.js
PASS lint packages/processor/lib/output.js
PASS lint packages/test-utils/rollup-build-snapshot.js
PASS lint packages/processor/test/issues/issue-66.test.js
PASS lint packages/processor/test/issues/issue-261.test.js
PASS lint packages/www/src/repl/listen.js
PASS lint packages/www/build/rollup-plugin-add-watch-files.js
PASS lint packages/test-utils/rollup-code-snapshot.js
PASS lint packages/test-utils/read-dir.js
PASS lint packages/processor/lib/identifiers.js
PASS lint packages/paths/paths.js
PASS lint packages/browserify/test/lib/bundle.js
PASS lint packages/scratchpad/test/snapshot.js
PASS lint packages/processor/lib/normalize.js
PASS lint packages/rollup-rewriter/formats/es.js
PASS lint packages/test-utils/relative.js
PASS lint packages/test-utils/write.js
PASS lint packages/test-utils/rollup-watching.js
PASS lint packages/www/src/repl/data/prompt.js
PASS lint packages/processor/lib/message.js
PASS lint packages/www/build/rollup-plugin-clean.js
PASS lint packages/www/build/environment.js
PASS lint packages/processor/lib/relative.js
PASS lint packages/www/stubs/path.js
PASS lint packages/www/build/html/markdown.js
PASS lint packages/test-utils/read.js
PASS lint packages/www/src/repl/codemirror.js
PASS lint packages/test-utils/exists.js
PASS lint packages/test-utils/warn.js
PASS lint packages/test-utils/prefix.js
PASS lint packages/test-utils/namer.js
PASS lint packages/www/stubs/fs.js
PASS lint packages/www/src/repl/index.js
FAIL tests packages/rollup/test/rollup.test.js
  ● /rollup.js › should output assets with a .css file extension

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/rollup.js should output assets with a .css file extension 1".

    - Snapshot
    + Received

    @@ -1,7 +1,7 @@
      Object {
    -   "assets/style-ea90c2f3.css": "
    +   "assets/style-364a3e62.css": "
      /* packages/rollup/test/specimens/file-extension/style.cssx */
      .style {
          color: salmon;
      }
      ",

      590 |         const result = await bundle.generate({ format });
      591 | 
    > 592 |         expect(result).toMatchRollupSnapshot();
          |                        ^
      593 |     });
      594 | 
      595 |     describe("case sensitivity tests", () => {

      at Object.toMatchRollupSnapshot (packages/rollup/test/rollup.test.js:592:24)

 › 1 snapshot failed.
PASS tests packages/processor/test/options.test.js
PASS tests packages/processor/test/api.test.js
PASS tests packages/rollup/test/splitting.test.js
PASS tests packages/rollup/test/watch.test.js
PASS tests packages/svelte/test/svelte.test.js
(node:5275) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
PASS tests packages/webpack/test/webpack.test.js
PASS tests packages/browserify/test/factor-bundle.test.js
PASS tests packages/browserify/test/browserify.test.js
PASS tests packages/processor/test/composition.test.js
PASS tests packages/processor/test/values.test.js
PASS tests packages/rollup-rewriter/test/rewriter.test.js
PASS tests packages/postcss/test/postcss.test.js
PASS tests packages/browserify/test/watchify.test.js
PASS tests packages/aliases/test/aliases.test.js
PASS tests packages/processor/test/scoping.test.js
PASS tests packages/browserify/test/issue-58.test.js
PASS tests packages/processor/test/keyframes.test.js
PASS tests packages/browserify/test/issue-313.test.js
PASS tests packages/cli/test/cli.test.js
PASS tests packages/paths/test/paths.test.js
PASS tests packages/processor/test/externals.test.js
PASS tests packages/processor/test/getters.test.js
PASS tests packages/scratchpad/test/chunks.test.js
PASS tests packages/namer/test/namer.test.js
PASS tests packages/glob/test/glob.test.js
PASS tests packages/processor/test/exports.test.js
PASS tests packages/processor/test/issues/issue-56.test.js
PASS tests packages/processor/test/issues/issue-24.test.js
PASS tests packages/processor/test/issues/issue-98.test.js
PASS tests packages/processor/test/unicode.test.js
PASS tests packages/processor/test/issues/issue-66.test.js
PASS tests packages/processor/test/issues/issue-261.test.js

Summary of all failing tests
FAIL packages/rollup/test/rollup.test.js
  ● /rollup.js › should output assets with a .css file extension

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "/rollup.js should output assets with a .css file extension 1".

    - Snapshot
    + Received

    @@ -1,7 +1,7 @@
      Object {
    -   "assets/style-ea90c2f3.css": "
    +   "assets/style-364a3e62.css": "
      /* packages/rollup/test/specimens/file-extension/style.cssx */
      .style {
          color: salmon;
      }
      ",

      590 |         const result = await bundle.generate({ format });
      591 | 
    > 592 |         expect(result).toMatchRollupSnapshot();
          |                        ^
      593 |     });
      594 | 
      595 |     describe("case sensitivity tests", () => {

      at Object.toMatchRollupSnapshot (packages/rollup/test/rollup.test.js:592:24)


Snapshot Summary
 › 1 snapshot failed from 1 test suite. Inspect your code changes or run `npm test -- -u` to update them.

Test Suites: 1 failed, 71 skipped, 140 passed, 141 of 212 total
Tests:       1 failed, 74 skipped, 369 passed, 444 total
Snapshots:   1 failed, 308 passed, 309 total
Time:        26.388s
Ran all test suites in 2 projects.
npm ERR! Test failed.  See above for more details.
```

</details>


###### TravisBuddy Request Identifier: 2201edd0-29d7-11e9-9562-95bccb7073f8

codecov[bot]: # [Codecov](https://codecov.io/gh/tivac/modular-css/pull/563?src=pr&el=h1) Report
> Merging [#563](https://codecov.io/gh/tivac/modular-css/pull/563?src=pr&el=desc) into [master](https://codecov.io/gh/tivac/modular-css/commit/4c0bdd807f62fa796044fd0b10506766b563eede?src=pr&el=desc) will **increase** coverage by `<.01%`.
> The diff coverage is `100%`.

[![Impacted file tree graph](https://codecov.io/gh/tivac/modular-css/pull/563/graphs/tree.svg?width=650&token=EIUJKcuTE8&height=150&src=pr)](https://codecov.io/gh/tivac/modular-css/pull/563?src=pr&el=tree)

```diff
@@            Coverage Diff             @@
##           master     #563      +/-   ##
==========================================
+ Coverage   99.06%   99.06%   +<.01%     
==========================================
  Files          49       49              
  Lines        1172     1173       +1     
  Branches      183      183              
==========================================
+ Hits         1161     1162       +1     
  Misses         11       11
```


| [Impacted Files](https://codecov.io/gh/tivac/modular-css/pull/563?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [packages/rollup/rollup.js](https://codecov.io/gh/tivac/modular-css/pull/563/diff?src=pr&el=tree#diff-cGFja2FnZXMvcm9sbHVwL3JvbGx1cC5qcw==) | `100% <100%> (ø)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/tivac/modular-css/pull/563?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/tivac/modular-css/pull/563?src=pr&el=footer). Last update [4c0bdd8...2f92244](https://codecov.io/gh/tivac/modular-css/pull/563?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/packages/rollup/rollup.js b/packages/rollup/rollup.js
index bc56078c..d1197af1 100644
--- a/packages/rollup/rollup.js
+++ b/packages/rollup/rollup.js
@@ -220,8 +220,10 @@ module.exports = (opts) => {
                     continue;
                 }
 
-                const { name, ext, base } = path.parse(node);
-                const id = this.emitAsset(base);
+                const ext = ".css";
+                const name = path.basename(node, path.extname(node));
+                
+                const id = this.emitAsset(`${name}${ext}`);
 
                 /* eslint-disable-next-line no-await-in-loop */
                 const result = await processor.output({


Test patch:
diff --git a/packages/rollup/test/__snapshots__/rollup.test.js.snap b/packages/rollup/test/__snapshots__/rollup.test.js.snap
index 744cec39..86a9412d 100644
--- a/packages/rollup/test/__snapshots__/rollup.test.js.snap
+++ b/packages/rollup/test/__snapshots__/rollup.test.js.snap
@@ -397,6 +397,24 @@ console.log(css);
 }
 `;
 
+exports[`/rollup.js should output assets with a .css file extension 1`] = `
+Object {
+  "assets/style.css": "
+/* packages/rollup/test/specimens/file-extension/style.cssx */
+.style {
+    color: salmon;
+}
+",
+  "entry.js": "
+var style = {
+    \\"style\\": \\"style\\"
+};
+
+console.log(style);
+",
+}
+`;
+
 exports[`/rollup.js should output unreferenced CSS 1`] = `
 Array [
   Object {
diff --git a/packages/rollup/test/rollup.test.js b/packages/rollup/test/rollup.test.js
index cb7676d6..0e4c05cc 100644
--- a/packages/rollup/test/rollup.test.js
+++ b/packages/rollup/test/rollup.test.js
@@ -15,6 +15,7 @@ const namer   = require("@modular-css/test-utils/namer.js");
 const logs    = require("@modular-css/test-utils/logs.js");
 
 require("@modular-css/test-utils/rollup-code-snapshot.js");
+require("@modular-css/test-utils/rollup-build-snapshot.js");
 
 const Processor = require("@modular-css/processor");
 
@@ -575,6 +576,25 @@ describe("/rollup.js", () => {
         logSnapshot();
     });
 
+    it("should output assets with a .css file extension", async () => {
+        const bundle = await rollup({
+            input   : require.resolve("./specimens/file-extension/entry.js"),
+            plugins : [
+                plugin({
+                    namer,
+                    include : /\.cssx$/
+                }),
+            ],
+        });
+
+        const result = await bundle.generate({
+            format,
+            assetFileNames,
+        });
+
+        expect(result).toMatchRollupSnapshot();
+    });
+
     describe("case sensitivity tests", () => {
         const fs = require("fs");
         let fn = it;
diff --git a/packages/rollup/test/specimens/file-extension/entry.js b/packages/rollup/test/specimens/file-extension/entry.js
new file mode 100644
index 00000000..8266e035
--- /dev/null
+++ b/packages/rollup/test/specimens/file-extension/entry.js
@@ -0,0 +1,3 @@
+import style from "./style.cssx";
+
+console.log(style);
diff --git a/packages/rollup/test/specimens/file-extension/style.cssx b/packages/rollup/test/specimens/file-extension/style.cssx
new file mode 100644
index 00000000..d121686f
--- /dev/null
+++ b/packages/rollup/test/specimens/file-extension/style.cssx
@@ -0,0 +1,3 @@
+.style {
+    color: salmon;
+}