Use Sass modules

demo/controllers/article/galleryInContent.vue

@@ -209,6 +209,8 @@ export default {
 
 <style lang="scss" scoped>
 
+@use 'trim/scss/library/all' as *;
+
 .galleryComponent {
     position: relative;
     border-radius: 5px; box-sizing: border-box;

demo/controllers/article/imageInContent.vue

@@ -71,6 +71,8 @@ export default {
 
 <style lang="scss" scoped>
 
+@use 'trim/scss/library/all' as *;
+
 .imageComponent {
     min-height: em(100); position: relative;
     border-radius: 5px; overflow: hidden;

demo/controllers/article/quoteInContent.vue

@@ -52,6 +52,8 @@ export default {
 
 <style lang="scss" scoped>
 
+@use 'trim/scss/library/all' as *;
+
 .quoteComponent {
     min-height: em(100); position: relative;
     margin: 2em 0; padding-right: 6em;

demo/controllers/article/tableInContent.vue

@@ -214,6 +214,8 @@ export default {
 
 <style lang="scss" scoped>
 
+@use 'trim/scss/library/all' as *;
+
 .tableComponent {
     position: relative;
     border-radius: 5px; box-sizing: border-box;

demo/scss/_variables.scss

@@ -1,4 +1,7 @@
 //--------------------------------------------------------------
 // Variable overrides
 //--------------------------------------------------------------
-$assetBasePath: '../../src/';
+
+@forward 'trim/scss/library/variables' with (
+  $assetBasePath: '../../src/' !default
+);

demo/scss/main.scss

@@ -1,5 +1,4 @@
 //--------------------------------------------------------------
 // Core styles
 //--------------------------------------------------------------
-@import 'library';
-@import '../../src/scss/bundles/main';
+@use '../../src/scss/bundles/main';

documentation/changelog.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 0.81.0
+* Switch to Sass modules system
+
 ## 0.80.0
 * **Breaking**: Switch to Vue 3, ESM module and Vite bundler
 

src/js/components/appSearch.vue

@@ -197,6 +197,8 @@ export default Component;
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .appSearchType1 {
 
         width: 30em; margin: -14em 0 0 -15em; position: fixed; left: 50%; top: 50%;

src/js/components/dialogModal.vue

@@ -87,6 +87,8 @@ export default Component;
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .overlay {
 
         position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3000;

src/js/components/fileUpload.vue

@@ -88,6 +88,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .fileUploadType1 {
 
         overflow: hidden;

src/js/components/loader.vue

@@ -32,6 +32,8 @@ export default {
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .loader-enter-active, .loader-leave-active {
         transition: opacity 0.2s;
     }

src/js/components/mainNavigation.vue

@@ -514,6 +514,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .mainNavigation {
 
         position: absolute; left: 0; top: 0; bottom: 0; z-index: $zIndexHeader + 10;

src/js/components/massActions.vue

@@ -215,6 +215,8 @@ export default {
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .massActionsType1 {
 
         > .selectCont {

src/js/components/message.vue

@@ -93,6 +93,8 @@ export default {
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .message {
 
         font-size: 1.4em; padding: em(20,14); position: relative;

src/js/components/pagePreview.vue

@@ -90,6 +90,8 @@ export default Component;
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .pagePreviewType1 {
 
         > .controls {

src/js/components/popup.vue

@@ -111,6 +111,8 @@ export default Component;
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .popupType1 {
 
         position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1998;

src/js/components/resourceControls.vue

@@ -163,6 +163,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .resourceControls .dropdownControls {
 
         float: left; position: relative;

src/js/components/resourceFilters.vue

@@ -167,6 +167,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .filtersType1 {
 
         position: relative; background: #fff;

src/js/components/resourceHeader.vue

@@ -64,6 +64,8 @@ export default {
 
 <style lang="scss">
 
+@use '../../scss/library/all' as *;
+
 .headerType1 {
 
     position: relative;

src/js/components/resourceListCards.vue

@@ -45,6 +45,8 @@ export default {
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .cardListType1 {
 
         animation: slideDownFadeIn 0.2s;

src/js/components/resourcePagination.vue

@@ -283,6 +283,8 @@ export default Pagination;
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .pages {
 
         display: block; position: relative; padding: 0 3.6em; overflow: hidden;

src/js/components/resourceSort.vue

@@ -56,6 +56,8 @@ export default {
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .sortType1 {
 
         display: inline-block; opacity: 0.5;

src/js/components/resourceToggleColumnsVisibility.vue

@@ -92,6 +92,8 @@ export default {
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .toggleColumnsVisibility {
 
         position: relative; float: right;

src/js/controllers/auth.vue

@@ -83,6 +83,8 @@ export default {
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .login {
 
         min-width: 30em;

src/js/controllers/error.vue

@@ -49,6 +49,8 @@ export default {
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .errorPageType1 {
 
         display: flex; justify-content: center; flex-direction: column; min-height: 50em; min-height: calc(100vh - 50px); position: relative;

src/js/dependencies/vue-date-pick/index.vue

@@ -891,6 +891,6 @@ function boundNumber(value, min, max) {
 
 <style lang="scss">
 
-    @import './index.scss';
+    @use './index.scss' as *;
 
 </style>

src/js/formElements/checkbox.vue

@@ -53,6 +53,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .checkboxType1 {
 
         position: absolute; left: -999em;

src/js/formElements/code.vue

@@ -101,6 +101,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .codeInputType1 {
 
         .CodeMirror {

src/js/formElements/color.vue

@@ -42,6 +42,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .colorInputType1 {
 
         position: relative;

src/js/formElements/date.vue

@@ -106,7 +106,8 @@ export default {
 </script>
 
 <style lang="scss">
-    @import '../dependencies/vue-date-pick/index.scss';
+    @use '../../scss/library/all' as *;
+    @use '../dependencies/vue-date-pick/index.scss' as *;
 
     .vdpComponent {
 

src/js/formElements/elementWrapper.vue

@@ -43,6 +43,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .labelType1 {
 
         font-size: 1.3em; display: inline-block; padding: 0 em(5,13);

src/js/formElements/externalAdmin.vue

@@ -387,6 +387,8 @@ export default Component;
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .externalAdminElement {
 
         display: inline-block; position: relative;

src/js/formElements/fileAttachment.vue

@@ -242,6 +242,8 @@ export default {
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .fileAttachment {
 
         display: block; position: relative; padding: 0.5em; padding-right: 4em; overflow: hidden;

src/js/formElements/html.vue

@@ -115,6 +115,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .htmlInputType1 {
 
         @include fontSans;

src/js/formElements/htmlComponents/componentControls.vue

@@ -37,6 +37,8 @@ export default {
 
 <style lang="scss" scoped>
 
+@use '../../../scss/library/all' as *;
+
 .componentControls {
     position: absolute; right: -1px; top: -1px;
     background: #fff; border-radius: 0.4em;

src/js/formElements/htmlComponents/html.vue

@@ -249,6 +249,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use '../../../scss/library/all' as *;
+
 .ck_add_components .cke_combo_text {
     width: auto;
 }

src/js/formElements/htmlComponents/index.vue

@@ -347,6 +347,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use '../../../scss/library/all' as *;
+
 .htmlComponentsType1 {
     @include clearfix;
 

src/js/formElements/includedAdmin.vue

@@ -442,6 +442,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     @import url('dragula/dist/dragula.css');
 
     .includedAdminElement {

src/js/formElements/map.vue

@@ -198,6 +198,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .mapElementType1 {
 
         position: relative; padding: 0.5em; padding-bottom: percentage(divide(1,2));

src/js/formElements/media.vue

@@ -337,6 +337,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .mediaInputType1 {
 
         display: inline-block; position: relative; padding: 0.5em; padding-right: 4em; overflow: hidden;

src/js/formElements/mediaPreview.vue

@@ -113,6 +113,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .mediaPreviewType1 {
 
         position: relative; padding: 0.5em;

src/js/formElements/multipleSelect.vue

@@ -157,6 +157,8 @@ export default {
 
 <style lang="scss" scoped>
 
+    @use '../../scss/library/all' as *;
+
     .loading {
 
         display: inline-block; padding: em(5,13) em(10,13) em(5,13) 0; font-size: 1.3em;
@@ -168,6 +170,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../scss/library/all' as *;
+
     .inputBlockType1, .inlineInputBlockType1 {
 
         .multiselect--active {

src/js/formElements/nestedSelect/index.vue

@@ -548,6 +548,8 @@ export default {
 
 <style lang="scss">
 
+    @use '../../../scss/library/all' as *;
+
     .nestedSelectElement {
 
         display: inline-block; position: relative; box-sizing: border-box;