feat(vite-plugin/testing): add sass/scss transform tests

vite-plugin/playground/src/App.vue

@@ -1,4 +1,6 @@
 <template>
+  <SassTransform />
+
   <AssetTransform />
 
   <JsScriptSetup />
@@ -8,12 +10,11 @@
   <TsScript />
 
   <JsPug />
-
-  <!-- TODO: Add tests for 'pascal' and 'combined' too -->
-  <!-- TODO: Add SCSS Transforms -->
 </template>
 
 <script setup>
+import SassTransform from './components/SassTransform.vue'
+
 import AssetTransform from './components/AssetTransform.vue'
 
 import JsScriptSetup from './components/JsScriptSetup.vue'

vite-plugin/playground/src/components/SassTransform.vue

@@ -0,0 +1,17 @@
+<template>
+  <h4>Sass Transform</h4>
+
+  <div>
+    <ColorOverride />
+    <ColorSassUse />
+    <ColorScssUse />
+    <PaddingTest />
+  </div>
+</template>
+
+<script setup>
+import ColorOverride from './sass-transform/ColorOverride.vue'
+import ColorSassUse from './sass-transform/ColorSassUse.vue'
+import ColorScssUse from './sass-transform/ColorScssUse.vue'
+import PaddingTest from './sass-transform/PaddingTest.vue'
+</script>

vite-plugin/playground/src/components/sass-transform/ColorOverride.vue

@@ -0,0 +1,8 @@
+<template>
+  <h6>Color Override</h6>
+
+  <div>
+    <q-icon name="map" color="primary" size="50px" />
+    <q-btn icon="map" color="secondary" round />
+  </div>
+</template>

vite-plugin/playground/src/components/sass-transform/ColorSassUse.vue

@@ -0,0 +1,16 @@
+<template>
+  <h6>Color Use (Sass)</h6>
+
+  <div class="row justify-center">
+    <div class="my-colored-div rounded-borders">
+      &nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+.my-colored-div
+  background-color: $primary
+  width: 50px
+  height: 50px
+</style>

vite-plugin/playground/src/components/sass-transform/ColorScssUse.vue

@@ -0,0 +1,17 @@
+<template>
+  <h6>Color Use (Scss)</h6>
+
+  <div class="row justify-center">
+    <div class="my-colored-div rounded-borders">
+      &nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-colored-div {
+  background-color: $primary;
+  width: 50px;
+  height: 50px;
+}
+</style>

vite-plugin/playground/src/components/sass-transform/PaddingTest.vue

@@ -0,0 +1,15 @@
+<template>
+  <h6>Padding with $toolbar-padding</h6>
+
+  <div class="row justify-center">
+    <div class="my-div">
+      &nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+.my-div
+  padding: $toolbar-padding
+  background-color: $secondary
+</style>

vite-plugin/playground/src/quasar-variables.sass

@@ -1,6 +1,8 @@
 // $primary   : #1976D2
 $primary: #388310
-$secondary : #26A69A
+// $secondary : #26A69A
+$secondary : #a62659
+
 $accent    : #9C27B0
 
 $dark      : #1D1D1D
@@ -9,3 +11,6 @@ $positive  : #21BA45
 $negative  : #C10015
 $info      : #31CCEC
 $warning   : #F2C037
+
+// $toolbar-padding: 0 12px
+$toolbar-padding: 100px

vite-plugin/testing/runtime/tests/sass-transform.test.js

@@ -0,0 +1,29 @@
+import { describe, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import 'quasar/src/css/index.sass'
+
+import { QToolbar } from 'quasar'
+import PaddingTest from 'playground/sass-transform/PaddingTest.vue'
+
+describe('Sass Transform', () => {
+  test('variables file is taken into account', () => {
+    const wrapper = mount(QToolbar)
+
+    const { element } = wrapper.get('div')
+    expect(
+      window.getComputedStyle(element)
+        .getPropertyValue('padding')
+    ).toBe('100px')
+  })
+
+  test('correctly uses sass variables', () => {
+    const wrapper = mount(PaddingTest)
+
+    const { element } = wrapper.get('div.my-div')
+    expect(
+      window.getComputedStyle(element)
+        .getPropertyValue('padding')
+    ).toBe('100px')
+  })
+})

vite-plugin/testing/runtime/vitest.config.js

@@ -18,7 +18,7 @@ export default defineConfig(() => {
 
       quasar({
         devTreeshaking: true,
-        sassVariables: false,
+        sassVariables: resolve('src/quasar-variables.sass'),
         autoImportComponentCase: 'combined'
       })
     ],