Repository: tivac/modular-css
Pull request #892 (2022-09-09 12:44:05)

[processor] Composition order
<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->
One more test case for composition order. 
An expected order would be `mc_folder2` before `mc_foo`.

Follow-up of https://github.com/tivac/modular-css/pull/890

## 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. -->
Consistent composition map. 

## 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! -->
- [ ] 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: 7a4b4dc7ced3089f9462d8b2870ef491bce055c0

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/consistent-composition-yet-another-case?filename=.changeset/old-fireants-fetch.md&value=---%0A%22%40modular-css%2Fprocessor%22%3A%20patch%0A---%0A%0ATest%20case%20for%20composition%20order%0A)


codesee-maps[bot]: <details>
<summary><b>👇 <a href="https://app.codesee.io/r/reviews?pr=892&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=892&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/892/6e671d71/7a4b4dc7ced3089f9462d8b2870ef491bce055c0.svg)](https://app.codesee.io/r/reviews?pr=892&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 | 7a4b4dc7ced3089f9462d8b2870ef491bce055c0 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/m-css/deploys/631b3517844d3d000a9e54e1 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-892--m-css.netlify.app](https://deploy-preview-892--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.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTg5Mi0tbS1jc3MubmV0bGlmeS5hcHAifQ.g3pMIkNE4DvVutny9MjWmD3oaLdqf-HKF6Nw-bgTgSw)<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/892?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) Report
> Merging [#892](https://codecov.io/gh/tivac/modular-css/pull/892?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) (7a4b4dc) into [main](https://codecov.io/gh/tivac/modular-css/commit/d937088f9b578e0322d453cb803bab290152e5f1?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Pat+Cavit) (d937088) will **not change** coverage.
> The diff coverage is `n/a`.

```diff
@@           Coverage Diff           @@
##             main     #892   +/-   ##
=======================================
  Coverage   99.71%   99.71%           
=======================================
  Files          37       37           
  Lines        1423     1423           
  Branches      232      232           
=======================================
  Hits         1419     1419           
  Misses          4        4           
```



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)

tivac: Sorry, missed the notification on this one @plesiecki, I'll try to get some eyes on it tonight ❤
plesiecki: Hello, just to let you know that with 50220c1b80c41c8757c56e3727bd718b95a0370b I see consistent results. Maybe it's worth reconsidering.
plesiecki: I've added few more tests for composition
plesiecki: Looks like a removing this line below can help
https://github.com/tivac/modular-css/blob/e64362e087f4ae6113a1b622e59dab827a9f2e97/packages/processor/processor.js#L513
plesiecki: `PASS packages/processor/test/composition.test.js`; rest of the snapshots likely should be regenerated.
tivac: The problem with https://github.com/tivac/modular-css/commit/50220c1b80c41c8757c56e3727bd718b95a0370b was, as I recall, that it outputs the composition selectors in the wrong order. Since we're already building the dependency graph including all the selectors, I think it probably needs to start generating composition data from that instead of just shoving it onto an array?

I haven't looked at this for a bit despite saying I would, I'm sorry.
plesiecki: > The problem with [50220c1](https://github.com/tivac/modular-css/commit/50220c1b80c41c8757c56e3727bd718b95a0370b) was, as I recall, that it outputs the composition selectors in the wrong order. Since we're already building the dependency graph including all the selectors, I think it probably needs to start generating composition data from that instead of just shoving it onto an array?
> 
> I haven't looked at this for a bit despite saying I would, I'm sorry.

No problem. Forget about https://github.com/tivac/modular-css/commit/50220c1b80c41c8757c56e3727bd718b95a0370b, I've approached it differently — https://github.com/tivac/modular-css/pull/892/commits/43c126a57ca34f7d064dd803e32d204999199502

Patch:
diff --git a/.changeset/gentle-buckets-fold.md b/.changeset/gentle-buckets-fold.md
new file mode 100644
index 00000000..4704cdd9
--- /dev/null
+++ b/.changeset/gentle-buckets-fold.md
@@ -0,0 +1,7 @@
+---
+"@modular-css/browserify": patch
+"@modular-css/processor": patch
+"@modular-css/svelte": patch
+---
+
+Fix an issue where composition information could be returned out of order
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 9218a937..50b575d4 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -27,3 +27,4 @@
 - [ ] I have read the **CONTRIBUTING** document.
 - [ ] I have added tests to cover my changes.
 - [ ] All new and existing tests passed.
+- [ ] I have added a changeset for my change.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index c5d01199..28c85f92 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -12,12 +12,13 @@ Hi! Thanks for stopping by. Hopefully this document helps you get your bearings
 4. `npm test` to verify that things are working for you locally
 5. Make your changes
 6. `npm test <package>` will run just the tests for the package you're changing. This can help with iteration speed!
+7. `npx changeset` will create a changeset entry for the change if it's user-facing.
 
 [CI](https://github.com/tivac/modular-css/actions/workflows/ci.yml) will run against any PRs you post, so it's a good idea to get your local tests passing first.
 
 ## Project structure
 
-`modular-css` is a [lernajs](https://lernajs.io/) monorepo, so there's a bit of configuration in the root but the meat of the project lives within the `packages/` folders. Here's a quick-n-dirty breakdown of some of them:
+`modular-css` is a monorepo, so there's a bit of configuration in the root but the meat of the project lives within the `packages/` folders. Here's a quick-n-dirty breakdown of some of them:
 
 - [`packages/processor`](https://github.com/tivac/modular-css/tree/main/packages/processor) - The `Processor` is the main piece of infrastructure for the entire project. It's a wrapper around a series of [postcss](http://postcss.org/) pipelines and plugins that handles all of the functionality like `composes`, `@value`, and the rest.
 - [`packages/rollup`](https://github.com/tivac/modular-css/tree/main/packages/rollup) - [rollup](https://rollupjs.org/) plugin that acts as an interface between the rollup process and a `Processor` instance.
diff --git a/package-lock.json b/package-lock.json
index 0dd04144..0d463832 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@changesets/changelog-github": "^0.4.5",
         "@changesets/cli": "^2.23.0",
         "@codemirror/state": "^0.19.6",
-        "@codemirror/view": "^0.20.7",
+        "@codemirror/view": "^6.4.0",
         "@modular-css/path-aliases": "^28.0.0",
         "@modular-css/processor": "^28.0.0",
         "@modular-css/shortnames": "^28.0.0",
@@ -48,7 +48,7 @@
         "p-defer": "^3.0.0",
         "peggy": "^2.0.0",
         "postcss": "^8.4.14",
-        "postcss-nested": "^5.0.6",
+        "postcss-nested": "^6.0.0",
         "read-dir-deep": "^7.0.1",
         "rollup": "^2.75.3",
         "rollup-plugin-hypothetical": "^2.1.1",
@@ -955,20 +955,20 @@
       "dev": true
     },
     "node_modules/@codemirror/view": {
-      "version": "0.20.7",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.20.7.tgz",
-      "integrity": "sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.4.0.tgz",
+      "integrity": "sha512-Kv32b6Tn7QVwFbj/EDswTLSocjk5kgggF6zzBFAL4o4hZ/vmtFD155+EjH1pVlbfoDyVC2M6SedPsMrwYscgNg==",
       "dev": true,
       "dependencies": {
-        "@codemirror/state": "^0.20.0",
+        "@codemirror/state": "^6.0.0",
         "style-mod": "^4.0.0",
         "w3c-keyname": "^2.2.4"
       }
     },
     "node_modules/@codemirror/view/node_modules/@codemirror/state": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.20.1.tgz",
-      "integrity": "sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.2.tgz",
+      "integrity": "sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA==",
       "dev": true
     },
     "node_modules/@esbuild-plugins/node-modules-polyfill": {
@@ -5290,19 +5290,20 @@
       }
     },
     "node_modules/eslint-plugin-svelte": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.7.0.tgz",
-      "integrity": "sha512-K43Eehm5Gal1GxeBjcUMuJRGLHtIwXmLiItNBApV4N1RQYknRh2gVPc6CsJsVlncCvyw6qvNsGX/db1v1PRdMw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.11.0.tgz",
+      "integrity": "sha512-VkSNNo+mKnSxsvTWSzdd5PYEjZfAnIg4+4xsoyK9XK8yJLD34VOpqlGaE8bK/Bfqr7Q3tIToqDVgWzrETVMDrA==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.1",
         "eslint-utils": "^3.0.0",
+        "esutils": "^2.0.3",
         "known-css-properties": "^0.25.0",
         "postcss": "^8.4.5",
         "postcss-load-config": "^3.1.4",
         "postcss-safe-parser": "^6.0.0",
         "sourcemap-codec": "^1.4.8",
-        "svelte-eslint-parser": "^0.18.0"
+        "svelte-eslint-parser": "^0.19.0"
       },
       "engines": {
         "node": "^14.17.0 || >=16.0.0"
@@ -12023,12 +12024,12 @@
       }
     },
     "node_modules/postcss-nested": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
-      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
       "dev": true,
       "dependencies": {
-        "postcss-selector-parser": "^6.0.6"
+        "postcss-selector-parser": "^6.0.10"
       },
       "engines": {
         "node": ">=12.0"
@@ -14466,17 +14467,17 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
+      "version": "3.52.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.52.0.tgz",
+      "integrity": "sha512-FxcnEUOAVfr10vDU5dVgJN19IvqeHQCS1zfe8vayTfis9A2t5Fhx+JDe5uv/C3j//bB1umpLJ6quhgs9xyUbCQ==",
       "engines": {
         "node": ">= 8"
       }
     },
     "node_modules/svelte-eslint-parser": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.18.1.tgz",
-      "integrity": "sha512-f7R9dT6l32O5DC2D9bFLfJjhwfTYZCLBPdR/5e5VOWDNhjTAudB3TL+apaJf+pKDUOfTdqjTqz/KrBjhny7TIQ==",
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.19.3.tgz",
+      "integrity": "sha512-16LDbse3BW3TXlLX6IXRLtywh5h9pMDEp7USc+nwLuyV6AFb/mSzSzbK5tJFXeeMf06uxWIxZjSkj5fcYRu+Hw==",
       "dev": true,
       "dependencies": {
         "eslint-scope": "^7.0.0",
@@ -15931,7 +15932,7 @@
     },
     "packages/css-to-js": {
       "name": "@modular-css/css-to-js",
-      "version": "28.2.3",
+      "version": "28.3.0",
       "license": "MIT",
       "dependencies": {
         "@modular-css/processor": "^28.1.4",
@@ -15996,10 +15997,10 @@
     },
     "packages/rollup": {
       "name": "@modular-css/rollup",
-      "version": "28.2.3",
+      "version": "28.3.0",
       "license": "MIT",
       "dependencies": {
-        "@modular-css/css-to-js": "^28.2.3",
+        "@modular-css/css-to-js": "^28.3.0",
         "@modular-css/processor": "^28.1.4",
         "@rollup/pluginutils": "^4.1.2",
         "slash": "^3.0.0"
@@ -16062,10 +16063,10 @@
     },
     "packages/vite": {
       "name": "@modular-css/vite",
-      "version": "29.0.1",
+      "version": "29.1.0",
       "license": "MIT",
       "dependencies": {
-        "@modular-css/css-to-js": "^28.2.3",
+        "@modular-css/css-to-js": "^28.3.0",
         "@modular-css/processor": "^28.1.4",
         "@rollup/pluginutils": "^4.1.2"
       },
@@ -16075,10 +16076,10 @@
     },
     "packages/webpack": {
       "name": "@modular-css/webpack",
-      "version": "28.2.4",
+      "version": "28.3.0",
       "license": "MIT",
       "dependencies": {
-        "@modular-css/css-to-js": "^28.2.3",
+        "@modular-css/css-to-js": "^28.3.0",
         "@modular-css/processor": "^28.1.4"
       },
       "peerDependencies": {
@@ -16903,20 +16904,20 @@
       "dev": true
     },
     "@codemirror/view": {
-      "version": "0.20.7",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.20.7.tgz",
-      "integrity": "sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.4.0.tgz",
+      "integrity": "sha512-Kv32b6Tn7QVwFbj/EDswTLSocjk5kgggF6zzBFAL4o4hZ/vmtFD155+EjH1pVlbfoDyVC2M6SedPsMrwYscgNg==",
       "dev": true,
       "requires": {
-        "@codemirror/state": "^0.20.0",
+        "@codemirror/state": "^6.0.0",
         "style-mod": "^4.0.0",
         "w3c-keyname": "^2.2.4"
       },
       "dependencies": {
         "@codemirror/state": {
-          "version": "0.20.1",
-          "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.20.1.tgz",
-          "integrity": "sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ==",
+          "version": "6.1.2",
+          "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.2.tgz",
+          "integrity": "sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA==",
           "dev": true
         }
       }
@@ -17681,7 +17682,7 @@
     "@modular-css/rollup": {
       "version": "file:packages/rollup",
       "requires": {
-        "@modular-css/css-to-js": "^28.2.3",
+        "@modular-css/css-to-js": "^28.3.0",
         "@modular-css/processor": "^28.1.4",
         "@rollup/pluginutils": "^4.1.2",
         "slash": "^3.0.0"
@@ -17733,7 +17734,7 @@
     "@modular-css/vite": {
       "version": "file:packages/vite",
       "requires": {
-        "@modular-css/css-to-js": "^28.2.3",
+        "@modular-css/css-to-js": "^28.3.0",
         "@modular-css/processor": "^28.1.4",
         "@rollup/pluginutils": "^4.1.2"
       }
@@ -17741,7 +17742,7 @@
     "@modular-css/webpack": {
       "version": "file:packages/webpack",
       "requires": {
-        "@modular-css/css-to-js": "^28.2.3",
+        "@modular-css/css-to-js": "^28.3.0",
         "@modular-css/processor": "^28.1.4"
       }
     },
@@ -20510,19 +20511,20 @@
       }
     },
     "eslint-plugin-svelte": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.7.0.tgz",
-      "integrity": "sha512-K43Eehm5Gal1GxeBjcUMuJRGLHtIwXmLiItNBApV4N1RQYknRh2gVPc6CsJsVlncCvyw6qvNsGX/db1v1PRdMw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.11.0.tgz",
+      "integrity": "sha512-VkSNNo+mKnSxsvTWSzdd5PYEjZfAnIg4+4xsoyK9XK8yJLD34VOpqlGaE8bK/Bfqr7Q3tIToqDVgWzrETVMDrA==",
       "dev": true,
       "requires": {
         "debug": "^4.3.1",
         "eslint-utils": "^3.0.0",
+        "esutils": "^2.0.3",
         "known-css-properties": "^0.25.0",
         "postcss": "^8.4.5",
         "postcss-load-config": "^3.1.4",
         "postcss-safe-parser": "^6.0.0",
         "sourcemap-codec": "^1.4.8",
-        "svelte-eslint-parser": "^0.18.0"
+        "svelte-eslint-parser": "^0.19.0"
       }
     },
     "eslint-scope": {
@@ -25325,12 +25327,12 @@
       }
     },
     "postcss-nested": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
-      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
       "dev": true,
       "requires": {
-        "postcss-selector-parser": "^6.0.6"
+        "postcss-selector-parser": "^6.0.10"
       }
     },
     "postcss-normalize-charset": {
@@ -27196,14 +27198,14 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
     "svelte": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA=="
+      "version": "3.52.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.52.0.tgz",
+      "integrity": "sha512-FxcnEUOAVfr10vDU5dVgJN19IvqeHQCS1zfe8vayTfis9A2t5Fhx+JDe5uv/C3j//bB1umpLJ6quhgs9xyUbCQ=="
     },
     "svelte-eslint-parser": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.18.1.tgz",
-      "integrity": "sha512-f7R9dT6l32O5DC2D9bFLfJjhwfTYZCLBPdR/5e5VOWDNhjTAudB3TL+apaJf+pKDUOfTdqjTqz/KrBjhny7TIQ==",
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.19.3.tgz",
+      "integrity": "sha512-16LDbse3BW3TXlLX6IXRLtywh5h9pMDEp7USc+nwLuyV6AFb/mSzSzbK5tJFXeeMf06uxWIxZjSkj5fcYRu+Hw==",
       "dev": true,
       "requires": {
         "eslint-scope": "^7.0.0",
diff --git a/package.json b/package.json
index 0f3f98ce..476c2f12 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "@changesets/changelog-github": "^0.4.5",
     "@changesets/cli": "^2.23.0",
     "@codemirror/state": "^0.19.6",
-    "@codemirror/view": "^0.20.7",
+    "@codemirror/view": "^6.4.0",
     "@modular-css/path-aliases": "^28.0.0",
     "@modular-css/processor": "^28.0.0",
     "@modular-css/shortnames": "^28.0.0",
@@ -61,7 +61,7 @@
     "p-defer": "^3.0.0",
     "peggy": "^2.0.0",
     "postcss": "^8.4.14",
-    "postcss-nested": "^5.0.6",
+    "postcss-nested": "^6.0.0",
     "read-dir-deep": "^7.0.1",
     "rollup": "^2.75.3",
     "rollup-plugin-hypothetical": "^2.1.1",
diff --git a/packages/css-to-js/CHANGELOG.md b/packages/css-to-js/CHANGELOG.md
index 195426dc..94758fea 100644
--- a/packages/css-to-js/CHANGELOG.md
+++ b/packages/css-to-js/CHANGELOG.md
@@ -1,5 +1,25 @@
 # Change Log
 
+## 28.4.0
+
+### Minor Changes
+
+- [#901](https://github.com/tivac/modular-css/pull/901) [`6070a76`](https://github.com/tivac/modular-css/commit/6070a7649a0a15cd47adafc087ddf900230171ca) Thanks [@plesiecki](https://github.com/plesiecki)! - Restore defaultExport support 
+
+  `defaultExport` got lost as an available option with the introduction of `@modular-css/css-to-js`, so @plesiecki was kind enough to bring it back.
+
+## 28.3.0
+
+### Minor Changes
+
+- [#901](https://github.com/tivac/modular-css/pull/901) [`02bc885`](https://github.com/tivac/modular-css/commit/02bc88570045be3e6e23adff5411b6ad1883d104) Thanks [@plesiecki](https://github.com/plesiecki)! - New option to change type of variable declaration — `variableDeclaration` which defaults to `const`. Can be set to `var` if necessary, e.g. ES5 support.
+
+## 28.2.4
+
+### Patch Changes
+
+- [#898](https://github.com/tivac/modular-css/pull/898) [`b1af909`](https://github.com/tivac/modular-css/commit/b1af909ceaa2dbc4b54c376b9ed5a14a824c6e89) Thanks [@plesiecki](https://github.com/plesiecki)! - Class ordering in `.css` files could lead to invalid identifiers being created, so always make sure every class defined in the `.css` file has a local JS identifier before building the string concatenation to represent composition.
+
 ## 28.2.3
 
 ### Patch Changes
diff --git a/packages/css-to-js/css-to-js.js b/packages/css-to-js/css-to-js.js
index f67dccec..c563b36c 100644
--- a/packages/css-to-js/css-to-js.js
+++ b/packages/css-to-js/css-to-js.js
@@ -14,11 +14,12 @@ const slash = (file) => file.replace(/\/|\\/g, "/");
 const DEFAULT_VALUES = "$values";
 
 const DEFAULTS = {
-    __proto__   : null,
-    dev         : false,
-    styleExport : false,
-
-    namedExports : {
+    __proto__           : null,
+    dev                 : false,
+    variableDeclaration : "const",
+    defaultExport       : true,
+    styleExport         : false,
+    namedExports        : {
         rewriteInvalid : true,
         warn           : true,
     },
@@ -66,6 +67,8 @@ exports.transform = (file, processor, opts = {}) => {
         warnOnInvalid = options.namedExports;
     }
 
+    const { variableDeclaration } = options;
+
     const { graph } = processor;
 
     const id = processor.normalize(file);
@@ -209,7 +212,7 @@ exports.transform = (file, processor, opts = {}) => {
 
         internalsMap.set(value, unique);
 
-        out.push(`const ${unique} = ${JSON.stringify(value)}`);
+        out.push(`${variableDeclaration} ${unique} = ${JSON.stringify(value)}`);
 
         valueExports.set(key, unique);
     });
@@ -217,7 +220,7 @@ exports.transform = (file, processor, opts = {}) => {
     if(valueExports.size) {
         const unique = deconflict(identifiers, DEFAULT_VALUES);
 
-        out.push(dedent(`const ${unique} = {
+        out.push(dedent(`${variableDeclaration} ${unique} = {
             ${[ ...valueExports ].map(prop).join(",\n")},
         };`));
 
@@ -227,13 +230,18 @@ exports.transform = (file, processor, opts = {}) => {
         namedExports.push(esm(unique, DEFAULT_VALUES));
     }
 
-    // Create vars representing exported classes & use them in local var definitions
+    // Collect local exports first
     exportedKeys.forEach((key) => {
-        const elements = [];
         const unique = deconflict(identifiers, key);
-        const sKey = selectorKey(id, key);
 
         internalsMap.set(key, unique);
+    });
+
+    // Create vars representing exported classes & use them in local var definitions
+    exportedKeys.forEach((key) => {
+        const elements = [];
+        const sKey = selectorKey(id, key);
+        const unique = internalsMap.get(key);
 
         // Build the list of composed classes for this class
         if(graph.hasNode(sKey)) {
@@ -250,7 +258,7 @@ exports.transform = (file, processor, opts = {}) => {
 
         elements.push(...details.classes[key].map((t) => JSON.stringify(t)));
 
-        out.push(`const ${unique} = ${elements.join(` + " " + `)}`);
+        out.push(`${variableDeclaration} ${unique} = ${elements.join(` + " " + `)}`);
 
         defaultExports.push([ key, unique ]);
 
@@ -287,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/css-to-js/package.json b/packages/css-to-js/package.json
index 9561f771..38cc6a0a 100644
--- a/packages/css-to-js/package.json
+++ b/packages/css-to-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modular-css/css-to-js",
-  "version": "28.2.3",
+  "version": "28.4.0",
   "description": "modular-css powered conversion of CSS to JavaScript",
   "main": "./css-to-js.js",
   "repository": {
diff --git a/packages/processor/processor.js b/packages/processor/processor.js
index 7be0d21b..70d8ae83 100644
--- a/packages/processor/processor.js
+++ b/packages/processor/processor.js
@@ -508,9 +508,7 @@ class Processor {
         this._addSelector(name, selector);
 
         refs.forEach(({ name : depSelector }) => {
-            const depSelectorId = this._addSelector(dep, depSelector);
-
-            graph.addDependency(selectorId, depSelectorId);
+            this._addSelector(dep, depSelector);
         });
     }
 
diff --git a/packages/rollup/CHANGELOG.md b/packages/rollup/CHANGELOG.md
index f1e90fd2..4748b50e 100644
--- a/packages/rollup/CHANGELOG.md
+++ b/packages/rollup/CHANGELOG.md
@@ -1,5 +1,30 @@
 # Change Log
 
+## 28.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`6211b85`](https://github.com/tivac/modular-css/commit/6211b859abf83f95ffcce0d741d9e82628f97eb5)]:
+  - @modular-css/css-to-js@28.4.0
+
+## 28.3.0
+
+### Minor Changes
+
+- [#901](https://github.com/tivac/modular-css/pull/901) [`02bc885`](https://github.com/tivac/modular-css/commit/02bc88570045be3e6e23adff5411b6ad1883d104) Thanks [@plesiecki](https://github.com/plesiecki)! - New option to change type of variable declaration — `variableDeclaration` which defaults to `const`. Can be set to `var` if necessary, e.g. ES5 support.
+
+### Patch Changes
+
+- Updated dependencies [[`02bc885`](https://github.com/tivac/modular-css/commit/02bc88570045be3e6e23adff5411b6ad1883d104)]:
+  - @modular-css/css-to-js@28.3.0
+
+## 28.2.4
+
+### Patch Changes
+
+- Updated dependencies [[`b1af909`](https://github.com/tivac/modular-css/commit/b1af909ceaa2dbc4b54c376b9ed5a14a824c6e89)]:
+  - @modular-css/css-to-js@28.2.4
+
 ## 28.2.3
 
 ### Patch Changes
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/rollup/package.json b/packages/rollup/package.json
index a22caa83..71eb3537 100644
--- a/packages/rollup/package.json
+++ b/packages/rollup/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modular-css/rollup",
-  "version": "28.2.3",
+  "version": "28.3.1",
   "description": "Add modular-css support to rollup",
   "main": "./rollup.js",
   "repository": {
@@ -26,7 +26,7 @@
     "postcss"
   ],
   "dependencies": {
-    "@modular-css/css-to-js": "^28.2.3",
+    "@modular-css/css-to-js": "^28.4.0",
     "@modular-css/processor": "^28.1.4",
     "@rollup/pluginutils": "^4.1.2",
     "slash": "^3.0.0"
diff --git a/packages/vite/CHANGELOG.md b/packages/vite/CHANGELOG.md
index e769133f..b1d11b7b 100644
--- a/packages/vite/CHANGELOG.md
+++ b/packages/vite/CHANGELOG.md
@@ -1,5 +1,30 @@
 # Change Log
 
+## 29.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`6211b85`](https://github.com/tivac/modular-css/commit/6211b859abf83f95ffcce0d741d9e82628f97eb5)]:
+  - @modular-css/css-to-js@28.4.0
+
+## 29.1.0
+
+### Minor Changes
+
+- [#901](https://github.com/tivac/modular-css/pull/901) [`02bc885`](https://github.com/tivac/modular-css/commit/02bc88570045be3e6e23adff5411b6ad1883d104) Thanks [@plesiecki](https://github.com/plesiecki)! - New option to change type of variable declaration — `variableDeclaration` which defaults to `const`. Can be set to `var` if necessary, e.g. ES5 support.
+
+### Patch Changes
+
+- Updated dependencies [[`02bc885`](https://github.com/tivac/modular-css/commit/02bc88570045be3e6e23adff5411b6ad1883d104)]:
+  - @modular-css/css-to-js@28.3.0
+
+## 29.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`b1af909`](https://github.com/tivac/modular-css/commit/b1af909ceaa2dbc4b54c376b9ed5a14a824c6e89)]:
+  - @modular-css/css-to-js@28.2.4
+
 ## 29.0.1
 
 ### Patch Changes
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/vite/package.json b/packages/vite/package.json
index c699b5e5..939daa59 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modular-css/vite",
-  "version": "29.0.1",
+  "version": "29.1.1",
   "description": "vite support for modular-css",
   "main": "./vite.js",
   "repository": {
@@ -26,7 +26,7 @@
     "postcss"
   ],
   "dependencies": {
-    "@modular-css/css-to-js": "^28.2.3",
+    "@modular-css/css-to-js": "^28.4.0",
     "@modular-css/processor": "^28.1.4",
     "@rollup/pluginutils": "^4.1.2"
   },
diff --git a/packages/webpack/CHANGELOG.md b/packages/webpack/CHANGELOG.md
index 4b5414f1..cc7f91ff 100644
--- a/packages/webpack/CHANGELOG.md
+++ b/packages/webpack/CHANGELOG.md
@@ -1,5 +1,30 @@
 # Change Log
 
+## 28.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`6211b85`](https://github.com/tivac/modular-css/commit/6211b859abf83f95ffcce0d741d9e82628f97eb5)]:
+  - @modular-css/css-to-js@28.4.0
+
+## 28.3.0
+
+### Minor Changes
+
+- [#901](https://github.com/tivac/modular-css/pull/901) [`02bc885`](https://github.com/tivac/modular-css/commit/02bc88570045be3e6e23adff5411b6ad1883d104) Thanks [@plesiecki](https://github.com/plesiecki)! - New option to change type of variable declaration — `variableDeclaration` which defaults to `const`. Can be set to `var` if necessary, e.g. ES5 support.
+
+### Patch Changes
+
+- Updated dependencies [[`02bc885`](https://github.com/tivac/modular-css/commit/02bc88570045be3e6e23adff5411b6ad1883d104)]:
+  - @modular-css/css-to-js@28.3.0
+
+## 28.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`b1af909`](https://github.com/tivac/modular-css/commit/b1af909ceaa2dbc4b54c376b9ed5a14a824c6e89)]:
+  - @modular-css/css-to-js@28.2.4
+
 ## 28.2.4
 
 ### Patch Changes
diff --git a/packages/webpack/README.md b/packages/webpack/README.md
index 8d19b4e7..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
 ...
@@ -82,7 +82,47 @@ You can enable returning the style string, eg `import { styles } from "./style.c
             use  : {
                 loader  : "@modular-css/webpack/loader",
                 options : {
-                    styleExport : true
+                    styleExport : true,
+                }
+            }
+        }]
+    },
+...
+```
+
+#### `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`.
+
+```js
+...
+    module : {
+        rules : [{
+            test : /\.css$/,
+            use  : {
+                loader  : "@modular-css/webpack/loader",
+                options : {
+                    variableDeclaration : "var",
                 }
             }
         }]
diff --git a/packages/webpack/package.json b/packages/webpack/package.json
index 590a6761..1231131d 100644
--- a/packages/webpack/package.json
+++ b/packages/webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modular-css/webpack",
-  "version": "28.2.4",
+  "version": "28.3.1",
   "description": "Webpack support for modular-css",
   "main": "./plugin.js",
   "loader": "./loader.js",
@@ -31,7 +31,7 @@
     "webpack": "^5.0.0"
   },
   "dependencies": {
-    "@modular-css/css-to-js": "^28.2.3",
+    "@modular-css/css-to-js": "^28.4.0",
     "@modular-css/processor": "^28.1.4"
   }
 }


Test patch:
diff --git a/packages/browserify/test/__snapshots__/issue-58.test.js.snap b/packages/browserify/test/__snapshots__/issue-58.test.js.snap
index 7c50c480..022f73d4 100644
--- a/packages/browserify/test/__snapshots__/issue-58.test.js.snap
+++ b/packages/browserify/test/__snapshots__/issue-58.test.js.snap
@@ -6,7 +6,7 @@ require('./packages/browserify/test/output/issues/58/issue.css');
 },{\\"./packages/browserify/test/output/issues/58/issue.css\\":2}],2:[function(require,module,exports){
 module.exports = {
     \\"issue1\\": \\"mce821a830_other1 mc2a3f7922_issue1\\",
-    \\"issue2\\": \\"mce821a830_other3 mce821a830_other1 mc2a3f7922_issue1 mc2a3f7922_issue2\\",
+    \\"issue2\\": \\"mce821a830_other1 mc2a3f7922_issue1 mce821a830_other3 mc2a3f7922_issue2\\",
     \\"$values\\": {}
 };
 },{\\"./packages/browserify/test/output/issues/58/other.css\\":3}],3:[function(require,module,exports){
@@ -26,7 +26,7 @@ require('./packages/browserify/test/output/issues/58/issue.css');
 },{\\"./packages/browserify/test/output/issues/58/issue.css\\":2}],2:[function(require,module,exports){
 module.exports = {
     \\"issue1\\": \\"mce821a830_other1 mc2a3f7922_issue1\\",
-    \\"issue2\\": \\"mce821a830_other2 mce821a830_other3 mce821a830_other1 mc2a3f7922_issue1 mc2a3f7922_issue2\\",
+    \\"issue2\\": \\"mce821a830_other1 mc2a3f7922_issue1 mce821a830_other2 mce821a830_other3 mc2a3f7922_issue2\\",
     \\"$values\\": {}
 };
 },{}]},{},[1]);
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 efe33749..7ac38e14 100644
--- a/packages/css-to-js/test/__snapshots__/api.test.js.snap
+++ b/packages/css-to-js/test/__snapshots__/api.test.js.snap
@@ -43,6 +43,51 @@ Array [
 ]
 `;
 
+exports[`@modular-css/css-to-js API should generate javascript from composes: code 1`] = `
+const custom = "mca72bf2bd_custom"
+const rule = custom + " " + "mca72bf2bd_rule"
+export default {
+    custom,
+rule
+};
+
+export {
+    custom,
+rule
+};
+`;
+
+exports[`@modular-css/css-to-js API should generate javascript from multiple composes: code 1`] = `
+const rule = custom + " " + "mc9c938a76_rule"
+const custom = "mc9c938a76_custom"
+export default {
+    rule,
+custom
+};
+
+export {
+    rule,
+custom
+};
+`;
+
+exports[`@modular-css/css-to-js API should generate javascript with var variable statements: code 1`] = `
+var str = "\\"string\\""
+var $values = {
+    str,
+};
+var fooga = "mce1ef44f3_fooga"
+export default {
+    $values,
+fooga
+};
+
+export {
+    $values,
+fooga
+};
+`;
+
 exports[`@modular-css/css-to-js API should generate javascript: code 1`] = `
 const a = "mc74f3fa7b_a"
 export default {
@@ -168,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 91e55712..61188d9a 100644
--- a/packages/css-to-js/test/api.test.js
+++ b/packages/css-to-js/test/api.test.js
@@ -20,10 +20,7 @@ expect.addSnapshotSerializer({
 });
 
 const resolvers = [
-    (src, file) =>
-        // console.log({ src, file, result : path.join(path.dirname(src), file) });
-        
-         path.join(path.dirname(src), file),
+    (src, file) => path.join(path.dirname(src), file),
 ];
 
 describe("@modular-css/css-to-js API", () => {
@@ -101,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 });
 
@@ -168,6 +176,37 @@ describe("@modular-css/css-to-js API", () => {
         expect(namedExports).toEqual([ "$values", "b" ]);
     });
 
+
+    it("should generate javascript from composes", async () => {
+        const processor = new Processor({ resolvers });
+
+        await processor.file(require.resolve("./specimens/composes/custom-first-rule.css"));
+
+        const { code } = transform(require.resolve("./specimens/composes/custom-first-rule.css"), processor);
+
+        expect(code).toMatchSnapshot("code");
+    });
+
+    it("should generate javascript from multiple composes", async () => {
+        const processor = new Processor({ resolvers });
+
+        await processor.file(require.resolve("./specimens/composes/custom-between-rules.css"));
+
+        const { code } = transform(require.resolve("./specimens/composes/custom-between-rules.css"), processor);
+
+        expect(code).toMatchSnapshot("code");
+    });
+
+    it("should generate javascript with var variable statements", async () => {
+        const processor = new Processor({ resolvers });
+
+        await processor.file(require.resolve("./specimens/simple.css"));
+
+        const { code } = transform(require.resolve("./specimens/simple.css"), processor, { variableDeclaration : "var" });
+
+        expect(code).toMatchSnapshot("code");
+    });
+
     it.each([
         true,
         false,
diff --git a/packages/css-to-js/test/specimens/composes/custom-between-rules.css b/packages/css-to-js/test/specimens/composes/custom-between-rules.css
new file mode 100644
index 00000000..6ff3bc1e
--- /dev/null
+++ b/packages/css-to-js/test/specimens/composes/custom-between-rules.css
@@ -0,0 +1,9 @@
+.rule { 
+  display: flex;
+}
+.custom {
+  color: pink;
+}
+.rule {
+  composes: custom;
+}
\ No newline at end of file
diff --git a/packages/css-to-js/test/specimens/composes/custom-first-rule.css b/packages/css-to-js/test/specimens/composes/custom-first-rule.css
new file mode 100644
index 00000000..06d4b861
--- /dev/null
+++ b/packages/css-to-js/test/specimens/composes/custom-first-rule.css
@@ -0,0 +1,9 @@
+.custom {
+  color: pink;
+}
+.rule { 
+  display: flex;
+}
+.rule {
+  composes: custom;
+}
\ No newline at end of file
diff --git a/packages/processor/test/__snapshots__/api.test.js.snap b/packages/processor/test/__snapshots__/api.test.js.snap
index fe720d3a..6c17fb95 100644
--- a/packages/processor/test/__snapshots__/api.test.js.snap
+++ b/packages/processor/test/__snapshots__/api.test.js.snap
@@ -227,14 +227,36 @@ exports[`/processor.js API .output() should generate css representing the output
 `;
 
 exports[`/processor.js API .output() should order output by dependencies, then alphabetically 1`] = `
-"/* packages/processor/test/specimens/folder/folder.css */
+"/* packages/processor/test/specimens/deps/classes.css */
+.mc_red {
+    color: red;
+}
+
+.mc_blue {
+    color: blue;
+}
+
+.mc_green {
+    color: green;
+}
+
+.mc_yellow {
+    color: yellow;
+}
+
+.mc_block {
+    display: block;
+}
+
+.mc_flex {
+    display: flex;
+}
+
+/* packages/processor/test/specimens/folder/folder.css */
 .mc_folder { margin: 2px; }
-/* packages/processor/test/specimens/folder/folder2.css */
-.mc_folder2 { color: green; }
-.mc_foo { display: block; }
 /* packages/processor/test/specimens/folder/subfolder/subfolder.css */
 .mc_subfolder { color: yellow; }
-/* packages/processor/test/specimens/composes.css */
+/* packages/processor/test/specimens/composes/external-composes-multiple-declarations.css */
 /* packages/processor/test/specimens/deep.css */
 .mc_deep {
     color: black;
diff --git a/packages/processor/test/__snapshots__/composition.test.js.snap b/packages/processor/test/__snapshots__/composition.test.js.snap
index 71070751..2351f06f 100644
--- a/packages/processor/test/__snapshots__/composition.test.js.snap
+++ b/packages/processor/test/__snapshots__/composition.test.js.snap
@@ -33,6 +33,20 @@ Object {
 }
 `;
 
+exports[`/processor.js composition should compose a single class (multi-rule dependent class) 1`] = `
+Object {
+  "single-composes.css": Object {
+    "a": Array [
+      "mc_b",
+      "mc_a",
+    ],
+    "b": Array [
+      "mc_b",
+    ],
+  },
+}
+`;
+
 exports[`/processor.js composition should compose a single class 1`] = `
 Object {
   "single-composes.css": Object {
@@ -71,21 +85,222 @@ Object {
 }
 `;
 
+exports[`/processor.js composition should compose from other files and locally 1`] = `
+Object {
+  "packages/processor/test/specimens/composes/external-second-and-local-first-composes.css": Object {
+    "custom": Array [
+      "mc_custom",
+    ],
+    "externalComposeRule": Array [
+      "mc_custom",
+      "mc_red",
+      "mc_externalComposeRule",
+    ],
+  },
+  "packages/processor/test/specimens/deps/classes.css": Object {
+    "block": Array [
+      "mc_block",
+    ],
+    "blue": Array [
+      "mc_blue",
+    ],
+    "flex": Array [
+      "mc_flex",
+    ],
+    "green": Array [
+      "mc_green",
+    ],
+    "red": Array [
+      "mc_red",
+    ],
+    "yellow": Array [
+      "mc_yellow",
+    ],
+  },
+}
+`;
+
 exports[`/processor.js composition should compose from other files in multiple declarations 1`] = `
 Object {
-  "packages/processor/test/specimens/composes2.css": Object {
-    "composes": Array [
-      "mc_folder2",
-      "mc_foo",
-      "mc_composes",
+  "packages/processor/test/specimens/composes/external-composes-multiple-declarations.css": Object {
+    "ruleWithComposes": Array [
+      "mc_red",
+      "mc_blue",
+      "mc_ruleWithComposes",
+    ],
+  },
+  "packages/processor/test/specimens/deps/classes.css": Object {
+    "block": Array [
+      "mc_block",
+    ],
+    "blue": Array [
+      "mc_blue",
+    ],
+    "flex": Array [
+      "mc_flex",
+    ],
+    "green": Array [
+      "mc_green",
+    ],
+    "red": Array [
+      "mc_red",
+    ],
+    "yellow": Array [
+      "mc_yellow",
+    ],
+  },
+}
+`;
+
+exports[`/processor.js composition should compose from other files in multiple declarations via local compose 1`] = `
+Object {
+  "packages/processor/test/specimens/composes/external-compose-via-local-compose.css": Object {
+    "nextRuleWithLocalComposes": Array [
+      "mc_red",
+      "mc_ruleWithSingleCompose",
+      "mc_blue",
+      "mc_nextRuleWithLocalComposes",
+    ],
+    "ruleWithLocalComposes": Array [
+      "mc_red",
+      "mc_ruleWithSingleCompose",
+      "mc_blue",
+      "mc_ruleWithLocalComposes",
+    ],
+    "ruleWithSingleCompose": Array [
+      "mc_red",
+      "mc_ruleWithSingleCompose",
     ],
   },
-  "packages/processor/test/specimens/folder/folder2.css": Object {
-    "folder2": Array [
-      "mc_folder2",
+  "packages/processor/test/specimens/deps/classes.css": Object {
+    "block": Array [
+      "mc_block",
+    ],
+    "blue": Array [
+      "mc_blue",
     ],
-    "foo": Array [
-      "mc_foo",
+    "flex": Array [
+      "mc_flex",
+    ],
+    "green": Array [
+      "mc_green",
+    ],
+    "red": Array [
+      "mc_red",
+    ],
+    "yellow": Array [
+      "mc_yellow",
+    ],
+  },
+}
+`;
+
+exports[`/processor.js composition should compose from other files in multiple declarations via local compose 2 1`] = `
+Object {
+  "packages/processor/test/specimens/composes/external-compose-via-local-compose2.css": Object {
+    "ruleWithLocalComposes": Array [
+      "mc_blue",
+      "mc_red",
+      "mc_ruleWithSingleCompose",
+      "mc_ruleWithLocalComposes",
+    ],
+    "ruleWithSingleCompose": Array [
+      "mc_red",
+      "mc_ruleWithSingleCompose",
+    ],
+  },
+  "packages/processor/test/specimens/deps/classes.css": Object {
+    "block": Array [
+      "mc_block",
+    ],
+    "blue": Array [
+      "mc_blue",
+    ],
+    "flex": Array [
+      "mc_flex",
+    ],
+    "green": Array [
+      "mc_green",
+    ],
+    "red": Array [
+      "mc_red",
+    ],
+    "yellow": Array [
+      "mc_yellow",
+    ],
+  },
+}
+`;
+
+exports[`/processor.js composition should compose from other files in multiple declarations via local compose 3 1`] = `
+Object {
+  "packages/processor/test/specimens/composes/external-compose-via-local-compose3.css": Object {
+    "ruleWithLocalComposes": Array [
+      "mc_red",
+      "mc_ruleWithSingleCompose",
+      "mc_blue",
+      "mc_ruleWithLocalComposes",
+    ],
+    "ruleWithSingleCompose": Array [
+      "mc_red",
+      "mc_ruleWithSingleCompose",
+    ],
+  },
+  "packages/processor/test/specimens/deps/classes.css": Object {
+    "block": Array [
+      "mc_block",
+    ],
+    "blue": Array [
+      "mc_blue",
+    ],
+    "flex": Array [
+      "mc_flex",
+    ],
+    "green": Array [
+      "mc_green",
+    ],
+    "red": Array [
+      "mc_red",
+    ],
+    "yellow": Array [
+      "mc_yellow",
+    ],
+  },
+}
+`;
+
+exports[`/processor.js composition should compose from other files in multiple declarations via local compose 4 1`] = `
+Object {
+  "packages/processor/test/specimens/composes/external-compose-via-local-compose4.css": Object {
+    "ruleWithLocalComposes": Array [
+      "mc_blue",
+      "mc_red",
+      "mc_ruleWithSingleCompose",
+      "mc_ruleWithLocalComposes",
+    ],
+    "ruleWithSingleCompose": Array [
+      "mc_red",
+      "mc_ruleWithSingleCompose",
+    ],
+  },
+  "packages/processor/test/specimens/deps/classes.css": Object {
+    "block": Array [
+      "mc_block",
+    ],
+    "blue": Array [
+      "mc_blue",
+    ],
+    "flex": Array [
+      "mc_flex",
+    ],
+    "green": Array [
+      "mc_green",
+    ],
+    "red": Array [
+      "mc_red",
+    ],
+    "yellow": Array [
+      "mc_yellow",
     ],
   },
 }
@@ -93,19 +308,84 @@ Object {
 
 exports[`/processor.js composition should compose from other files in single declaration 1`] = `
 Object {
-  "packages/processor/test/specimens/composes.css": Object {
-    "composes": Array [
-      "mc_folder2",
-      "mc_foo",
-      "mc_composes",
+  "packages/processor/test/specimens/composes/external-composes-single-declaration.css": Object {
+    "ruleWithComposes": Array [
+      "mc_red",
+      "mc_blue",
+      "mc_ruleWithComposes",
     ],
   },
-  "packages/processor/test/specimens/folder/folder2.css": Object {
-    "folder2": Array [
-      "mc_folder2",
+  "packages/processor/test/specimens/deps/classes.css": Object {
+    "block": Array [
+      "mc_block",
+    ],
+    "blue": Array [
+      "mc_blue",
+    ],
+    "flex": Array [
+      "mc_flex",
+    ],
+    "green": Array [
+      "mc_green",
+    ],
+    "red": Array [
+      "mc_red",
+    ],
+    "yellow": Array [
+      "mc_yellow",
     ],
-    "foo": Array [
-      "mc_foo",
+  },
+}
+`;
+
+exports[`/processor.js composition should compose locally and from other files 1`] = `
+Object {
+  "packages/processor/test/specimens/composes/external-first-and-local-second-composes.css": Object {
+    "custom": Array [
+      "mc_custom",
+    ],
+    "externalComposeRule": Array [
+      "mc_red",
+      "mc_custom",
+      "mc_externalComposeRule",
+    ],
+  },
+  "packages/processor/test/specimens/deps/classes.css": Object {
+    "block": Array [
+      "mc_block",
+    ],
+    "blue": Array [
+      "mc_blue",
+    ],
+    "flex": Array [
+      "mc_flex",
+    ],
+    "green": Array [
+      "mc_green",
+    ],
+    "red": Array [
+      "mc_red",
+    ],
+    "yellow": Array [
+      "mc_yellow",
+    ],
+  },
+}
+`;
+
+exports[`/processor.js composition should compose multiple classes (multi-rule dependent class) 1`] = `
+Object {
+  "multiple-composes.css": Object {
+    "a": Array [
+      "mc_a",
+    ],
+    "b": Array [
+      "mc_a",
+      "mc_c",
+      "mc_b",
+    ],
+    "c": Array [
+      "mc_c",
     ],
   },
 }
diff --git a/packages/processor/test/api.test.js b/packages/processor/test/api.test.js
index 2ffa8a93..078cd2d5 100644
--- a/packages/processor/test/api.test.js
+++ b/packages/processor/test/api.test.js
@@ -287,7 +287,7 @@ describe("/processor.js", () => {
             it("should order output by dependencies, then alphabetically", async () => {
                 await processor.file("./packages/processor/test/specimens/start.css");
                 await processor.file("./packages/processor/test/specimens/local.css");
-                await processor.file("./packages/processor/test/specimens/composes.css");
+                await processor.file("./packages/processor/test/specimens/composes/external-composes-multiple-declarations.css");
                 await processor.file("./packages/processor/test/specimens/deep.css");
 
                 const result = await processor.output();
diff --git a/packages/processor/test/composition.test.js b/packages/processor/test/composition.test.js
index 12392e1b..1c491ad0 100644
--- a/packages/processor/test/composition.test.js
+++ b/packages/processor/test/composition.test.js
@@ -1,3 +1,4 @@
+/* eslint-disable max-statements -- let it go */
 "use strict";
 
 const path = require("path");
@@ -52,8 +53,8 @@ describe("/processor.js", () => {
                 ],
             });
 
-            await expect(processor.file(require.resolve("./specimens/composes.css"))).rejects.toThrow(
-                `no such file or directory, open '${require.resolve("./specimens/folder/folder2.css")}a'`
+            await expect(processor.file(require.resolve("./specimens/composes/external-composes-single-declaration.css"))).rejects.toThrow(
+                `no such file or directory, open '${require.resolve("./specimens/deps/classes.css")}a'`
             );
         });
 
@@ -81,6 +82,21 @@ describe("/processor.js", () => {
             expect(compositions).toMatchSnapshot();
         });
 
+        it("should compose a single class (multi-rule dependent class)", async () => {
+            await processor.string(
+                "./single-composes.css",
+                dedent(`
+                    .a { color: red; }
+                    .b { color: red; }
+                    .a { composes: b; }
+                `)
+            );
+
+            const { compositions } = await processor.output();
+
+            expect(compositions).toMatchSnapshot();
+        });
+
         it("should allow comments before composes", async () => {
             await processor.string(
                 "./multiple-composes.css",
@@ -182,8 +198,24 @@ describe("/processor.js", () => {
             expect(compositions).toMatchSnapshot();
         });
 
+        it("should compose multiple classes (multi-rule dependent class)", async () => {
+            await processor.string(
+                "./multiple-composes.css",
+                dedent(`
+                    .a { color: red; }
+                    .b { composes: a; }
+                    .c { color: blue; }
+                    .b { composes: c; }
+                `)
+            );
+
+            const { compositions } = await processor.output();
+
+            expect(compositions).toMatchSnapshot();
+        });
+
         it("should compose from other files in single declaration", async () => {
-            await processor.file(require.resolve("./specimens/composes.css"));
+            await processor.file(require.resolve("./specimens/composes/external-composes-single-declaration.css"));
 
             const { compositions } = await processor.output();
 
@@ -191,7 +223,55 @@ describe("/processor.js", () => {
         });
 
         it("should compose from other files in multiple declarations", async () => {
-            await processor.file(require.resolve("./specimens/composes2.css"));
+            await processor.file(require.resolve("./specimens/composes/external-composes-multiple-declarations.css"));
+
+            const { compositions } = await processor.output();
+
+            expect(compositions).toMatchSnapshot();
+        });
+
+        it("should compose locally and from other files", async () => {
+            await processor.file(require.resolve("./specimens/composes/external-first-and-local-second-composes.css"));
+
+            const { compositions } = await processor.output();
+
+            expect(compositions).toMatchSnapshot();
+        });
+
+        it("should compose from other files and locally", async () => {
+            await processor.file(require.resolve("./specimens/composes/external-second-and-local-first-composes.css"));
+
+            const { compositions } = await processor.output();
+
+            expect(compositions).toMatchSnapshot();
+        });
+
+        it("should compose from other files in multiple declarations via local compose", async () => {
+            await processor.file(require.resolve("./specimens/composes/external-compose-via-local-compose.css"));
+
+            const { compositions } = await processor.output();
+
+            expect(compositions).toMatchSnapshot();
+        });
+
+        it("should compose from other files in multiple declarations via local compose 2", async () => {
+            await processor.file(require.resolve("./specimens/composes/external-compose-via-local-compose2.css"));
+
+            const { compositions } = await processor.output();
+
+            expect(compositions).toMatchSnapshot();
+        });
+
+        it("should compose from other files in multiple declarations via local compose 3", async () => {
+            await processor.file(require.resolve("./specimens/composes/external-compose-via-local-compose3.css"));
+
+            const { compositions } = await processor.output();
+
+            expect(compositions).toMatchSnapshot();
+        });
+
+        it("should compose from other files in multiple declarations via local compose 4", async () => {
+            await processor.file(require.resolve("./specimens/composes/external-compose-via-local-compose4.css"));
 
             const { compositions } = await processor.output();
 
diff --git a/packages/processor/test/specimens/composes.css b/packages/processor/test/specimens/composes.css
deleted file mode 100644
index a21cf596..00000000
--- a/packages/processor/test/specimens/composes.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.composes {
-    composes: folder2, foo from "./folder/folder2.css";
-}
diff --git a/packages/processor/test/specimens/composes/external-compose-via-local-compose.css b/packages/processor/test/specimens/composes/external-compose-via-local-compose.css
new file mode 100644
index 00000000..73d61ccf
--- /dev/null
+++ b/packages/processor/test/specimens/composes/external-compose-via-local-compose.css
@@ -0,0 +1,16 @@
+.ruleWithSingleCompose {
+    composes: red from "../deps/classes.css";
+}
+
+.ruleWithLocalComposes {
+    composes: ruleWithSingleCompose;
+    composes: blue from "../deps/classes.css";
+}
+
+.nextRuleWithLocalComposes {
+    composes: ruleWithSingleCompose;
+}
+
+.nextRuleWithLocalComposes {
+    composes: blue from "../deps/classes.css";
+}
\ No newline at end of file
diff --git a/packages/processor/test/specimens/composes/external-compose-via-local-compose2.css b/packages/processor/test/specimens/composes/external-compose-via-local-compose2.css
new file mode 100644
index 00000000..51853cff
--- /dev/null
+++ b/packages/processor/test/specimens/composes/external-compose-via-local-compose2.css
@@ -0,0 +1,8 @@
+.ruleWithSingleCompose {
+    composes: red from "../deps/classes.css";
+}
+
+.ruleWithLocalComposes {
+    composes: blue from "../deps/classes.css";
+    composes: ruleWithSingleCompose;
+}
diff --git a/packages/processor/test/specimens/composes/external-compose-via-local-compose3.css b/packages/processor/test/specimens/composes/external-compose-via-local-compose3.css
new file mode 100644
index 00000000..3c67332a
--- /dev/null
+++ b/packages/processor/test/specimens/composes/external-compose-via-local-compose3.css
@@ -0,0 +1,11 @@
+.ruleWithSingleCompose {
+    composes: red from "../deps/classes.css";
+}
+
+.ruleWithLocalComposes {
+    composes: ruleWithSingleCompose;
+}
+
+.ruleWithLocalComposes {
+    composes: blue from "../deps/classes.css";
+}
diff --git a/packages/processor/test/specimens/composes/external-compose-via-local-compose4.css b/packages/processor/test/specimens/composes/external-compose-via-local-compose4.css
new file mode 100644
index 00000000..19643739
--- /dev/null
+++ b/packages/processor/test/specimens/composes/external-compose-via-local-compose4.css
@@ -0,0 +1,11 @@
+.ruleWithSingleCompose {
+    composes: red from "../deps/classes.css";
+}
+
+.ruleWithLocalComposes {
+    composes: blue from "../deps/classes.css";
+}
+
+.ruleWithLocalComposes {
+    composes: ruleWithSingleCompose;
+}
diff --git a/packages/processor/test/specimens/composes/external-composes-multiple-declarations.css b/packages/processor/test/specimens/composes/external-composes-multiple-declarations.css
new file mode 100644
index 00000000..ec9146aa
--- /dev/null
+++ b/packages/processor/test/specimens/composes/external-composes-multiple-declarations.css
@@ -0,0 +1,4 @@
+.ruleWithComposes {
+    composes: red from "../deps/classes.css";
+    composes: blue from "../deps/classes.css";
+}
diff --git a/packages/processor/test/specimens/composes/external-composes-single-declaration.css b/packages/processor/test/specimens/composes/external-composes-single-declaration.css
new file mode 100644
index 00000000..28584a97
--- /dev/null
+++ b/packages/processor/test/specimens/composes/external-composes-single-declaration.css
@@ -0,0 +1,3 @@
+.ruleWithComposes {
+    composes: red, blue from "../deps/classes.css";
+}
diff --git a/packages/processor/test/specimens/composes/external-first-and-local-second-composes.css b/packages/processor/test/specimens/composes/external-first-and-local-second-composes.css
new file mode 100644
index 00000000..4666e7ed
--- /dev/null
+++ b/packages/processor/test/specimens/composes/external-first-and-local-second-composes.css
@@ -0,0 +1,11 @@
+.custom {
+    color: red;
+}
+
+.externalComposeRule {
+    composes: red from "../deps/classes.css";
+}
+
+.externalComposeRule {
+    composes: custom;
+}
\ No newline at end of file
diff --git a/packages/processor/test/specimens/composes/external-second-and-local-first-composes.css b/packages/processor/test/specimens/composes/external-second-and-local-first-composes.css
new file mode 100644
index 00000000..f69cafc5
--- /dev/null
+++ b/packages/processor/test/specimens/composes/external-second-and-local-first-composes.css
@@ -0,0 +1,11 @@
+.custom {
+    color: red;
+}
+
+.externalComposeRule {
+    composes: custom;
+}
+
+.externalComposeRule {
+    composes: red from "../deps/classes.css";
+}
diff --git a/packages/processor/test/specimens/composes2.css b/packages/processor/test/specimens/composes2.css
deleted file mode 100644
index 64fef22f..00000000
--- a/packages/processor/test/specimens/composes2.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.composes {
-    composes: folder2 from "./folder/folder2.css";
-    composes: foo from "./folder/folder2.css";
-}
diff --git a/packages/processor/test/specimens/deps/classes.css b/packages/processor/test/specimens/deps/classes.css
new file mode 100644
index 00000000..253050d9
--- /dev/null
+++ b/packages/processor/test/specimens/deps/classes.css
@@ -0,0 +1,23 @@
+.red {
+    color: red;
+}
+
+.blue {
+    color: blue;
+}
+
+.green {
+    color: green;
+}
+
+.yellow {
+    color: yellow;
+}
+
+.block {
+    display: block;
+}
+
+.flex {
+    display: flex;
+}
diff --git a/packages/processor/test/specimens/folder/folder2.css b/packages/processor/test/specimens/folder/folder2.css
deleted file mode 100644
index 294fb42c..00000000
--- a/packages/processor/test/specimens/folder/folder2.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.folder2 { color: green; }
-.foo { display: block; }
\ No newline at end of file
diff --git a/packages/svelte/test/__snapshots__/svelte.test.js.snap b/packages/svelte/test/__snapshots__/svelte.test.js.snap
index 837de96f..eb2fd392 100644
--- a/packages/svelte/test/__snapshots__/svelte.test.js.snap
+++ b/packages/svelte/test/__snapshots__/svelte.test.js.snap
@@ -10,7 +10,7 @@ Array [
 
 exports[`/svelte.js should extract CSS - <link> existing script 1`] = `
 "<div class=\\"mc_flex mc_wrapper\\">
-    <h1 class=\\"mc_fooga mc_flex mc_hd\\">Head</h1>
+    <h1 class=\\"mc_flex mc_fooga mc_hd\\">Head</h1>
     <div class=\\"mc_fooga mc_wooga mc_bd\\">
         <p class=\\"{bool ? \\"mc_text\\" : \\"mc_active\\" }\\">Text</p>
     </div>
@@ -61,7 +61,7 @@ exports[`/svelte.js should extract CSS - <link> existing script 2`] = `
 
 exports[`/svelte.js should extract CSS - <link> no script 1`] = `
 "<div class=\\"mc_flex mc_wrapper\\">
-    <h1 class=\\"mc_fooga mc_flex mc_hd\\">Head</h1>
+    <h1 class=\\"mc_flex mc_fooga mc_hd\\">Head</h1>
     <div class=\\"mc_fooga mc_wooga mc_bd\\">
         <p class=\\"{bool ? \\"mc_text\\" : \\"mc_active\\" }\\">Text</p>
     </div>
@@ -93,7 +93,7 @@ exports[`/svelte.js should extract CSS - <link> no script 2`] = `
 
 exports[`/svelte.js should extract CSS - <link> single quotes 1`] = `
 "<div class=\\"mc_flex mc_wrapper\\">
-    <h1 class=\\"mc_fooga mc_flex mc_hd\\">Head</h1>
+    <h1 class=\\"mc_flex mc_fooga mc_hd\\">Head</h1>
     <div class=\\"mc_fooga mc_wooga mc_bd\\">
         <p class=\\"{bool ? \\"mc_text\\" : \\"mc_active\\" }\\">Text</p>
     </div>
@@ -125,7 +125,7 @@ exports[`/svelte.js should extract CSS - <link> single quotes 2`] = `
 
 exports[`/svelte.js should extract CSS - <link> unquoted 1`] = `
 "<div class=\\"mc_flex mc_wrapper\\">
-    <h1 class=\\"mc_fooga mc_flex mc_hd\\">Head</h1>
+    <h1 class=\\"mc_flex mc_fooga mc_hd\\">Head</h1>
     <div class=\\"mc_fooga mc_wooga mc_bd\\">
         <p class=\\"{bool ? \\"mc_text\\" : \\"mc_active\\" }\\">Text</p>
     </div>
@@ -201,7 +201,7 @@ exports[`/svelte.js should extract CSS - <link> values 2`] = `
 
 exports[`/svelte.js should extract CSS - <script> 1`] = `
 "<div class=\\"mc_flex mc_wrapper\\">
-    <h1 class=\\"mc_fooga mc_flex mc_hd\\">Head</h1>
+    <h1 class=\\"mc_flex mc_fooga mc_hd\\">Head</h1>
     <div class=\\"mc_fooga mc_wooga mc_bd\\">
         <p class=\\"{bool ? \\"mc_text\\" : \\"mc_active\\" }\\">Text</p>
     </div>
@@ -239,7 +239,7 @@ exports[`/svelte.js should extract CSS - <script> 2`] = `
 
 exports[`/svelte.js should extract CSS - <style> 1`] = `
 "<div class=\\"mc_flex mc_wrapper\\">
-    <h1 class=\\"mc_fooga mc_flex mc_hd\\">Head</h1>
+    <h1 class=\\"mc_flex mc_fooga mc_hd\\">Head</h1>
     <div class=\\"mc_fooga mc_wooga mc_bd\\">
         <p class=\\"{bool ? \\"mc_text\\" : \\"mc_active\\" }\\">Text</p>
     </div>
@@ -279,7 +279,7 @@ exports[`/svelte.js should extract CSS - <style> 2`] = `
 
 exports[`/svelte.js should find imports in any <script> tag 1`] = `
 "<div class=\\"mc_flex mc_wrapper\\">
-    <h1 class=\\"mc_fooga mc_flex mc_hd\\">Head</h1>
+    <h1 class=\\"mc_flex mc_fooga mc_hd\\">Head</h1>
     <div class=\\"mc_fooga mc_wooga mc_bd\\">
         <p class=\\"{bool ? \\"mc_text\\" : \\"mc_active\\" }\\">Text</p>
     </div>
@@ -603,7 +603,7 @@ exports[`/svelte.js should ignore files without <style> blocks 2`] = `""`;
 
 exports[`/svelte.js should ignore imports that don't match the filter 1`] = `
 "<div class=\\"mc_flex mc_wrapper\\">
-    <h1 class=\\"mc_fooga mc_flex mc_hd\\">Head</h1>
+    <h1 class=\\"mc_flex mc_fooga mc_hd\\">Head</h1>
     <div class=\\"mc_fooga mc_wooga mc_bd\\">
         <p class=\\"{bool ? \\"mc_text\\" : \\"mc_active\\" }\\">Text</p>
     </div>