diff --git a/addons/web_editor/__manifest__.py b/addons/web_editor/__manifest__.py
index de91b072837..e0a1ca669ef 100644
--- a/addons/web_editor/__manifest__.py
+++ b/addons/web_editor/__manifest__.py
@@ -38,7 +38,6 @@ Odoo Web Editor widget.
             'web_editor/static/lib/DOMPurify.js',
 
             # odoo-editor
-            'web_editor/static/src/js/editor/odoo-editor/src/style.css',
             'web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js',
             'web_editor/static/src/js/editor/odoo-editor/src/utils/constants.js',
             'web_editor/static/src/js/editor/odoo-editor/src/utils/sanitize.js',
@@ -66,6 +65,7 @@ Odoo Web Editor widget.
             'web_editor/static/src/scss/bootstrap_overridden.scss',
             'web/static/src/libs/bootstrap/pre_variables.scss',
             'web/static/lib/bootstrap/scss/_variables.scss',
+            'web_editor/static/src/js/editor/odoo-editor/src/style.scss',
 
             # integration
             'web_editor/static/src/scss/wysiwyg.scss',
@@ -98,8 +98,12 @@ Odoo Web Editor widget.
             'web_editor/static/src/components/upload_progress_toast/*.js',
             'web_editor/static/src/components/upload_progress_toast/*.scss',
         ],
+        'web_editor.assets_tests_styles': [
+            'web_editor/static/src/js/editor/odoo-editor/src/base_style.scss',
+            'web_editor/static/src/js/editor/odoo-editor/src/checklist.scss',
+        ],
         'web.assets_common': [
-            'web_editor/static/src/js/editor/odoo-editor/src/base_style.css',
+            'web_editor/static/src/js/editor/odoo-editor/src/base_style.scss',
             'web_editor/static/lib/vkbeautify/**/*',
             'web_editor/static/src/js/common/**/*',
             'web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js',
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/base_style.css b/addons/web_editor/static/src/js/editor/odoo-editor/src/base_style.scss
similarity index 100%
rename from addons/web_editor/static/src/js/editor/odoo-editor/src/base_style.css
rename to addons/web_editor/static/src/js/editor/odoo-editor/src/base_style.scss
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.css b/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.css
deleted file mode 100644
index 758fcc4f2cd..00000000000
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.css
+++ /dev/null
@@ -1,24 +0,0 @@
-ul.o_checklist > li {
-    list-style: none;
-    position: relative;
-    margin-left: 20px;
-}
-ul.o_checklist > li:not(.oe-nested):before {
-    content: '';
-    position: absolute;
-    left: -20px;
-    display: block;
-    height: 14px;
-    width: 14px;
-    top: 1px;
-    border: 1px solid;
-    cursor: pointer;
-}
-ul.o_checklist > li.o_checked:after {
-    content: "✓";
-    transition: opacity .5s;
-    position: absolute;
-    left: -18px;
-    top: -1px;
-    opacity: 1;
-}
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.scss b/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.scss
new file mode 100644
index 00000000000..1369b780b58
--- /dev/null
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.scss
@@ -0,0 +1,27 @@
+ul.o_checklist {
+    > li {
+        list-style: none;
+        position: relative;
+        margin-left: 20px;
+
+        &:not(.oe-nested):before {
+            content: '';
+            position: absolute;
+            left: -20px;
+            display: block;
+            height: 14px;
+            width: 14px;
+            top: 1px;
+            border: 1px solid;
+            cursor: pointer;
+        }
+        &.o_checked:after {
+            content: "✓";
+            transition: opacity .5s;
+            position: absolute;
+            left: -18px;
+            top: -1px;
+            opacity: 1;
+        }
+    }
+}
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.css b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.css
deleted file mode 100644
index 07452150734..00000000000
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.css
+++ /dev/null
@@ -1,324 +0,0 @@
-.oe-floating {
-    box-shadow: 0px 3px 18px rgba(0, 0, 0, .23);
-    border-radius: 4px;
-    position: absolute;
-}
-
-/* toolbar styling */
-
-.oe-toolbar {
-    box-sizing: border-box;
-    position: absolute;
-    visibility: hidden;
-    height: fit-content;
-    width: fit-content;
-    padding-left: 5px;
-    padding-right: 5px;
-    background: #222222;
-    color: white;
-    border-radius: 8px;
-}
-.oe-toolbar.toolbar-bottom::before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    left: var(--arrow-left-pos);
-    top: var(--arrow-top-pos);
-    border: transparent 10px solid;
-    border-bottom: #222222 10px solid;
-    z-index: 0;
-}
-.oe-toolbar:not(.toolbar-bottom)::before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    left: var(--arrow-left-pos);
-    top: var(--arrow-top-pos);
-    border: transparent 10px solid;
-    border-top: #222222 10px solid;
-    z-index: 0;
-    pointer-events: none;
-}
-.oe-toolbar .button-group {
-    display: inline-block;
-    margin-right: 13px;
-}
-.oe-toolbar .button-group:last-of-type {
-    margin-right: 0;
-}
-.oe-toolbar .btn {
-    position: relative;
-    box-sizing: content-box;
-    display: inline-block;
-    padding: 7px;
-    color: white;
-}
-.oe-toolbar .btn:not(.disabled):hover {
-    background: #868686;
-}
-.oe-toolbar .dropdown-menu .btn {
-    background: #222222;
-}
-.oe-toolbar .btn.active {
-    background: #555555;
-}
-.oe-tablepicker-dropdown .oe-tablepicker {
-    margin: -3px 2px -6px 2px;
-}
-.oe-tablepicker {
-    width: max-content;
-    width: -webkit-max-content;
-}
-.oe-tablepicker-wrapper.oe-floating {
-    padding: 3px;
-    z-index: 1051;
-    background: white;
-}
-.oe-tablepicker-row {
-    line-height: 0;
-}
-.oe-tablepicker .oe-tablepicker-row .oe-tablepicker-cell {
-    display: inline-block;
-    background:  #EFEFEE;
-    width: 19px;
-    height: 19px;
-    padding: 0;
-    margin-right: 3px;
-    margin-bottom: 3px;
-}
-.oe-tablepicker .oe-tablepicker-row .oe-tablepicker-cell:last-of-type {
-    margin-right: 0;
-}
-.oe-tablepicker .oe-tablepicker-row .oe-tablepicker-cell.active {
-    background: #d3d1cb;
-}
-.oe-tablepicker-size {
-    text-align: center;
-    margin-top: 7px;
-}
-.oe-tablepicker-dropdown .oe-tablepicker-size {
-    color: white;
-}
-.oe-toolbar .dropdown-toggle {
-    background: transparent;
-    border: none;
-    padding: 7px;
-}
-.oe-toolbar .dropdown-toggle[aria-expanded="true"] {
-    background: #555555;
-}
-.oe-toolbar .dropdown-menu {
-    background: #222222;
-    min-width: max-content;
-    min-width: -webkit-max-content;
-    text-align: center;
-}
-.oe-toolbar .dropdown-item {
-    background: transparent;
-    color: white;
-}
-.oe-toolbar .dropdown-item pre,
-.oe-toolbar .dropdown-item h1,
-.oe-toolbar .dropdown-item h2,
-.oe-toolbar .dropdown-item h3,
-.oe-toolbar .dropdown-item h4,
-.oe-toolbar .dropdown-item h5,
-.oe-toolbar .dropdown-item h6,
-.oe-toolbar .dropdown-item blockquote {
-    margin: 0;
-    color: white;
-}
-.oe-toolbar li > a.dropdown-item {
-    color: white;
-}
-.oe-toolbar .dropdown-item:hover, .oe-toolbar .dropdown-item:focus {
-    color: white;
-    background: #868686;
-}
-.oe-toolbar .dropdown-item.active, .oe-toolbar .dropdown-item:active {
-    color: white;
-    background: #555555;
-}
-
-.oe-toolbar label {
-    display: inline-block;
-}
-
-.oe-toolbar label span {
-    display: inline-block;
-}
-
-.oe-toolbar input[type="color"] {
-    width: 0;
-    height: 0;
-    padding: 0;
-    border: none;
-    box-sizing: border-box;
-    position: absolute;
-    opacity: 0;
-    top: 100%;
-    margin: 2px 0 0;
-}
-
-.oe-toolbar #colorInputButtonGroup label {
-    margin-bottom: 0;
-}
-.oe-toolbar .color-indicator {
-    background-color: transparent;
-    padding-bottom: 4px;
-}
-.oe-toolbar .color-indicator.fore-color {
-    border-bottom: 2px solid var(--fore-color);
-    padding: 5px;
-}
-.oe-toolbar .color-indicator.hilite-color {
-    border-bottom: 2px solid var(--hilite-color);
-    padding: 5px;
-}
-.oe-toolbar #style .dropdown-menu {
-    text-align: left;
-}
-@media only screen and (max-width: 767px) {
-    .oe-toolbar {
-        position: relative;
-        visibility: visible;
-        width: 100%;
-        border-radius: 0;
-        background-color: white;
-    }
-    .oe-toolbar .btn {
-        color: black;
-    }
-}
-/* Content styling */
-
-.oe-powerbox-wrapper {
-    position: absolute;
-    z-index: 1051;
-    border: black;
-    background-color: white;
-    max-height: 40vh;
-    box-sizing: border-box;
-    max-width: 100%;
-    box-shadow: 0px 3px 18px rgba(0, 0, 0, .23);
-    border-radius: 4px;
-    overflow: hidden;
-    display: flex;
-}
-.oe-powerbox-mainWrapper {
-    flex: 1 1 auto;
-    overflow: auto;
-    padding: 5px 0;
-    overscroll-behavior: contain;
-}
-
-.oe-powerbox-category,  .oe-powerbox-noResult {
-    margin: 10px;
-    color: rgba(0, 0, 0, 0.6);
-    font-size: 11px;
-}
-.oe-powerbox-category {
-    text-transform: uppercase;
-    margin: 5px 12px;
-}
-.oe-powerbox-noResult {
-    display: none;
-}
-
-.oe-powerbox-commandWrapper {
-    display: flex;
-    padding: 6px 12px;
-    cursor: pointer;
-}
-
-.oe-powerbox-commandWrapper.active {
-    background: #EFEFEE;
-}
-
-i.oe-powerbox-commandImg {
-    display: flex;
-    height: 30px;
-    width: 30px;
-    align-items: center;
-    justify-content: center;
-    background: white;
-    color: rgba(0, 0, 0, 0.6);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 7px;
-    font-size: 15px;
-}
-
-.oe-powerbox-commandName {
-    font-size: 13px;
-}
-
-.oe-powerbox-commandDescription {
-    color: rgba(0, 0, 0, 0.5);
-    font-size: 12px;
-}
-
-.oe-powerbox-commandRightCol {
-    margin: 0 10px;
-}
-
-.oe-powerbox-wrapper ::-webkit-scrollbar {
-    background: transparent;
-}
-.oe-powerbox-wrapper ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-.oe-powerbox-wrapper ::-webkit-scrollbar-thumb {
-    background: #D3D1CB;
-}
-.oe-powerbox-wrapper ::-webkit-scrollbar-track {
-    background: #EDECE9;
-}
-
-/* Command hints */
-
-.oe-hint {
-    position: relative;
-    caret-color: rgb(55, 53, 47);
-}
-.oe-hint:before {
-    content: attr(placeholder);
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    color: inherit;
-    opacity: 0.4;
-    pointer-events: none;
-    text-align: inherit;
-    width: 100%;
-}
-
-/* Collaboration cursor */
-.oe-collaboration-selections-container {
-    position: absolute;
-    isolation: isolate;
-    height: 0;
-    width: 0;
-    z-index: 1;
-}
-.oe-collaboration-caret-top-square {
-    min-height: 5px;
-    min-width: 5px;
-    color: #fff;
-    text-shadow: 0 0 5px #000;
-    position: absolute;
-    bottom: 100%;
-    left: -4px;
-    white-space: nowrap;
-}
-
-.oe-collaboration-caret-top-square:hover::before {
-    content: attr(data-client-name);
-}
-.oe-collaboration-caret-top-square:hover {
-    border-radius: 2px;
-    padding: 0.3em 0.6em;
-}
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
new file mode 100644
index 00000000000..d9d4406fa6d
--- /dev/null
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss
@@ -0,0 +1,316 @@
+.oe-floating {
+    box-shadow: 0px 3px 18px rgba(0, 0, 0, .23);
+    border-radius: 4px;
+    position: absolute;
+}
+
+/* toolbar styling */
+
+.oe-toolbar {
+    box-sizing: border-box;
+    position: absolute;
+    visibility: hidden;
+    height: fit-content;
+    width: fit-content;
+    padding-left: 5px;
+    padding-right: 5px;
+    background: #222222;
+    color: white;
+    border-radius: 8px;
+
+    .toolbar-bottom::before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        left: var(--arrow-left-pos);
+        top: var(--arrow-top-pos);
+        border: transparent 10px solid;
+        border-bottom: #222222 10px solid;
+        z-index: 0;
+    }
+    &:not(.toolbar-bottom)::before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        left: var(--arrow-left-pos);
+        top: var(--arrow-top-pos);
+        border: transparent 10px solid;
+        border-top: #222222 10px solid;
+        z-index: 0;
+        pointer-events: none;
+    }
+    .button-group {
+        display: inline-block;
+        margin-right: 13px;
+    }
+    .button-group:last-of-type {
+        margin-right: 0;
+    }
+    .btn {
+        position: relative;
+        box-sizing: content-box;
+        display: inline-block;
+        padding: 7px;
+        color: white;
+    }
+    .btn:not(.disabled):hover {
+        background: #868686;
+    }
+    .oe-toolbar .dropdown-menu .btn {
+        background: #222222;
+    }
+    .btn.active {
+        background: #555555;
+    }
+    .dropdown-toggle {
+        background: transparent;
+        border: none;
+        padding: 7px;
+
+        &[aria-expanded="true"] {
+            background: #555555;
+        }
+    }
+    .dropdown-menu {
+        background: #222222;
+        min-width: max-content;
+        min-width: -webkit-max-content;
+        text-align: center;
+    }
+    .dropdown-item {
+        background: transparent;
+        color: white;
+
+        pre, h1, h2, h3, h4, h5, h6, blockquote {
+            margin: 0;
+            color: white;
+        }
+        &:hover, &:focus {
+            color: white;
+            background: #868686;
+        }
+        &.active, &:active {
+            color: white;
+            background: #555555;
+        }
+    }
+    li > a.dropdown-item {
+        color: white;
+    }
+    label, label span {
+        display: inline-block;
+    }
+    input[type="color"] {
+        width: 0;
+        height: 0;
+        padding: 0;
+        border: none;
+        box-sizing: border-box;
+        position: absolute;
+        opacity: 0;
+        top: 100%;
+        margin: 2px 0 0;
+    }
+    #colorInputButtonGroup label {
+        margin-bottom: 0;
+    }
+    .color-indicator {
+        background-color: transparent;
+        padding-bottom: 4px;
+
+        &.fore-color {
+            border-bottom: 2px solid var(--fore-color);
+            padding: 5px;
+        }
+        &.hilite-color {
+            border-bottom: 2px solid var(--hilite-color);
+            padding: 5px;
+        }
+    }
+    #style .dropdown-menu {
+        text-align: left;
+    }
+}
+
+.oe-tablepicker-dropdown .oe-tablepicker {
+    margin: -3px 2px -6px 2px;
+}
+.oe-tablepicker-wrapper.oe-floating {
+    padding: 3px;
+    z-index: 1051;
+    background: white;
+}
+.oe-tablepicker-row {
+    line-height: 0;
+}
+.oe-tablepicker {
+    width: max-content;
+    width: -webkit-max-content;
+
+    .oe-tablepicker-row .oe-tablepicker-cell {
+        display: inline-block;
+        background:  #EFEFEE;
+        width: 19px;
+        height: 19px;
+        padding: 0;
+        margin-right: 3px;
+        margin-bottom: 3px;
+
+        &:last-of-type {
+            margin-right: 0;
+        }
+        &.active {
+            background: #d3d1cb;
+        }
+    }
+}
+.oe-tablepicker-size {
+    text-align: center;
+    margin-top: 7px;
+}
+.oe-tablepicker-dropdown .oe-tablepicker-size {
+    color: white;
+}
+@media only screen and (max-width: 767px) {
+    .oe-toolbar {
+        position: relative;
+        visibility: visible;
+        width: 100%;
+        border-radius: 0;
+        background-color: white;
+
+        .btn {
+            color: black;
+        }
+    }
+}
+
+/* Content styling */
+
+.oe-powerbox-wrapper {
+    position: absolute;
+    z-index: 1051;
+    border: black;
+    background-color: white;
+    max-height: 40vh;
+    box-sizing: border-box;
+    max-width: 100%;
+    box-shadow: 0px 3px 18px rgba(0, 0, 0, .23);
+    border-radius: 4px;
+    overflow: hidden;
+    display: flex;
+
+    ::-webkit-scrollbar {
+        background: transparent;
+    }
+    ::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+    }
+    ::-webkit-scrollbar-thumb {
+        background: #D3D1CB;
+    }
+    ::-webkit-scrollbar-track {
+        background: #EDECE9;
+    }
+}
+.oe-powerbox-mainWrapper {
+    flex: 1 1 auto;
+    overflow: auto;
+    padding: 5px 0;
+    overscroll-behavior: contain;
+}
+
+.oe-powerbox-category, .oe-powerbox-noResult {
+    margin: 10px;
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 11px;
+}
+.oe-powerbox-category {
+    text-transform: uppercase;
+    margin: 5px 12px;
+}
+.oe-powerbox-noResult {
+    display: none;
+}
+.oe-powerbox-commandWrapper {
+    display: flex;
+    padding: 6px 12px;
+    cursor: pointer;
+
+    &.active {
+        background: #EFEFEE;
+    }
+}
+i.oe-powerbox-commandImg {
+    display: flex;
+    height: 30px;
+    width: 30px;
+    align-items: center;
+    justify-content: center;
+    background: white;
+    color: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 7px;
+    font-size: 15px;
+}
+.oe-powerbox-commandName {
+    font-size: 13px;
+}
+.oe-powerbox-commandDescription {
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+}
+.oe-powerbox-commandRightCol {
+    margin: 0 10px;
+}
+
+/* Command hints */
+
+.oe-hint {
+    position: relative;
+    caret-color: rgb(55, 53, 47);
+
+    &:before {
+        content: attr(placeholder);
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        color: inherit;
+        opacity: 0.4;
+        pointer-events: none;
+        text-align: inherit;
+        width: 100%;
+    }
+}
+
+/* Collaboration cursor */
+.oe-collaboration-selections-container {
+    position: absolute;
+    isolation: isolate;
+    height: 0;
+    width: 0;
+    z-index: 1;
+}
+.oe-collaboration-caret-top-square {
+    min-height: 5px;
+    min-width: 5px;
+    color: #fff;
+    text-shadow: 0 0 5px #000;
+    position: absolute;
+    bottom: 100%;
+    left: -4px;
+    white-space: nowrap;
+
+    &:hover {
+        border-radius: 2px;
+        padding: 0.3em 0.6em;
+
+        &::before {
+            content: attr(data-client-name);
+        }
+    }
+}
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/editor-test.html b/addons/web_editor/static/src/js/editor/odoo-editor/test/editor-test.html
index eecd500375e..c3e7b0cea36 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/editor-test.html
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/editor-test.html
@@ -7,8 +7,6 @@
 
         <title>Odoo Editor tests</title>
 
-        <link rel="stylesheet" href="../src/base_style.css"/>
-        <link rel="stylesheet" href="../src/checklist.css"/>
         <link rel="stylesheet" href="lib/mocha.css" />
         <style type="text/css">
             b.zws {
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 69b21d16423..8b1ca8078d2 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -172,8 +172,7 @@
     <t t-call="web.layout">
         <t t-set="title">Odoo Editor Tests</t>
         <t t-set="head">
-            <link rel="stylesheet" href="/web_editor/static/src/js/editor/odoo-editor/src/base_style.css"/>
-            <link rel="stylesheet" href="/web_editor/static/src/js/editor/odoo-editor/src/checklist.css"/>
+            <t t-call-assets="web_editor.assets_tests_styles" t-js="false"/>
             <link rel="stylesheet" href="/web_editor/static/src/js/editor/odoo-editor/test/lib/mocha.css"/>
             <style type="text/css">
                 b.zws {