Fix sass import & use strategy (#181)

* Fix sass import strategy

* Update to forward

apps/front/src/components/app/App.module.scss

@@ -1,4 +1,4 @@
-@use "../../styles/index" as *;
+@use "../../styles/reference" as *;
 
 /**
  * BEM block is always "root" className

apps/front/src/components/cookiesBanner/CookiesBanner.module.scss

@@ -1,4 +1,4 @@
-@use "../../styles/index" as *;
+@use "../../styles/reference" as *;
 
 .root {
   position: fixed;

apps/front/src/components/lazyImage/LazyImage.module.scss

@@ -1,4 +1,4 @@
-@use "../../styles/index" as *;
+@use "../../styles/reference" as *;
 
 .root {
   width: 100%;

apps/front/src/pages/homePage/HomePage.module.scss

@@ -1,4 +1,4 @@
-@use "../../styles/index" as *;
+@use "../../styles/reference" as *;
 
 .root {
 }

apps/front/src/pages/notFoundPage/NotFoundPage.module.scss

@@ -1,4 +1,4 @@
-@use "../../styles/index" as *;
+@use "../../styles/reference" as *;
 
 .root {
 }

apps/front/src/pages/workPage/WorkPage.module.scss

@@ -1,4 +1,4 @@
-@use "../../styles/index" as *;
+@use "../../styles/reference" as *;
 
 .root {
 }

apps/front/src/styles/_breakpoints.scss

@@ -5,11 +5,3 @@ $breakpoint-tablet: 768px;
 $breakpoint-laptop: 1024px;
 $breakpoint-bigLaptop: 1440px;
 $breakpoint-desktop: 1680px;
-
-:root {
-  --breakpoint-mobile: #{$breakpoint-mobile};
-  --breakpoint-tablet: #{$breakpoint-tablet};
-  --breakpoint-laptop: #{$breakpoint-laptop};
-  --breakpoint-bigLaptop: #{$breakpoint-bigLaptop};
-  --breakpoint-desktop: #{$breakpoint-desktop};
-}

apps/front/src/styles/_fonts.scss

@@ -1,16 +1,3 @@
-@font-face {
-  font-family: "roboto-regular";
-  src:
-    url("/src/fonts/roboto-regular/roboto-regular.woff2") format("woff2"),
-    url("/src/fonts/roboto-regular/roboto-regular.woff") format("woff"),
-    url("/src/fonts/roboto-regular/roboto-regular.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
 @mixin font-roboto-regular {
   font-family: "roboto-regular", sans-serif;
 }
-
-// Declare font-face & font mixin...
-// Add the fonts in src/fonts folder

apps/front/src/styles/_references.scss

@@ -0,0 +1,11 @@
+@forward "./_breakpoints.scss";
+@forward "./_colors.scss";
+@forward "./_ease.scss";
+@forward "./_fonts.scss";
+@forward "./_functions.scss";
+@forward "./_grid.scss";
+@forward "./_ratio.scss";
+@forward "./_reset.scss";
+@forward "./_texts.scss";
+@forward "./_utils.scss";
+@forward "./_viewport.scss";

apps/front/src/styles/_viewport.scss

@@ -3,10 +3,3 @@ $viewport-reference-width: 375;
 $viewport-reference-height: 667;
 $viewport-reference-desktop-width: 1440;
 $viewport-reference-desktop-height: 900;
-
-:root {
-  --viewport-reference-width: #{$viewport-reference-width};
-  --viewport-reference-height: #{$viewport-reference-height};
-  --viewport-reference-desktop-width: #{$viewport-reference-desktop-width};
-  --viewport-reference-desktop-height: #{$viewport-reference-desktop-height};
-}

apps/front/src/styles/breakpoints-inline.scss

@@ -0,0 +1,9 @@
+@use "./_breakpoints" as *;
+
+:root {
+  --breakpoint-mobile: #{$breakpoint-mobile};
+  --breakpoint-tablet: #{$breakpoint-tablet};
+  --breakpoint-laptop: #{$breakpoint-laptop};
+  --breakpoint-bigLaptop: #{$breakpoint-bigLaptop};
+  --breakpoint-desktop: #{$breakpoint-desktop};
+}

apps/front/src/styles/fonts-inline.scss

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "roboto-regular";
+  src:
+    url("/src/fonts/roboto-regular/roboto-regular.woff2") format("woff2"),
+    url("/src/fonts/roboto-regular/roboto-regular.woff") format("woff"),
+    url("/src/fonts/roboto-regular/roboto-regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}

apps/front/src/styles/index.scss

@@ -1,14 +1,13 @@
-@import "./_breakpoints.scss";
-@import "./_colors.scss";
-@import "./_ease.scss";
-@import "./_fonts.scss";
-@import "./_functions.scss";
-@import "./_grid.scss";
-@import "./_ratio.scss";
-@import "./_reset.scss";
-@import "./_texts.scss";
-@import "./_utils.scss";
-@import "./_viewport.scss";
+@use "./reference" as *;
+
+// Inline imports are files included only once in this root file
+@import "./breakpoints-inline";
+@import "./colors-inline";
+@import "./ease-inline";
+@import "./fonts-inline";
+@import "./grid-inline";
+@import "./reset-inline";
+@import "./viewport-inline";
 
 :root {
   @include propertyViewport(--font-size, 1);

apps/front/src/styles/reference.scss

@@ -0,0 +1,6 @@
+@forward "./_breakpoints";
+@forward "./_fonts";
+@forward "./_ratio";
+@forward "./_texts";
+@forward "./_utils";
+@forward "./_viewport";

apps/front/src/styles/viewport-inline.scss

@@ -0,0 +1,6 @@
+:root {
+  --viewport-reference-width: #{$viewport-reference-width};
+  --viewport-reference-height: #{$viewport-reference-height};
+  --viewport-reference-desktop-width: #{$viewport-reference-desktop-width};
+  --viewport-reference-desktop-height: #{$viewport-reference-desktop-height};
+}

cli/tasks/scaffold-component/templates/dom/component.scss.template

@@ -1,4 +1,4 @@
-@use "../../styles/index" as *;
+@use "../../styles/reference" as *;
 
 .%%upperComponentName%% {
 

cli/tasks/scaffold-component/templates/react/component.scss.template

@@ -1,4 +1,4 @@
-@use "../../styles/index" as *;
+@use "../../styles/reference" as *;
 
 .root {
 }