Issues #9, #10

generators/app/templates/gulp/tasks/sass.js

@@ -1,12 +1,15 @@
 import gulp from 'gulp'
-import sass from 'gulp-sass'
+import dartSass from 'sass'
+import gulpSass from 'gulp-sass'
 import sourcemaps from 'gulp-sourcemaps'
 import autoprefixer from 'autoprefixer'
 import postcss from 'gulp-postcss'
 import csso from 'postcss-csso'
 import postcssCustomProperties from 'postcss-custom-properties'
 import { src, dest, production, errorHandler } from '../config'
 
+const sass = gulpSass(dartSass)
+
 const processors = [
   autoprefixer({
     cascade: false,
@@ -21,7 +24,7 @@ gulp.task('sass', () =>
     .pipe(sourcemaps.init())
     .pipe(
       sass({
-        outputStyle: production ? 'compact' : 'expanded', // nested, expanded, compact, compressed
+        outputStyle: production ? 'compressed' : 'expanded',
         precision: 5,
       })
     )

generators/app/templates/package.json

@@ -120,7 +120,7 @@
     "gulp-postcss": "^9.0.0",
     "gulp-prettify": "^0.5.0",
     "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.1.0",
+    "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-svgmin": "^3.0.0",<% if (sprites.indexOf('png') !== -1) { %>
     "gulp.spritesmith": "^6.11.0",
@@ -136,6 +136,7 @@
     "postcss-custom-properties": "^11.0.0",
     "prettier": "2.3.1",
     "require-yml": "^2.0.0",
+    "sass": "^1.49.0",
     "webpack": "^5.39.1",
     "webpack-bundle-analyzer": "^4.2.0"<% if (pwa) { %>,
     "workbox-build": "^6.1.5"<% } %>

generators/app/templates/src/js/app.js

@@ -14,6 +14,7 @@ class App {
       root: document.documentElement,
       body: document.body,
     }
+    this.LANGUAGE = this.dom.root.getAttribute('lang')?.split('-')[0].toLowerCase() || 'en'
     this.state = {
       hasMenuOpen: false,
     }

generators/app/templates/src/sass/app.sass

@@ -1,3 +1,4 @@
+@use 'sass:math'
 @import helpers/all<% if (sprites.indexOf('png') !== -1 ) { %>
 @import generated/sprite-png
 @import icons-png<% } %><% if (sprites.indexOf('sprite-svg') !== -1) { %>

generators/app/templates/src/sass/components/_layout.sass

@@ -3,10 +3,5 @@
   flex-direction: column
   min-height: 100%
 
-  &__header
-
   &__main
     flex-grow: 1
-
-  &__footer
-

generators/app/templates/src/sass/helpers/_functions.sass

@@ -1,9 +1,9 @@
 @function em($size, $context: $base-fz)
-  @return ($size/$context) * 1em
+  @return (math.div($size, $context)) * 1em
 
 @function rem($size, $context: $base-fz)
-  @return ($size/$context) * 1rem
+  @return (math.div($size, $context)) * 1rem
 
 @function vw($size, $context: $base-desktop)
-  @return ($size/$context) * 100vw
+  @return (math.div($size, $context)) * 100vw
 

generators/app/templates/src/sass/helpers/_mixins.sass

@@ -126,16 +126,16 @@
   height: 0px
   border-style: solid
   @if $direction == t
-    border-width: 0 $width / 2 $height $width / 2
+    border-width: 0 math.div($width, 2) $height math.div($width, 2)
     border-color: transparent transparent $bg transparent
   @if $direction == r
-    border-width: $height / 2 0 $height / 2 $width
+    border-width: math.div($height, 2) 0 math.div($height, 2) $width
     border-color: transparent transparent transparent $bg
   @if $direction == b
-    border-width: $height $width / 2 0 $width / 2
+    border-width: $height math.div($width, 2) 0 math.div($width, 2)
     border-color: $bg transparent transparent transparent
   @if $direction == l
-    border-width: $height / 2 $width $height / 2 0
+    border-width: math.div($height, 2) $width math.div($height, 2) 0
     border-color: transparent $bg transparent transparent
   @if $direction == tl
     border-width: $height $width 0 0
@@ -162,7 +162,6 @@
 =tr($what...)
   transition: $what
 
-
 //icon close
 =icon-close($size, $line-width, $color)
   position: relative

generators/app/templates/src/scss/app.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import 'helpers/all';<% if (sprites.indexOf('png') !== -1 ) { %>
 @import 'generated/sprite-png';
 @import 'icons-png';<% } %><% if (sprites.indexOf('sprite-svg') !== -1) { %>

generators/app/templates/src/scss/components/_layout.scss

@@ -3,11 +3,7 @@
   flex-direction: column;
   min-height: 100%;
 
-  &__header {}
-
   &__main {
     flex-grow: 1
   }
-
-  &__footer {}
 }

generators/app/templates/src/scss/helpers/_functions.scss

@@ -1,11 +1,11 @@
 @function em($size, $context: $base-fz) {
-  @return $size / $context * 1em;
+  @return math.div($size, $context) * 1em;
 }
 
 @function rem($size, $context: $base-fz) {
-  @return $size / $context * 1rem;
+  @return math.div($size, $context) * 1rem;
 }
 
 @function vw($size, $context: $base-desktop) {
-  @return $size / $context * 100vw;
+  @return math.div($size, $context) * 100vw;
 }

generators/app/templates/src/scss/helpers/_mixins.scss

@@ -167,22 +167,22 @@
   border-style: solid;
 
   @if $direction == t {
-    border-width: 0 ($width / 2) $height ($width / 2);
+    border-width: 0 math.div($width, 2) $height math.div($width, 2);
     border-color: transparent transparent $bg transparent;
   }
 
   @if $direction == r {
-    border-width: ($height / 2) 0 ($height / 2) $width;
+    border-width: math.div($height, 2) 0 math.div($height, 2) $width;
     border-color: transparent transparent transparent $bg;
   }
 
   @if $direction == b {
-    border-width: $height ($width / 2) 0 ($width / 2);
+    border-width: $height math.div($width, 2) 0 math.div($width, 2);
     border-color: $bg transparent transparent transparent;
   }
 
   @if $direction == l {
-    border-width: ($height / 2) $width ($height / 2) 0;
+    border-width: math.div($height, 2) $width math.div($height, 2) 0;
     border-color: transparent $bg transparent transparent;
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-front-starter-kit",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "Starter-kit for HTML, CSS, JS projects Generator.",
   "files": [
     "generators"