[REF] css: remove scss files

This commit removes all SCSS files and replaces them with CSS files. The
build process has been updated to bundle CSS files instead of SCSS files.

This change is done as a preparation step to remove all the css in Odoo.

With this commit, the dependency on the `sass` package has been removed.

closes #7187

Task: 5102925
Signed-off-by: Vincent Schippefilt (vsc) <vsc@odoo.com>

Author: pro-odoo

.husky/scss_check.js renamed to .husky/css_check.js

@@ -3,13 +3,13 @@ import { existsSync, readFileSync } from "fs";
 import process from "process";
 
 const commentPattern = /\/\/.*|\/\*[\s\S]*?\*\//g;
-const firstLevelSelectorPattern = /^(?!(\s|\$|\}|\))).+/gm;
+const firstLevelSelectorPattern = /^(?!(\s|\}|:root)).+/gm;
 
-// Get scss files in diff
+// Get css files in diff
 const files = execSync("git diff --name-only --cached")
   .toString()
   .split("\n")
-  .filter((file) => file.endsWith(".scss"));
+  .filter((file) => file.endsWith(".css"));
 
 const faultyFiles = [];
 
@@ -29,7 +29,7 @@ for (const file of files) {
 if (faultyFiles.length > 0) {
   const fileList = " - " + faultyFiles.join("\n - ");
   console.log(`\x1b[31m
-Some scss files are not scoped to .o-spreadsheet. Please fix them before committing.
+Some css files are not scoped to .o-spreadsheet. Please fix them before committing.
 Faulty files:
 
 ${fileList}

.husky/pre-commit

@@ -36,5 +36,5 @@ if [ "$HUSKY_PRE_COMMIT" != 0 ]; then
     fi
 
     # Css wrap check
-    node .husky/scss_check.js
+    node .husky/css_check.js
 fi

package-lock.json

@@ -20,8 +20,8 @@
     "bundle:iife": "rollup -c -m -- --format iife",
     "bundle:esm": "rollup -c -m -- --format esm",
     "bundle:xml": "node tools/bundle_xml/main.cjs",
-    "bundle:dev": "npm-run-all build:js bundle:iife \"bundle:xml -- --outDir build\" && node tools/bundle_scss/main.cjs --out build",
-    "dist": "tsc --module es6 --declaration --declarationDir dist/types && rollup -c && npm run bundle:xml -- --outDir dist && node tools/bundle_scss/main.cjs --out dist",
+    "bundle:dev": "npm-run-all build:js bundle:iife \"bundle:xml -- --outDir build\" && node tools/bundle_css/main.cjs --out build",
+    "dist": "tsc --module es6 --declaration --declarationDir dist/types && rollup -c && npm run bundle:xml -- --outDir dist && node tools/bundle_css/main.cjs --out dist",
     "monkey": "SPREADSHEET_MONKEY_COUNT=$npm_config_monkey_count jest 'tests/collaborative/collaborative_monkey_party.test.ts'",
     "test": "tsc --noEmit --project tsconfig.jest.json && jest",
     "test:watch": "jest --watch",
@@ -32,10 +32,10 @@
     "watch:bundle": "npm run bundle:iife -- --watch",
     "watch:ts": "npm run build:js -- --watch",
     "watch:xml": "node tools/bundle_xml/watch_xml_templates.cjs",
-    "watch:scss": "node tools/bundle_scss/watch_scss_files.cjs",
+    "watch:css": "node tools/bundle_css/watch_css_files.cjs",
     "unzipXlsx": "node tools/bundle_xlsx/unzip_xlsx_demo.cjs",
     "zipXlsx": "node tools/bundle_xlsx/zip_xlsx_demo.cjs",
-    "build": "npm-run-all build:js bundle:esm \"bundle:xml -- --outDir build\" && node tools/bundle_scss/main.cjs --out build",
+    "build": "npm-run-all build:js bundle:esm \"bundle:xml -- --outDir build\" && node tools/bundle_css/main.cjs --out build",
     "lint": "eslint --fix"
   },
   "browserslist": [
@@ -95,7 +95,6 @@
     "rollup": "^3.28.0",
     "rollup-plugin-dts": "^5.3.1",
     "rollup-plugin-typescript2": "^0.35.0",
-    "sass": "^1.62.1",
     "seedrandom": "^3.0.5",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.30.1",

package.json

@@ -3,14 +3,14 @@
     position: absolute;
     border: 1px solid white;
     background-color: #1a73e8;
-    height: $os-autofill-edge-length;
-    width: $os-autofill-edge-length;
+    height: var(--os-autofill-edge-length);
+    width: var(--os-autofill-edge-length);
   }
 
   .o-autofill-handler {
     position: absolute;
-    height: $os-autofill-edge-length;
-    width: $os-autofill-edge-length;
+    height: var(--os-autofill-edge-length);
+    width: var(--os-autofill-edge-length);
     &:hover {
       cursor: crosshair;
     }

src/components/action_button/action_button.scss renamed to src/components/action_button/action_button.css

@@ -4,7 +4,7 @@
     background-color: white;
 
     .o-divider {
-      border-right: 1px solid $os-gray-300;
+      border-right: 1px solid var(--os-gray-300);
       margin: 0 6px;
     }
 
@@ -17,7 +17,7 @@
           width: 26px;
           height: 26px;
           &.active {
-            background-color: $os-button-active-bg;
+            background-color: var(--os-button-active-bg);
           }
         }
       }
@@ -55,7 +55,7 @@
     .o-dropdown-border-type {
       cursor: pointer;
       &:not(.o-disabled):not(.active):hover {
-        background-color: $os-button-hover-bg;
+        background-color: var(--os-button-hover-bg);
       }
     }
     .o-dropdown-border-check {

src/components/animation/ripple.scss renamed to src/components/animation/ripple.css

@@ -2,8 +2,8 @@
   .o-spreadsheet-bottom-bar {
     font-size: 15px;
     border-top: 1px solid lightgrey;
-    background-color: $os-background-gray-color;
-    padding-left: $os-header-width;
+    background-color: var(--os-background-gray-color);
+    padding-left: var(--os-header-width);
 
     .o-sheet-item {
       cursor: pointer;

src/components/autofill/autofill.scss renamed to src/components/autofill/autofill.css

@@ -2,7 +2,7 @@
   .o-sheet {
     padding: 0 15px;
     padding-right: 10px;
-    height: $os-desktop-bottombar-height;
+    height: var(--os-desktop-bottombar-height);
     border-left: 1px solid #c1c1c1;
     border-right: 1px solid #c1c1c1;
     margin-left: -1px;
@@ -12,7 +12,7 @@
     }
 
     &.active {
-      color: $os-action-color;
+      color: var(--os-action-color);
       background-color: #ffffff;
       box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
     }
@@ -48,6 +48,6 @@
   }
 
   .o-spreadshet-mobile .o-sheet {
-    height: $os-mobile-bottombar-height;
+    height: var(--os-mobile-bottombar-height);
   }
 }