feat: remove sass

evex-dev · Dec 12, 2024 · a046fa8 · a046fa8
1 parent 60b5e9d
commit a046fa8
Show file tree

Hide file tree

Showing 96 changed files with 1,140 additions and 1,001 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -104,7 +104,6 @@
     "react-dom": "^16.0.0"
   },
   "devDependencies": {
-    "sass": "^1.82.0",
     "@babel/cli": "7.25.9",
     "@babel/core": "7.26.0",
     "@babel/eslint-parser": "7.25.9",
@@ -137,12 +136,14 @@
     "husky": "8.0.3",
     "jest": "21.2.1",
     "jest-junit": "7.0.0",
+    "lightningcss": "^1.28.2",
     "postcss": "^8.4.49",
     "postcss-modules": "^6.0.1",
     "raf": "3.4.1",
     "react-test-renderer": "16.14.0",
     "redux-mock-store": "1.5.5",
     "rimraf": "2.7.1",
+    "sass": "^1.82.0",
     "scratch-semantic-release-config": "3.0.0",
     "scratch-webpack-configuration": "3.0.0",
     "selenium-webdriver": "3.6.0",

diff --git a/plugins/scratchCSS.ts b/plugins/scratchCSS.ts
@@ -73,8 +73,8 @@ export const scratchCSS = (): Plugin => {
           return
         }
         const css = await fs.readFile(noModuleId, { encoding: 'utf-8' })
-        const cssCode = convertSassToCss(css)
-        return cssCode
+       // const cssCode = convertSassToCss(css)
+        return css
       }
     }
 

diff --git a/q/src/components/gui/react-tabs/style/react-tabs.css b/q/src/components/gui/react-tabs/style/react-tabs.css
diff --git a/r.ts b/r.ts
@@ -0,0 +1,14 @@
+import { Glob } from 'bun'
+import { convertSassToCss } from './plugins/scratchCSS'
+import path from 'node:path'
+import { bundle } from 'lightningcss'
+
+for await (const entry of new Glob('src/**/*.css').scan()) {
+  const code = await Bun.file(entry).text()
+  const css = convertSassToCss(code)
+  console.log(entry)
+  await Bun.write(entry, css, {createPath: true})
+  const transformed = bundle({
+    filename: path.join('p', entry)
+  }).code
+}
diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
@@ -2,8 +2,8 @@
 @import "../../css/units.css";
 @import "../../css/z-index.css";
 
-$main-button-size: 2.75rem;
-$more-button-size: 2.25rem;
+
+
 
 .menu-container {
     display: flex;
@@ -19,7 +19,7 @@ $more-button-size: 2.25rem;
     justify-content: center;
     cursor: pointer;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background: $looks-secondary;
+    background: var(--looks-secondary);
     outline: none;
     border: none;
     transition: background-color 0.2s;
@@ -30,34 +30,34 @@ button::-moz-focus-inner {
 }
 
 .button:hover {
-    background: $extensions-primary;
+    background: var(--extensions-primary);
 }
 
 .button:active {
     padding: inherit;
 }
 
 .button.coming-soon:hover {
-    background: $data-primary;
+    background: var(--data-primary);
 }
 
 .main-button {
     border-radius: 100%;
-    width: $main-button-size;
-    height: $main-button-size;
-    box-shadow: 0 0 0 4px $looks-transparent;
-    z-index: $z-index-add-button;
+    width: var(--main-button-size);
+    height: var(--main-button-size);
+    box-shadow: 0 0 0 4px var(--looks-transparent);
+    z-index: var(--z-index-add-button);
     transition: transform, box-shadow 0.5s;
 }
 
 .main-button:hover {
   transform: scale(1.1);
-  box-shadow: 0 0 0 6px $looks-transparent;
+  box-shadow: 0 0 0 6px var(--looks-transparent);
 }
 
 .main-icon {
-    width: calc($main-button-size - 1rem);
-    height: calc($main-button-size - 1rem);
+    width: calc(var(--main-button-size) - 1rem);
+    height: calc(var(--main-button-size) - 1rem);
 }
 
 [dir="rtl"] .main-icon {
@@ -72,18 +72,18 @@ button::-moz-focus-inner {
     */
     overflow-y: hidden;
 
-    background: $looks-secondary-dark;
-    border-top-left-radius: $more-button-size;
-    border-top-right-radius: $more-button-size;
-    width: $more-button-size;
-    margin-left: calc(($main-button-size - $more-button-size) / 2);
-    margin-right: calc(($main-button-size - $more-button-size) / 2);
+    background: var(--looks-secondary-dark);
+    border-top-left-radius: var(--more-button-size);
+    border-top-right-radius: var(--more-button-size);
+    width: var(--more-button-size);
+    margin-left: calc((var(--main-button-size) - var(--more-button-size)) / 2);
+    margin-right: calc((var(--main-button-size) - var(--more-button-size)) / 2);
 
     position: absolute;
-    bottom: calc($main-button-size);
+    bottom: calc(var(--main-button-size));
 
-    margin-bottom: calc($main-button-size / -2);
-    padding-bottom: calc($main-button-size / 2);
+    margin-bottom: calc(var(--main-button-size) / -2);
+    padding-bottom: calc(var(--main-button-size) / 2);
 }
 
 .more-buttons {
@@ -108,19 +108,19 @@ button::-moz-focus-inner {
 }
 
 .more-buttons:first-child { /* Round off top button */
-    border-top-right-radius: $more-button-size;
-    border-top-left-radius: $more-button-size;
+    border-top-right-radius: var(--more-button-size);
+    border-top-left-radius: var(--more-button-size);
 }
 
 .more-button {
-    width: $more-button-size;
-    height: $more-button-size;
-    background: $looks-secondary-dark;
+    width: var(--more-button-size);
+    height: var(--more-button-size);
+    background: var(--looks-secondary-dark);
 }
 
 .more-icon {
-    width: calc($more-button-size - 1rem);
-    height: calc($more-button-size - 1rem);
+    width: calc(var(--more-button-size) - 1rem);
+    height: calc(var(--more-button-size) - 1rem);
 }
 
 .coming-soon .more-icon {
@@ -133,68 +133,76 @@ button::-moz-focus-inner {
     is not very easy to style.
 */
 .tooltip {
-    background-color: $extensions-primary !important;
+    background-color: var(--extensions-primary) !important;
     opacity: 1 !important;
     border: 1px solid hsla(0, 0%, 0%, .1) !important;
     box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
 }
 
 .tooltip:after {
-    background-color: $extensions-primary;
+    background-color: var(--extensions-primary);
 }
 
 .coming-soon-tooltip {
-    background-color: $data-primary !important;
+    background-color: var(--data-primary) !important;
 }
 
 .coming-soon-tooltip:after {
-    background-color: $data-primary !important;
+    background-color: var(--data-primary) !important;
 }
 
 .tooltip {
     border: 1px solid hsla(0, 0%, 0%, .1) !important;
-    border-radius: $form-radius !important;
+    border-radius: var(--form-radius) !important;
     box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-    z-index: $z-index-tooltip !important;
+    z-index: var(--z-index-tooltip) !important;
 }
 
-$arrow-size: 0.5rem;
-$arrow-inset: -0.25rem;
-$arrow-rounding: 0.125rem;
+
+
+
 
 .tooltip:after {
     content: "";
     border-top: 1px solid hsla(0, 0%, 0%, .1) !important;
     border-left: 0 !important;
     border-bottom: 0 !important;
     border-right: 1px solid hsla(0, 0%, 0%, .1) !important;
-    border-radius: $arrow-rounding;
-    height: $arrow-size !important;
-    width: $arrow-size !important;
+    border-radius: var(--arrow-rounding);
+    height: var(--arrow-size) !important;
+    width: var(--arrow-size) !important;
 }
 
 .tooltip:global(.place-left):after {
-    margin-top: $arrow-inset !important;
-    right: $arrow-inset !important;
+    margin-top: var(--arrow-inset) !important;
+    right: var(--arrow-inset) !important;
     transform: rotate(45deg) !important;
 }
 
 .tooltip:global(.place-right):after {
-    margin-top: $arrow-inset !important;
-    left: $arrow-inset !important;
+    margin-top: var(--arrow-inset) !important;
+    left: var(--arrow-inset) !important;
     transform: rotate(-135deg) !important;
 }
 
 .tooltip:global(.place-top):after {
-    margin-right: $arrow-inset !important;
-    bottom: $arrow-inset !important;
+    margin-right: var(--arrow-inset) !important;
+    bottom: var(--arrow-inset) !important;
     transform: rotate(135deg) !important;
 }
 
 .tooltip:global(.place-bottom):after {
-    margin-left: $arrow-inset !important;
-    top: $arrow-inset !important;
+    margin-left: var(--arrow-inset) !important;
+    top: var(--arrow-inset) !important;
     transform: rotate(-45deg) !important;
 }
+
+body {
+  --main-button-size: 2.75rem;
+  --more-button-size: 2.25rem;
+  --arrow-size: 0.5rem;
+  --arrow-inset: -0.25rem;
+  --arrow-rounding: 0.125rem;
+}