From ef9f90bc3609e859938633d6f6a107c79184f0c4 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 29 Jul 2022 23:40:12 +0530
Subject: [PATCH 1/4] Fix imports breaking on dev

---
 src/platform/web/theming/DerivedVariables.ts | 2 +-
 src/platform/web/theming/shared/color.mjs    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/platform/web/theming/DerivedVariables.ts b/src/platform/web/theming/DerivedVariables.ts
index 5a626bfa..92e5ac20 100644
--- a/src/platform/web/theming/DerivedVariables.ts
+++ b/src/platform/web/theming/DerivedVariables.ts
@@ -98,7 +98,7 @@ export class DerivedVariables {
     }
 }
 
-import pkg from "off-color";
+import * as pkg from "off-color";
 const {offColor} = pkg;
 
 export function tests() {
diff --git a/src/platform/web/theming/shared/color.mjs b/src/platform/web/theming/shared/color.mjs
index e777bfac..d4a15e56 100644
--- a/src/platform/web/theming/shared/color.mjs
+++ b/src/platform/web/theming/shared/color.mjs
@@ -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.
 */
-import pkg from 'off-color';
+import * as pkg from 'off-color';
 const offColor = pkg.offColor;
 
 export function derive(value, operation, argument, isDark) {

From ba8cdea6b477a8d5a1d499348d033fdcec7ae050 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 1 Aug 2022 13:30:17 +0530
Subject: [PATCH 2/4] Use default import if other not found

---
 src/platform/web/theming/DerivedVariables.ts | 2 +-
 src/platform/web/theming/shared/color.mjs    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/platform/web/theming/DerivedVariables.ts b/src/platform/web/theming/DerivedVariables.ts
index 92e5ac20..bc7a8346 100644
--- a/src/platform/web/theming/DerivedVariables.ts
+++ b/src/platform/web/theming/DerivedVariables.ts
@@ -99,7 +99,7 @@ export class DerivedVariables {
 }
 
 import * as pkg from "off-color";
-const {offColor} = pkg;
+const offColor = pkg.offColor ?? pkg.default.offColor;
 
 export function tests() {
     return {
diff --git a/src/platform/web/theming/shared/color.mjs b/src/platform/web/theming/shared/color.mjs
index d4a15e56..8af76b6b 100644
--- a/src/platform/web/theming/shared/color.mjs
+++ b/src/platform/web/theming/shared/color.mjs
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import * as pkg from 'off-color';
-const offColor = pkg.offColor;
+const offColor = pkg.offColor ?? pkg.default.offColor;
 
 export function derive(value, operation, argument, isDark) {
     const argumentAsNumber = parseInt(argument);

From 236a4ab49bac40a80503b2b610d2f8826a0ee1cb Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 1 Aug 2022 16:51:39 +0530
Subject: [PATCH 3/4] Ignore error

---
 src/platform/web/theming/DerivedVariables.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/platform/web/theming/DerivedVariables.ts b/src/platform/web/theming/DerivedVariables.ts
index bc7a8346..ca46a8fd 100644
--- a/src/platform/web/theming/DerivedVariables.ts
+++ b/src/platform/web/theming/DerivedVariables.ts
@@ -99,6 +99,7 @@ export class DerivedVariables {
 }
 
 import * as pkg from "off-color";
+// @ts-ignore 
 const offColor = pkg.offColor ?? pkg.default.offColor;
 
 export function tests() {

From 832597447accd0a04f6aec444ec8a64a1d82c90f Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 1 Aug 2022 17:00:56 +0530
Subject: [PATCH 4/4] Add explaining doc

---
 doc/IMPORT-ISSUES.md | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 doc/IMPORT-ISSUES.md

diff --git a/doc/IMPORT-ISSUES.md b/doc/IMPORT-ISSUES.md
new file mode 100644
index 00000000..d4bb62fe
--- /dev/null
+++ b/doc/IMPORT-ISSUES.md
@@ -0,0 +1,11 @@
+## How to import common-js dependency using ES6 syntax
+---
+Until [#6632](https://github.com/vitejs/vite/issues/6632) is fixed, such imports should be done as follows:
+
+```ts
+import * as pkg from "off-color";
+// @ts-ignore 
+const offColor = pkg.offColor ?? pkg.default.offColor;
+```
+
+This way build, dev server and unit tests should all work.