From 2b4a7f05a68fc8156f438a5fb1fa44b252bb369e Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Tue, 7 Jun 2022 23:41:45 -0500
Subject: [PATCH 1/2] Fix Vite not being able analyze dynamic CSS styles import
 in dev

Fix:
```
$ yarn start
[vite] warning:
@theme/default
1  |  import "C:\Users\MLM\Documents\GitHub\element\hydrogen-web\src\platform\web\ui\css\themes\element\theme.css";import "@theme/element/light/variables.css"
   |          ^
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: @theme/default
```

And in the browser, it results in none of the styles loading because of the following error:
```
Uncaught SyntaxError: Invalid Unicode escape sequence (at default:formatted:1:163)
```

---

Before:
```
import { injectQuery as __vite__injectQuery } from "/@vite/client";import "__vite__injectQuery(C:\Users\MLM\Documents\GitHub\element\hydrogen-web\src\platform\web\ui\css\themes\element\theme.css, 'import')";import "/@id/__x00__@theme/element/light/variables.css"
```

After:
```
import "/ui/css/themes/element/theme.css";import "/@id/__x00__@theme/element/light/variables.css"
```
---
 scripts/build-plugins/rollup-plugin-build-themes.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index da2db73b..429c8ccb 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-const path = require('path');
+const path = require('path').posix;
 
 async function readCSSSource(location) {
     const fs = require("fs").promises;
@@ -103,6 +103,7 @@ module.exports = function buildThemes(options) {
             if (isDevelopment) { return; }
             const { themeConfig } = options;
             for (const [name, location] of Object.entries(themeConfig.themes)) {
+                console.log('build', location);
                 manifest = require(`${location}/manifest.json`);
                 variants = manifest.values.variants;
                 for (const [variant, details] of Object.entries(variants)) {
@@ -142,6 +143,7 @@ module.exports = function buildThemes(options) {
 
         async load(id) {
             if (isDevelopment) {
+                //console.log('load', id);
                 /**
                  * To load the theme during dev, we need to take a different approach because emitFile is not supported in dev.
                  * We solve this by resolving virtual file "@theme/name/variant" into the necessary css import.

From 2cfd08e5003577b473fbc1110242a2ddc8dab8c2 Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Tue, 7 Jun 2022 23:47:38 -0500
Subject: [PATCH 2/2] Remove debug logging

---
 scripts/build-plugins/rollup-plugin-build-themes.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index 429c8ccb..edb36ec4 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -103,7 +103,6 @@ module.exports = function buildThemes(options) {
             if (isDevelopment) { return; }
             const { themeConfig } = options;
             for (const [name, location] of Object.entries(themeConfig.themes)) {
-                console.log('build', location);
                 manifest = require(`${location}/manifest.json`);
                 variants = manifest.values.variants;
                 for (const [variant, details] of Object.entries(variants)) {
@@ -143,7 +142,6 @@ module.exports = function buildThemes(options) {
 
         async load(id) {
             if (isDevelopment) {
-                //console.log('load', id);
                 /**
                  * To load the theme during dev, we need to take a different approach because emitFile is not supported in dev.
                  * We solve this by resolving virtual file "@theme/name/variant" into the necessary css import.