From cd354e1a510ccfd654ec4aea5fd3060dd050c0da Mon Sep 17 00:00:00 2001 From: Luis Doebbel Date: Wed, 4 Sep 2024 10:11:53 -0400 Subject: [PATCH] Use SASS modules, remove all uses of @import rule --- .../errorHelperText/error-helper-text.scss | 12 +- .../src/app/components/layout/layout.scss | 32 ++--- .../src/app/components/loading/loading.scss | 10 +- .../src/app/components/spinner/spinner.scss | 10 +- .../app/components/typography/typography.scss | 124 +++++++++--------- .../uikit/uikitBlock/uikit-block.scss | 12 +- .../components/uikit/uikitNav/uikit-nav.scss | 14 +- .../cookieBanner/cookie-banner.scss | 40 +++--- .../containers/debugBanner/debug-banner.scss | 6 +- .../src/app/pages/notFound/not-found.scss | 4 +- frontend/src/styles/_export.scss | 27 ++-- frontend/src/styles/_fonts.scss | 24 +++- frontend/src/styles/_variables.scss | 28 ++-- frontend/src/styles/index.scss | 14 +- frontend/src/styles/mixins/_generics.scss | 4 +- .../src/styles/mixins/_media-queries.scss | 8 +- frontend/src/styles/style.module.scss | 21 +-- frontend/vite.config.ts | 7 - 18 files changed, 216 insertions(+), 181 deletions(-) diff --git a/frontend/src/app/components/errorHelperText/error-helper-text.scss b/frontend/src/app/components/errorHelperText/error-helper-text.scss index e57170d..4003650 100644 --- a/frontend/src/app/components/errorHelperText/error-helper-text.scss +++ b/frontend/src/app/components/errorHelperText/error-helper-text.scss @@ -1,8 +1,10 @@ +@use "../../../styles/variables" as v; + .error-helper-text { &__container { - color: get-color(basic, error); - margin-top: get-spacing(xxs); - margin-left: get-spacing(md); + color: v.get-color(basic, error); + margin-top: v.get-spacing(xxs); + margin-left: v.get-spacing(md); } &__enter { @@ -10,7 +12,7 @@ &-active { opacity: 1; - transition: opacity get-time(normal) ease-in; + transition: opacity v.get-time(normal) ease-in; } } @@ -19,7 +21,7 @@ &-active { opacity: 0; - transition: opacity get-time(normal) ease-out; + transition: opacity v.get-time(normal) ease-out; } } } diff --git a/frontend/src/app/components/layout/layout.scss b/frontend/src/app/components/layout/layout.scss index 6927ac3..5cb85c8 100644 --- a/frontend/src/app/components/layout/layout.scss +++ b/frontend/src/app/components/layout/layout.scss @@ -1,23 +1,25 @@ +@use "../../../styles/variables" as v; + .layout { &__container { width: 100%; display: flex; flex-direction: column; flex-grow: 1; - padding: get-spacing(md); + padding: v.get-spacing(md); align-items: center; - background-color: get-color(basic, background); + background-color: v.get-color(basic, background); - @media (min-width: get-media(md)) { - padding: get-spacing(lg); + @media (min-width: v.get-media(md)) { + padding: v.get-spacing(lg); } - @media (min-width: get-media(lg)) { - padding: get-spacing(lg) 4rem; + @media (min-width: v.get-media(lg)) { + padding: v.get-spacing(lg) 4rem; } - @media (min-width: get-media(xl)) { - padding: get-spacing(lg) 6rem; + @media (min-width: v.get-media(xl)) { + padding: v.get-spacing(lg) 6rem; } &-content { @@ -32,21 +34,21 @@ flex-direction: column; justify-content: center; align-items: center; - background-color: get-color(basic, background); + background-color: v.get-color(basic, background); - @media (min-width: get-media(xs)) { + @media (min-width: v.get-media(xs)) { flex: 1 1 auto; } &-content { width: 100%; - padding: get-spacing(md); - background-color: get-color(basic, brightest); + padding: v.get-spacing(md); + background-color: v.get-color(basic, brightest); - @media (min-width: get-media(xs)) { + @media (min-width: v.get-media(xs)) { max-width: 442px; - border-radius: get-border-radius(md); - padding: get-spacing(xl); + border-radius: v.get-border-radius(md); + padding: v.get-spacing(xl); } } } diff --git a/frontend/src/app/components/loading/loading.scss b/frontend/src/app/components/loading/loading.scss index f84ae1b..50ceeec 100644 --- a/frontend/src/app/components/loading/loading.scss +++ b/frontend/src/app/components/loading/loading.scss @@ -1,3 +1,5 @@ +@use "../../../styles/variables" as v; + .loading { display: flex; position: fixed; @@ -5,15 +7,15 @@ left: 0; width: 100%; height: 100%; - background: get-color(basic, brightest); - z-index: get-z(1000); + background: v.get-color(basic, brightest); + z-index: v.get-z(1000); &__enter { opacity: 0; &-active { opacity: 1; - transition: opacity get-time(slow) ease-in; + transition: opacity v.get-time(slow) ease-in; } } @@ -22,7 +24,7 @@ &-active { opacity: 0; - transition: opacity get-time(slow) ease-out; + transition: opacity v.get-time(slow) ease-out; } } diff --git a/frontend/src/app/components/spinner/spinner.scss b/frontend/src/app/components/spinner/spinner.scss index 8992d0a..ced2148 100644 --- a/frontend/src/app/components/spinner/spinner.scss +++ b/frontend/src/app/components/spinner/spinner.scss @@ -1,3 +1,5 @@ +@use "../../../styles/variables" as v; + @keyframes spinner-rotate { 0% { width: 64px; @@ -24,12 +26,12 @@ display: block; position: relative; background-image: linear-gradient( - get-color(primary, dark) 16px, + v.get-color(primary, dark) 16px, transparent 0 ), - linear-gradient(get-color(primary, main) 16px, transparent 0), - linear-gradient(get-color(primary, main) 16px, transparent 0), - linear-gradient(get-color(primary, dark) 16px, transparent 0); + linear-gradient(v.get-color(primary, main) 16px, transparent 0), + linear-gradient(v.get-color(primary, main) 16px, transparent 0), + linear-gradient(v.get-color(primary, dark) 16px, transparent 0); background-repeat: no-repeat; background-size: 16px 16px; background-position: diff --git a/frontend/src/app/components/typography/typography.scss b/frontend/src/app/components/typography/typography.scss index 6a1f98d..f7c3eb3 100644 --- a/frontend/src/app/components/typography/typography.scss +++ b/frontend/src/app/components/typography/typography.scss @@ -1,108 +1,110 @@ +@use "../../../styles/variables" as v; + .typography { &__heading1 { - font-size: get-font-size(xtl); - line-height: get-line-height(xxl); - font-weight: get-font-weight(semi-bold); - letter-spacing: get-letter-spacing(xs); - color: get-color(basic, text); + font-size: v.get-font-size(xtl); + line-height: v.get-line-height(xxl); + font-weight: v.get-font-weight(semi-bold); + letter-spacing: v.get-letter-spacing(xs); + color: v.get-color(basic, text); } &__heading2 { - font-size: get-font-size(xxl); - line-height: get-line-height(xl); - font-weight: get-font-weight(bold); - letter-spacing: get-letter-spacing(sm); - color: get-color(basic, text); + font-size: v.get-font-size(xxl); + line-height: v.get-line-height(xl); + font-weight: v.get-font-weight(bold); + letter-spacing: v.get-letter-spacing(sm); + color: v.get-color(basic, text); } &__heading3 { - font-size: get-font-size(xl); - line-height: get-line-height(lg); - font-weight: get-font-weight(bold); - color: get-color(basic, text); + font-size: v.get-font-size(xl); + line-height: v.get-line-height(lg); + font-weight: v.get-font-weight(bold); + color: v.get-color(basic, text); } &__heading4 { - font-size: get-font-size(lg); - line-height: get-line-height(md); - font-weight: get-font-weight(bold); - letter-spacing: get-letter-spacing(lg); - color: get-color(basic, text); + font-size: v.get-font-size(lg); + line-height: v.get-line-height(md); + font-weight: v.get-font-weight(bold); + letter-spacing: v.get-letter-spacing(lg); + color: v.get-color(basic, text); } &__heading5 { - font-size: get-font-size(md); - line-height: get-line-height(sm); - font-weight: get-font-weight(semi-bold); - color: get-color(basic, text); + font-size: v.get-font-size(md); + line-height: v.get-line-height(sm); + font-weight: v.get-font-weight(semi-bold); + color: v.get-color(basic, text); } &__heading6 { - font-size: get-font-size(sm); - line-height: get-line-height(xs); - font-weight: get-font-weight(medium); - letter-spacing: get-letter-spacing(md); - color: get-color(basic, text); + font-size: v.get-font-size(sm); + line-height: v.get-line-height(xs); + font-weight: v.get-font-weight(medium); + letter-spacing: v.get-letter-spacing(md); + color: v.get-color(basic, text); } &__subtitle1 { - font-size: get-font-size(xs); - line-height: get-line-height(xs); - font-weight: get-font-weight(medium); - letter-spacing: get-letter-spacing(lg); + font-size: v.get-font-size(xs); + line-height: v.get-line-height(xs); + font-weight: v.get-font-weight(medium); + letter-spacing: v.get-letter-spacing(lg); } &__subtitle2 { - font-size: get-font-size(xxs); - line-height: get-line-height(xxs); - font-weight: get-font-weight(medium); - letter-spacing: get-letter-spacing(md); + font-size: v.get-font-size(xxs); + line-height: v.get-line-height(xxs); + font-weight: v.get-font-weight(medium); + letter-spacing: v.get-letter-spacing(md); } &__body1 { - font-size: get-font-size(xs); - line-height: get-line-height(xs); - font-weight: get-font-weight(regular); - letter-spacing: get-letter-spacing(lg); + font-size: v.get-font-size(xs); + line-height: v.get-line-height(xs); + font-weight: v.get-font-weight(regular); + letter-spacing: v.get-letter-spacing(lg); } &__body2 { - font-size: get-font-size(xxs); - line-height: get-line-height(xxs); - font-weight: get-font-weight(regular); - letter-spacing: get-letter-spacing(md); + font-size: v.get-font-size(xxs); + line-height: v.get-line-height(xxs); + font-weight: v.get-font-weight(regular); + letter-spacing: v.get-letter-spacing(md); } &__caption { - font-size: get-font-size(xts); - line-height: get-line-height(xxs); - font-weight: get-font-weight(regular); - letter-spacing: get-letter-spacing(xl); + font-size: v.get-font-size(xts); + line-height: v.get-line-height(xxs); + font-weight: v.get-font-weight(regular); + letter-spacing: v.get-letter-spacing(xl); } &__overline { - font-size: get-font-size(xts); - line-height: get-line-height(xxs); - font-weight: get-font-weight(regular); - letter-spacing: get-letter-spacing(xxl); + font-size: v.get-font-size(xts); + line-height: v.get-line-height(xxs); + font-weight: v.get-font-weight(regular); + letter-spacing: v.get-letter-spacing(xxl); text-transform: uppercase; } &__button-small { - font-size: get-font-size(xts); - line-height: get-line-height(xs); - font-weight: get-font-weight(semi-bold); + font-size: v.get-font-size(xts); + line-height: v.get-line-height(xs); + font-weight: v.get-font-weight(semi-bold); } &__button-medium { - font-size: get-font-size(xxs); - line-height: get-line-height(xs); - font-weight: get-font-weight(semi-bold); + font-size: v.get-font-size(xxs); + line-height: v.get-line-height(xs); + font-weight: v.get-font-weight(semi-bold); } &__button-large { - font-size: get-font-size(xs); - line-height: get-line-height(xs); - font-weight: get-font-weight(semi-bold); + font-size: v.get-font-size(xs); + line-height: v.get-line-height(xs); + font-weight: v.get-font-weight(semi-bold); } } diff --git a/frontend/src/app/components/uikit/uikitBlock/uikit-block.scss b/frontend/src/app/components/uikit/uikitBlock/uikit-block.scss index 8e08115..6a02322 100644 --- a/frontend/src/app/components/uikit/uikitBlock/uikit-block.scss +++ b/frontend/src/app/components/uikit/uikitBlock/uikit-block.scss @@ -1,17 +1,19 @@ +@use "../../../../styles/variables" as v; + .uikit-block { display: flex; flex-direction: column; - gap: get-spacing(xs); + gap: v.get-spacing(xs); &__pre { - border-radius: get-border-radius(sm); - padding: get-spacing(sm); + border-radius: v.get-border-radius(sm); + padding: v.get-spacing(sm); position: relative; } &__copy-btn { position: absolute; - right: get-spacing(xxs); - top: get-spacing(xxs); + right: v.get-spacing(xxs); + top: v.get-spacing(xxs); } } diff --git a/frontend/src/app/components/uikit/uikitNav/uikit-nav.scss b/frontend/src/app/components/uikit/uikitNav/uikit-nav.scss index cb218d2..85ac482 100644 --- a/frontend/src/app/components/uikit/uikitNav/uikit-nav.scss +++ b/frontend/src/app/components/uikit/uikitNav/uikit-nav.scss @@ -1,14 +1,18 @@ +@use "../../../../styles/mixins/media-queries" as m; +@use "../../../../styles/mixins/generics" as g; +@use "../../../../styles/variables" as v; + .uikit-nav { display: none; - @include media-min(xs) { + @include m.media-min(xs) { display: flex; flex-direction: column; - gap: get-spacing(xs); + gap: v.get-spacing(xs); height: 100%; - margin-top: get-spacing(md); - max-width: rem(250); + margin-top: v.get-spacing(md); + max-width: g.rem(250); position: sticky; - top: get-spacing(md); + top: v.get-spacing(md); } } diff --git a/frontend/src/app/containers/cookieConsent/cookieBanner/cookie-banner.scss b/frontend/src/app/containers/cookieConsent/cookieBanner/cookie-banner.scss index 237fc85..bd2c254 100644 --- a/frontend/src/app/containers/cookieConsent/cookieBanner/cookie-banner.scss +++ b/frontend/src/app/containers/cookieConsent/cookieBanner/cookie-banner.scss @@ -1,30 +1,32 @@ +@use "../../../../styles/variables" as v; + .cookie-banner { width: 100%; position: fixed; - bottom: get-spacing(md); + bottom: v.get-spacing(md); &__container { position: relative; left: 50%; width: 80%; transform: translateX(-50%); - z-index: get-z(100); - padding: get-spacing(md); - gap: get-spacing(xxl); + z-index: v.get-z(100); + padding: v.get-spacing(md); + gap: v.get-spacing(xxl); display: flex; justify-content: space-between; - background-color: get-color(basic, brightest); - border: 1px solid get-color(stone, light); - box-shadow: 0 0 10px -6px get-color(basic, darkest); + background-color: v.get-color(basic, brightest); + border: 1px solid v.get-color(stone, light); + box-shadow: 0 0 10px -6px v.get-color(basic, darkest); - @media (max-width: (get-media(xxs) - 1)) { + @media (max-width: (v.get-media(xxs) - 1)) { width: 90%; } - @media (max-width: (get-media(md) - 1)) { + @media (max-width: (v.get-media(md) - 1)) { flex-direction: column; - gap: get-spacing(lg); - padding: get-spacing(lg) get-spacing(md); + gap: v.get-spacing(lg); + padding: v.get-spacing(lg) v.get-spacing(md); } } @@ -36,9 +38,9 @@ &__actions { display: flex; align-items: center; - gap: get-spacing(sm); + gap: v.get-spacing(sm); - @media (max-width: (get-media(lg) - 1)) { + @media (max-width: (v.get-media(lg) - 1)) { flex-direction: column; } @@ -46,23 +48,23 @@ display: flex; justify-content: center; white-space: nowrap; - margin-top: get-spacing(xxs); + margin-top: v.get-spacing(xxs); - @media (min-width: get-media(lg)) { + @media (min-width: v.get-media(lg)) { margin-top: 0; - margin-right: get-spacing(md); + margin-right: v.get-spacing(md); } } &-buttons { display: flex; white-space: nowrap; - gap: get-spacing(md); + gap: v.get-spacing(md); - @media (max-width: (get-media(xs) - 1)) { + @media (max-width: (v.get-media(xs) - 1)) { width: 100%; flex-direction: column; - gap: get-spacing(xs); + gap: v.get-spacing(xs); } > * { diff --git a/frontend/src/app/containers/debugBanner/debug-banner.scss b/frontend/src/app/containers/debugBanner/debug-banner.scss index 0c6e20d..23cbc7c 100644 --- a/frontend/src/app/containers/debugBanner/debug-banner.scss +++ b/frontend/src/app/containers/debugBanner/debug-banner.scss @@ -1,15 +1,17 @@ +@use "../../../styles/variables" as v; + /* stylelint-disable color-no-hex */ .debug-banner { width: 100%; display: flex; justify-content: space-between; - gap: get-spacing(xs); + gap: v.get-spacing(xs); &__container { position: fixed; width: 100%; bottom: 0; - z-index: get-z(100); + z-index: v.get-z(100); } &__local { diff --git a/frontend/src/app/pages/notFound/not-found.scss b/frontend/src/app/pages/notFound/not-found.scss index 108ad65..e7ae7aa 100644 --- a/frontend/src/app/pages/notFound/not-found.scss +++ b/frontend/src/app/pages/notFound/not-found.scss @@ -1,6 +1,8 @@ +@use "../../../styles/variables" as v; + .not-found { display: flex; - padding: get-spacing(md); + padding: v.get-spacing(md); width: 100%; align-items: center; justify-content: center; diff --git a/frontend/src/styles/_export.scss b/frontend/src/styles/_export.scss index 4d21a32..a740d33 100755 --- a/frontend/src/styles/_export.scss +++ b/frontend/src/styles/_export.scss @@ -1,18 +1,21 @@ +@use "colors" as c; +@use "variables" as v; + /* ============================================ = Exports = ============================================ */ -$property: (gap); +$_property: (gap); -$property-with-direction: ( +$_property-with-direction: ( m: margin, p: padding, ); -$position: (top, bottom, left, right); +$_position: (top, bottom, left, right); // Color -@each $colorKey, $colorValue in $color { +@each $colorKey, $colorValue in c.$color { @each $colorSubkey, $colorSubvalue in $colorValue { #body .color-#{$colorKey}-#{$colorSubkey} { color: $colorSubvalue; @@ -21,7 +24,7 @@ $position: (top, bottom, left, right); } // Background-color -@each $colorKey, $colorValue in $color { +@each $colorKey, $colorValue in c.$color { @each $colorSubkey, $colorSubvalue in $colorValue { #body .bg-#{$colorKey}-#{$colorSubkey} { background-color: $colorSubvalue; @@ -30,8 +33,8 @@ $position: (top, bottom, left, right); } // Property-spacing (eg: gap-xs -> gap: get-spacing(xs)) -@each $propertyKey in $property { - @each $spacingKey, $spacingValue in $spacing { +@each $propertyKey in $_property { + @each $spacingKey, $spacingValue in v.$spacing { #body .#{$propertyKey}-#{$spacingKey} { #{$propertyKey}: $spacingValue; } @@ -39,9 +42,9 @@ $position: (top, bottom, left, right); } // Property with direction-spacing (eg: mr-xs -> margin-right: get-spacing(xs)) -@each $propertyKey, $propertyValue in $property-with-direction { - @each $spacingKey, $spacingValue in $spacing { - @each $directionKey, $directionValues in $direction { +@each $propertyKey, $propertyValue in $_property-with-direction { + @each $spacingKey, $spacingValue in v.$spacing { + @each $directionKey, $directionValues in v.$direction { #body .#{$propertyKey}#{$directionKey}-#{$spacingKey} { @if $directionValues == all { #{$propertyValue}: $spacingValue; @@ -56,8 +59,8 @@ $position: (top, bottom, left, right); } // Position-spacing (eg: top-xs -> top: get-spacing(xs)) -@each $positionKey in $position { - @each $spacingKey, $spacingValue in $spacing { +@each $positionKey in $_position { + @each $spacingKey, $spacingValue in v.$spacing { #body .#{$positionKey}-#{$spacingKey} { #{$positionKey}: $spacingValue; } diff --git a/frontend/src/styles/_fonts.scss b/frontend/src/styles/_fonts.scss index 1bb8016..3b51853 100755 --- a/frontend/src/styles/_fonts.scss +++ b/frontend/src/styles/_fonts.scss @@ -1,10 +1,24 @@ +@use "mixins/fonts" as f; +@use "variables" as v; + /* ============================================ = Fonts = ============================================ */ -@import "mixins/fonts"; +@include f.font-include( + InterTight, + Regular, + v.get-font-weight(regular), + normal +); + +@include f.font-include(InterTight, Medium, v.get-font-weight(medium), normal); + +@include f.font-include( + InterTight, + SemiBold, + v.get-font-weight(semi-bold), + normal +); -@include font-include(InterTight, Regular, get-font-weight(regular), normal); -@include font-include(InterTight, Medium, get-font-weight(medium), normal); -@include font-include(InterTight, SemiBold, get-font-weight(semi-bold), normal); -@include font-include(InterTight, Bold, get-font-weight(bold), normal); +@include f.font-include(InterTight, Bold, v.get-font-weight(bold), normal); diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss index 6f1a286..446532e 100755 --- a/frontend/src/styles/_variables.scss +++ b/frontend/src/styles/_variables.scss @@ -1,49 +1,49 @@ +@use "./colors" as c; +@use "./mixins/generics" as g; + /* ============================================ = Variables = ============================================ */ -@import "./colors"; -@import "./mixins/generics"; - @function get-color($namespace: primary, $variance: main) { - $color-map: get($color, $namespace); - @return get($color-map, $variance); + $color-map: g.get(c.$color, $namespace); + @return g.get($color-map, $variance); } @function get-time($key: normal) { - @return get($time, $key); + @return g.get($time, $key); } @function get-font-weight($key: regular) { - @return get($font-weight, $key); + @return g.get($font-weight, $key); } @function get-font-size($key: md) { - @return get($font-size, $key); + @return g.get($font-size, $key); } @function get-letter-spacing($key: md) { - @return get($letter-spacing, $key); + @return g.get($letter-spacing, $key); } @function get-line-height($key: md) { - @return get($line-height, $key); + @return g.get($line-height, $key); } @function get-spacing($key: md) { - @return get($spacing, $key); + @return g.get($spacing, $key); } @function get-border-radius($key: md) { - @return get($border-radius, $key); + @return g.get($border-radius, $key); } @function get-z($key: md) { - @return get($z, $key); + @return g.get($z, $key); } @function get-media($key: md) { - @return get($media, $key); + @return g.get($media, $key); } $time: ( diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index 4500c0d..2949376 100755 --- a/frontend/src/styles/index.scss +++ b/frontend/src/styles/index.scss @@ -1,13 +1,11 @@ -@import "mixins/normalize"; +@forward "mixins/normalize"; -@import "mixins/media-queries"; +@forward "vendors/toastify.css"; -@import "vendors/toastify.css"; +@forward "fonts"; -@import "animations"; +@forward "animations"; -@import "export"; +@forward "export"; -@import "fonts"; - -@import "globals"; +@forward "globals"; diff --git a/frontend/src/styles/mixins/_generics.scss b/frontend/src/styles/mixins/_generics.scss index 15e709c..54706df 100755 --- a/frontend/src/styles/mixins/_generics.scss +++ b/frontend/src/styles/mixins/_generics.scss @@ -3,10 +3,10 @@ ============================================ */ /* stylelint-disable scss/no-global-function-names */ -$font-base-size: 16; +$_font-base-size: 16; @function rem($sizeInPx) { - @return calc($sizeInPx / $font-base-size) * 1rem; + @return calc($sizeInPx / $_font-base-size) * 1rem; } @function get($map, $key) { diff --git a/frontend/src/styles/mixins/_media-queries.scss b/frontend/src/styles/mixins/_media-queries.scss index 6412fb0..d413eab 100644 --- a/frontend/src/styles/mixins/_media-queries.scss +++ b/frontend/src/styles/mixins/_media-queries.scss @@ -1,3 +1,5 @@ +@use "../variables" as v; + /* ============================================ = Media queries = Use these mixins like this: @@ -12,19 +14,19 @@ Use these mixins like this: ============================================ */ @mixin media-min($breakpoint) { - @media (min-width: get-media($breakpoint)) { + @media (min-width: v.get-media($breakpoint)) { @content; } } @mixin media-max($breakpoint) { - @media (max-width: (get-media($breakpoint) - 1)) { + @media (max-width: (v.get-media($breakpoint) - 1)) { @content; } } @mixin media-range($breakpoint-start, $breakpoint-end) { - @media (min-width: get-media($breakpoint-start)) and (max-width: (get-media($breakpoint-end) - 1)) { + @media (min-width: v.get-media($breakpoint-start)) and (max-width: (v.get-media($breakpoint-end) - 1)) { @content; } } diff --git a/frontend/src/styles/style.module.scss b/frontend/src/styles/style.module.scss index ba5add3..d3f64f8 100755 --- a/frontend/src/styles/style.module.scss +++ b/frontend/src/styles/style.module.scss @@ -1,41 +1,44 @@ +@use "variables" as v; +@use "colors" as c; + /* ============================================ = Module = ============================================ */ :export { - @each $key, $value in $media { + @each $key, $value in v.$media { media-#{$key}: $value; } - @each $key, $value in $font-weight { + @each $key, $value in v.$font-weight { font-weight-#{$key}: $value; } - @each $key, $value in $line-height { + @each $key, $value in v.$line-height { line-height-#{$key}: $value; } - @each $key, $value in $font-size { + @each $key, $value in v.$font-size { font-size-#{$key}: $value; } - @each $key, $value in $letter-spacing { + @each $key, $value in v.$letter-spacing { letter-spacing-#{$key}: $value; } - @each $key, $value in $spacing { + @each $key, $value in v.$spacing { spacing-#{$key}: $value; } - @each $key, $value in $border-radius { + @each $key, $value in v.$border-radius { border-radius-#{$key}: $value; } - @each $key, $value in $time { + @each $key, $value in v.$time { time-#{$key}: $value; } - @each $key, $value in $color { + @each $key, $value in c.$color { @each $subkey, $subvalue in $value { #{$key}-#{$subkey}: $subvalue; } diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index d66a727..8bead37 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -7,13 +7,6 @@ export default ({ mode }: { mode: string }) => { return defineConfig({ plugins: [react()], - css: { - preprocessorOptions: { - scss: { - additionalData: `@import "./src/styles/_variables.scss"; @import "./src/styles/mixins/_media-queries.scss";`, - }, - }, - }, build: { sourcemap: process.env.VITE_GENERATE_SOURCEMAP === "true", },