Repository: tivac/modular-css
Pull request #909 (2022-11-09 11:51:25)

[css-to-js] Handle `defaultExport` option
<!--- Provide a general summary of your changes in the Title above -->

## Description
Webpack loader sets the `defaultExport` option.
https://github.com/tivac/modular-css/blob/f37b5a786259eacae45b5cf68e4fe352af570af4/packages/webpack/loader.js#L5-L21

Options are handed over to the `css-to-js` module and then nothing is done about `defaultExport`.

## 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. -->
Handle `defaultExport` option just like any other option set by webpack loader.

## 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. -->
Unit tests have been updated.

## 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.
- [x] My change requires a change to the documentation.
- [x] 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.


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

Latest commit: 47e561ef78f894b66ce79261870c04beb9817970

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/css-to-js-defaultExport-option?filename=.changeset/tough-schools-sip.md&value=---%0A%22%40modular-css%2Fcss-to-js%22%3A%20patch%0A%22%40modular-css%2Fwebpack%22%3A%20patch%0A---%0A%0A%5Bcss-to-js%5D%20Handle%20%60defaultExport%60%20option%0A)


netlify[bot]: ### <span aria-hidden="true">✅</span> Deploy Preview for *m-css* ready!


|  Name | Link |
|---------------------------------|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 47e561ef78f894b66ce79261870c04beb9817970 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/m-css/deploys/636b943e27fd700008add685 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-909--m-css.netlify.app](https://deploy-preview-909--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.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTkwOS0tbS1jc3MubmV0bGlmeS5hcHAifQ.BjnapRlDvdJ8wf9KBZxtLMAdZvU9dWWwm4rKrzySNXE)<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)._
codesee-maps[bot]: <details>
<summary><b>👇 <a href="https://app.codesee.io/r/reviews?pr=909&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=909&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/909/92925b88/47e561ef78f894b66ce79261870c04beb9817970.svg)](https://app.codesee.io/r/reviews?pr=909&src=https%3A%2F%2Fgithub.com%2Ftivac%2Fmodular-css)

#### Legend
![CodeSee Map Legend](https://app.codesee.io/Legend_v2.png)
codecov[bot]: # [Codecov](https://codecov.io/gh/tivac/modular-css/pull/909?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) Report
Base: **99.71**% // Head: **99.71**% // No change to project coverage :thumbsup:
> Coverage data is based on head [(`47e561e`)](https://codecov.io/gh/tivac/modular-css/pull/909?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) compared to base [(`f37b5a7`)](https://codecov.io/gh/tivac/modular-css/commit/f37b5a786259eacae45b5cf68e4fe352af570af4?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit).
> Patch coverage: 100.00% of modified lines in pull request are covered.

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


```diff
@@           Coverage Diff           @@
##             main     #909   +/-   ##
=======================================
  Coverage   99.71%   99.71%           
=======================================
  Files          37       37           
  Lines        1426     1426           
  Branches      232      232           
=======================================
  Hits         1422     1422           
  Misses          4        4           
```


| [Impacted Files](https://codecov.io/gh/tivac/modular-css/pull/909?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/909/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%> (ø)` | |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/tivac/modular-css/pull/909?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](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/packages/css-to-js/css-to-js.js b/packages/css-to-js/css-to-js.js
index 32d03135..c563b36c 100644
--- a/packages/css-to-js/css-to-js.js
+++ b/packages/css-to-js/css-to-js.js
@@ -16,8 +16,9 @@ const DEFAULT_VALUES = "$values";
 const DEFAULTS = {
     __proto__           : null,
     dev                 : false,
-    styleExport         : false,
     variableDeclaration : "const",
+    defaultExport       : true,
+    styleExport         : false,
     namedExports        : {
         rewriteInvalid : true,
         warn           : true,
@@ -294,7 +295,7 @@ exports.transform = (file, processor, opts = {}) => {
                 }
             })
         `));
-    } else {
+    } else if(options.defaultExport) {
         out.push(dedent(`
             export default {
                 ${defaultExports.map(prop).join(",\n")}
diff --git a/packages/rollup/README.md b/packages/rollup/README.md
index d763f217..63daea30 100644
--- a/packages/rollup/README.md
+++ b/packages/rollup/README.md
@@ -132,6 +132,14 @@ import { styles } from "./styles.css";
 
 Enable `styleExport` will also disable the plugin from emitting any assets as well as sourcemaps (unless you explicitly opt-in to sourcemaps via the `map` option)
 
+### `defaultExport`
+
+You can disable exporting classes as default export, eg `import styles from "./style.css";`, by setting `defaultExport` to `false`. Defaults to `true`.
+
+#### `variableDeclaration`
+
+You can set variable declaration kind, eg `var mc_rule = ...;`, by setting `variableDeclaration` to `var`. Defaults to `const`.
+
 ### `empties`
 
 Set to `true` to enable writing out CSS files that don't contain any content (like if you have a CSS file that contains only `@value` rules).
diff --git a/packages/vite/README.md b/packages/vite/README.md
index 80208cc5..ec3cf37e 100644
--- a/packages/vite/README.md
+++ b/packages/vite/README.md
@@ -35,6 +35,18 @@ A minimatch pattern, or an array of minimatch patterns, relative to `process.cwd
 
 Pass an already-instantiated `Processor` instance to the rollup plugin. It will then add any files found when traversing the modules to it and both the rollup-discovered and any already-existing files will be output in the final CSS.
 
+#### `styleExport`
+
+You can disable returning the style string, eg `import { styles } from "./style.css";`, by setting `styleExport` to `false`. Defaults to `true`.
+
+#### `defaultExport`
+
+You can disable exporting classes as default export, eg `import styles from "./style.css";`, by setting `defaultExport` to `false`. Defaults to `true`.
+
+#### `variableDeclaration`
+
+You can set variable declaration kind, eg `var mc_rule = ...;`, by setting `variableDeclaration` to `var`. Defaults to `const`.
+
 ### Shared Options
 
 All other options are passed to the underlying `Processor` instance, see the [Processor Options](#processor-options).
diff --git a/packages/webpack/README.md b/packages/webpack/README.md
index ac62f110..a932b142 100644
--- a/packages/webpack/README.md
+++ b/packages/webpack/README.md
@@ -72,7 +72,7 @@ All other options are passed to the underlying `Processor` instance, see [Option
 
 #### `styleExport`
 
-You can enable returning the style string, eg `import { styles } from "./style.css";`, by setting `styleExport` to `true`.
+You can disable exporting the style string, eg `import { styles } from "./style.css";`, by setting `styleExport` to `false`. Defaults to `true`.
 
 ```js
 ...
@@ -90,6 +90,26 @@ You can enable returning the style string, eg `import { styles } from "./style.c
 ...
 ```
 
+#### `defaultExport`
+
+You can disable exporting classes as default export, eg `import styles from "./style.css";`, by setting `defaultExport` to `false`. Defaults to `true`.
+
+```js
+...
+    module : {
+        rules : [{
+            test : /\.css$/,
+            use  : {
+                loader  : "@modular-css/webpack/loader",
+                options : {
+                    defaultExport : false,
+                }
+            }
+        }]
+    },
+...
+```
+
 #### `variableDeclaration`
 
 You can set variable declaration kind, eg `var mc_rule = ...;`, by setting `variableDeclaration` to `var`. Defaults to `const`.


Test patch:
diff --git a/packages/css-to-js/test/__snapshots__/api.test.js.snap b/packages/css-to-js/test/__snapshots__/api.test.js.snap
index b9915f4e..7ac38e14 100644
--- a/packages/css-to-js/test/__snapshots__/api.test.js.snap
+++ b/packages/css-to-js/test/__snapshots__/api.test.js.snap
@@ -213,6 +213,14 @@ export {
 export const styles = ".mc74f3fa7b_a { color: red; }";
 `;
 
+exports[`@modular-css/css-to-js API should output without default export: code 1`] = `
+const a = "mc74f3fa7b_a"
+
+export {
+    a
+};
+`;
+
 exports[`@modular-css/css-to-js API should represent external @values namespaces: code 1`] = `
 import { $values as $aValues } from "<ROOT-DIR>/a.css";
 const v = "#0F0"
diff --git a/packages/css-to-js/test/api.test.js b/packages/css-to-js/test/api.test.js
index 8eb760ec..61188d9a 100644
--- a/packages/css-to-js/test/api.test.js
+++ b/packages/css-to-js/test/api.test.js
@@ -98,6 +98,17 @@ describe("@modular-css/css-to-js API", () => {
         expect(namedExports).toEqual([ "b" ]);
     });
 
+    it("should output without default export", async () => {
+        const processor = new Processor({ resolvers });
+
+        await processor.string("./a.css", `.a { color: red; }`);
+
+        const { code, namedExports } = transform("./a.css", processor, { defaultExport : false });
+
+        expect(code).toMatchSnapshot("code");
+        expect(namedExports).toEqual([ "a" ]);
+    });
+
     it("should output css when requested", async () => {
         const processor = new Processor({ resolvers });