refactor: remove sass dependency (#752)

Co-authored-by: Saqib Ansari <nextchamp.saqib@gmail.com>
(cherry picked from commit 8aaa08e)

Author: 2 people

frontend/package.json

@@ -52,7 +52,6 @@
 		"patch-package": "^8.0.1",
 		"postcss": "^8.4.14",
 		"prettier": "3.1.0",
-		"sass": "^1.54.9",
 		"tailwindcss": "3.4.17",
 		"typescript": "^5.5.2",
 		"vite": "^4.4.6",

frontend/src/components/ContentEditable.vue

@@ -121,7 +121,7 @@ watch(
 )
 </script>
 
-<style lang="scss">
+<style>
 .contenteditable:empty:before {
 	content: attr(placeholder);
 	pointer-events: none;

frontend/src/dashboard/VueGridLayout.vue

@@ -58,7 +58,7 @@ async function toggleEnable(disable) {
 watch(() => props.disabled, toggleEnable, 200)
 </script>
 
-<style lang="scss">
+<style>
 .vgl-layout {
 	--vgl-placeholder-bg: #b1b1b1;
 	--vgl-placeholder-opacity: 20%;
@@ -91,14 +91,14 @@ watch(() => props.disabled, toggleEnable, 200)
 	width: var(--vgl-resizer-size);
 	height: var(--vgl-resizer-size);
 	cursor: se-resize;
-}
 
-.vgl-item__resizer:before {
-	position: absolute;
-	inset: 0 3px 3px 0;
-	content: '';
-	border: 0 solid var(--vgl-resizer-border-color);
-	border-right-width: var(--vgl-resizer-border-width);
-	border-bottom-width: var(--vgl-resizer-border-width);
+	&:before {
+		position: absolute;
+		inset: 0 3px 3px 0;
+		content: '';
+		border: 0 solid var(--vgl-resizer-border-color);
+		border-right-width: var(--vgl-resizer-border-width);
+		border-bottom-width: var(--vgl-resizer-border-width);
+	}
 }
 </style>

frontend/src/notebook/tiptap/TipTap.vue

@@ -84,7 +84,7 @@ const bubbleMenu = [
 ]
 </script>
 
-<style lang="scss">
+<style>
 /* Placeholder */
 .prose [data-placeholder].is-empty::before {
 	content: attr(data-placeholder);

frontend/src/widgets/Text/Text.vue

@@ -25,7 +25,7 @@ const dashboard = inject('dashboard')
 	</template>
 </template>
 
-<style lang="scss">
+<style>
 .prose-sm {
 	& > h1,
 	& > h2,

frontend/src2/charts/components/NewMeasureSelectorDialog.vue

@@ -141,18 +141,18 @@ function resetNewMeasure() {
 	</Dialog>
 </template>
 
-<style lang="scss">
+<style>
 div[data-dismissable-layer] {
 	border-radius: 0.75rem;
 }
 .column-expression {
-	.cm-column-highlight {
+	& .cm-column-highlight {
 		background-color: #ededed !important;
 		border-radius: 0.5rem !important;
 		padding: 1px 2px !important;
 		border: 1px solid #dedede !important;
 	}
-	.cm-scroller {
+	& .cm-scroller {
 		background-color: #ffffff !important;
 		border-radius: 0.5rem !important;
 		border: 1px solid #ededed !important;

frontend/src2/components/ContentEditable.vue

@@ -131,7 +131,7 @@ watch(
 )
 </script>
 
-<style lang="scss">
+<style>
 .contenteditable:empty:before {
 	content: attr(placeholder);
 	pointer-events: none;

frontend/src2/dashboard/VueGridLayout.vue

@@ -72,7 +72,7 @@ const options = reactive({
 })
 </script>
 
-<style lang="scss">
+<style>
 .vgl-layout {
 	--vgl-placeholder-bg: #b1b1b1;
 	--vgl-placeholder-opacity: 15%;
@@ -105,14 +105,14 @@ const options = reactive({
 	width: var(--vgl-resizer-size);
 	height: var(--vgl-resizer-size);
 	cursor: se-resize;
-}
 
-.vgl-item__resizer:before {
-	position: absolute;
-	inset: 0 3px 3px 0;
-	content: '';
-	border: 0 solid var(--vgl-resizer-border-color);
-	border-right-width: var(--vgl-resizer-border-width);
-	border-bottom-width: var(--vgl-resizer-border-width);
+	&:before {
+		position: absolute;
+		inset: 0 3px 3px 0;
+		content: '';
+		border: 0 solid var(--vgl-resizer-border-color);
+		border-right-width: var(--vgl-resizer-border-width);
+		border-bottom-width: var(--vgl-resizer-border-width);
+	}
 }
 </style>

frontend/src2/query/components/ExpressionEditor.vue

@@ -315,15 +315,15 @@ function setSignatureElementPosition() {
 	</div> -->
 </template>
 
-<style lang="scss">
+<style>
 .column-expression {
-	.cm-content {
+	& .cm-content {
 		height: 100% !important;
 	}
-	.cm-gutters {
+	& .cm-gutters {
 		height: 100% !important;
 	}
-	.cm-tooltip-autocomplete {
+	& .cm-tooltip-autocomplete {
 		position: absolute !important;
 		z-index: 50 !important;
 	}

frontend/vite.config.js

@@ -19,14 +19,6 @@ export default defineConfig({
 		allowedHosts: true,
 	},
 	esbuild: { loader: 'ts' },
-	css: {
-		preprocessorOptions: {
-			scss: {
-				api: 'modern-compiler', // or "modern"
-				silenceDeprecations: ['legacy-js-api'],
-			},
-		},
-	},
 	resolve: {
 		alias: {
 			// https://github.com/vitejs/vite/discussions/16730#discussioncomment-13048825