fix: 🔥 fix bugs from winidicss

okikio · May 4, 2021 · f71d692 · f71d692
1 parent 79bd0ff
commit f71d692
Show file tree

Hide file tree

Showing 10 changed files with 403 additions and 57 deletions.
diff --git a/docs/css/app.css b/docs/css/app.css
diff --git a/docs/css/playground.css b/docs/css/playground.css
diff --git a/docs/js/main.min.js b/docs/js/main.min.js
diff --git a/docs/js/main.min.js.map b/docs/js/main.min.js.map
diff --git a/gulpfile.js b/gulpfile.js
@@ -55,9 +55,6 @@ task("css", async () => {
 
         { default: scss },
         { default: sass },
-
-        { default: autoprefixer },
-        { default: csso },
     ] = await Promise.all([
         import("gulp-postcss"),
         import("tailwindcss"),
@@ -66,18 +63,15 @@ task("css", async () => {
 
         import("postcss-scss"),
         import("@csstools/postcss-sass"),
-
-        import("autoprefixer"),
-        import("postcss-csso"),
     ]);
 
     return stream(`${cssSrcFolder}/*.css`, {
         pipes: [
             // Minify scss to css
             postcss([
                 _import(),
-                tailwind("./tailwind.cjs"),
                 sass({ outputStyle: "compressed" }),
+                tailwind("./tailwind.cjs"),
             ], { syntax: scss }),
         ],
         dest: cssFolder,
@@ -248,7 +242,7 @@ task("watch", async () => {
     );
 
     watch(`${pugFolder}/**/*.pug`, series("html"));
-    watch([`${cssSrcFolder}/**/*.scss`, `./tailwind.cjs`], series("css"));
+    watch([`${cssSrcFolder}/**/*.css`, `./tailwind.cjs`], series("css"));
     watch(`${tsFolder}/**/*.ts`, series("js"));
 
     watch(

diff --git a/package.json b/package.json
@@ -30,10 +30,6 @@
         }
     },
     "dependencies": {
-        "@codemirror/basic-setup": "^0.18.0",
-        "@codemirror/commands": "^0.18.1",
-        "@codemirror/lang-javascript": "^0.18.0",
-        "@codemirror/view": "^0.18.11",
         "@uupaa/dynamic-import-polyfill": "^1.0.2",
         "assert": "^2.0.0",
         "buffer": "^6.0.3",
@@ -69,7 +65,7 @@
         "husky": "^6.0.0",
         "lodash-es": "^4.17.21",
         "plugin-error": "^1.0.1",
-        "pnpm": "^6.2.3",
+        "pnpm": "^6.2.5",
         "postcss": "^8.2.13",
         "postcss-advanced-variables": "^3.0.1",
         "postcss-cli": "^8.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css
@@ -1,6 +1,9 @@
 .navbar {
     @apply fixed top-0 left-0 w-full z-50;
-    @apply backdrop-filter backdrop-blur dark:backdrop-blur-md;
+
+    @supports (backdrop-filter: blur(5px)) {
+        @apply backdrop-filter backdrop-blur dark:backdrop-blur-md;
+    }
 
     .container {
         @apply sm:max-w-screen-lg px-5 h-full relative;
@@ -15,6 +18,13 @@
         @apply dark:bg-elevated;
     }
 
+    .navbar-bg,
+    &.shadow .navbar-bg {
+        @supports (backdrop-filter: blur(5px)) {
+            @apply dark:bg-opacity-60;
+        }
+    }
+
     .navbar-frame {
         @apply flex flex-wrap items-center justify-between relative;
         @apply w-full py-2;
@@ -62,10 +72,3 @@
         @apply bg-opacity-60;
     }
 }
-
-@supports (backdrop-filter: blur(5px)) {
-    .navbar-bg,
-    .navbar.shadow .navbar-bg {
-        @apply dark:bg-opacity-60;
-    }
-}
diff --git a/src/css/playground.css b/src/css/playground.css
@@ -1,6 +1,6 @@
 #app {
     @apply border border-gray-200 dark:border-transparent;
-    @apply overflow-hidden rounded-lg shadow-lg;
+    @apply rounded-lg shadow-lg;
     @apply bg-white;
     padding-top: 15px;
     height: 400px;

diff --git a/src/ts/modules/playground.ts b/src/ts/modules/playground.ts
@@ -1,5 +1,6 @@
 import { importShim } from "../util/dynamic-import";
-import { editor as Editor } from "monaco-editor";
+
+import { editor as Editor, languages } from "monaco-editor";
 import GithubLight from "../util/github-light";
 import GithubDark from "../util/github-dark";
 import { themeGet } from "../theme";
@@ -16,6 +17,24 @@ export const build = () => {
     let divEl = document.querySelector("#editor") as HTMLElement;
     let editor: Editor.IStandaloneCodeEditor;
 
+    // Compiler options
+    languages.typescript.typescriptDefaults.setCompilerOptions({
+        "moduleResolution": languages.typescript.ModuleResolutionKind.NodeJs,
+        "target": languages.typescript.ScriptTarget.ES2020,
+        "module": languages.typescript.ModuleKind.ES2015,
+        "lib": [
+            "ES2019",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "allowNonTsExtensions": true,
+        "esModuleInterop": true,
+        "noResolve": true
+    });
+
+
     // Since packaging is done by you, you need
     // to instruct the editor how you named the
     // bundles that contain the web workers.
@@ -45,7 +64,7 @@ export const build = () => {
     Editor.defineTheme("light", GithubLight);
 
     editor = Editor.create(divEl, {
-        value: `export {};`,
+        value: `// @ts-ignore\nexport * from "rollup";`,
         minimap: {
             enabled: false,
         },
@@ -63,24 +82,4 @@ export const build = () => {
         Editor.setTheme(themeGet());
     });
 
-    try {
-        (async () => {
-            // const { default: size } = await importShim("./esbuild.js");
-
-            /**
-             * We need to debounce a bit the compilation because
-             * it takes ~15ms to compile with the web worker...
-             * Also, real time feedback can be stressful
-             */
-            // let timer = window.setInterval(() => {
-            //     (async () => {
-            //         console.log("Cool");
-            //         console.log(await size(`export * as pkg from "@okikio/native";`));
-            //     })();
-            //     window.clearInterval(timer);
-            // }, 500);
-        })();
-    } catch (e) {
-        console.warn(`Esbuild has failed to load...`, e);
-    }
 };