From e457c5f22bd37c09b10f7febb36dae8e81a9cdad Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 5 Nov 2024 15:22:44 +0100 Subject: [PATCH 1/2] chore (scss): replace all deprecated rules in latest dart sass changes --- src/scss/01-abstract/_variables.scss | 2 + src/scss/01-abstract/abstract.scss | 4 +- src/scss/02-tools/_f-column.scss | 17 +++-- src/scss/02-tools/_f-context-align.scss | 6 +- src/scss/02-tools/_f-context-selector.scss | 11 ++- src/scss/02-tools/_f-em.scss | 13 ++-- src/scss/02-tools/_f-fluid-size.scss | 9 ++- src/scss/02-tools/_f-get-gutter-width.scss | 4 +- src/scss/02-tools/_f-get-svg-url.scss | 12 ++- src/scss/02-tools/_m-bg-fullwidth.scss | 7 +- .../02-tools/_m-block-vertical-spacing.scss | 4 +- src/scss/02-tools/_m-breakpoint.scss | 12 ++- src/scss/02-tools/_m-btn.scss | 17 +++-- src/scss/02-tools/_m-checkbox-custom.scss | 14 ++-- src/scss/02-tools/_m-container-query.scss | 12 ++- src/scss/02-tools/_m-container.scss | 4 +- src/scss/02-tools/_m-editor-only.scss | 4 +- src/scss/02-tools/_m-heading.scss | 4 +- src/scss/02-tools/_m-hover.scss | 5 +- src/scss/02-tools/_m-not-acf.scss | 4 +- src/scss/02-tools/_m-radio-custom.scss | 9 ++- src/scss/02-tools/_m-scrollbar.scss | 4 +- src/scss/02-tools/_m-select-custom.scss | 22 +++--- src/scss/02-tools/_m-style-only.scss | 4 +- src/scss/02-tools/_m-text-icon.scss | 7 +- src/scss/02-tools/tools.scss | 74 +++++++++---------- src/scss/03-base/_body.scss | 17 +++-- src/scss/03-base/_forms.scss | 39 ++++++---- src/scss/03-base/_links.scss | 9 ++- src/scss/03-base/_print.scss | 4 +- src/scss/03-base/_variables-css.scss | 41 +++++----- src/scss/03-base/base.scss | 20 ++--- src/scss/04-utilities/_container.scss | 7 +- src/scss/04-utilities/_focus.scss | 11 --- src/scss/04-utilities/_js-animation.scss | 6 +- src/scss/04-utilities/_lazyload.scss | 8 +- src/scss/04-utilities/_palette.scss | 4 +- src/scss/04-utilities/_seo.scss | 11 +++ src/scss/04-utilities/_sr-only.scss | 6 +- src/scss/04-utilities/_wp-admin-bar.scss | 4 +- src/scss/04-utilities/utilities.scss | 20 ++--- src/scss/05-components/_btn.scss | 8 +- src/scss/05-components/_skip-links.scss | 9 ++- src/scss/05-components/components.scss | 6 +- src/scss/06-blocks/_gutenberg.scss | 41 +++++----- src/scss/06-blocks/blocks.scss | 44 +++++------ src/scss/06-blocks/core/_audio.scss | 6 +- src/scss/06-blocks/core/_buttons.scss | 2 + src/scss/06-blocks/core/_columns.scss | 7 +- src/scss/06-blocks/core/_cover.scss | 7 +- src/scss/06-blocks/core/_file.scss | 2 + src/scss/06-blocks/core/_freeform.scss | 7 +- src/scss/06-blocks/core/_gallery.scss | 4 +- src/scss/06-blocks/core/_group.scss | 7 +- src/scss/06-blocks/core/_heading.scss | 8 +- src/scss/06-blocks/core/_image.scss | 6 +- src/scss/06-blocks/core/_list.scss | 20 +++-- src/scss/06-blocks/core/_media-text.scss | 10 ++- src/scss/06-blocks/core/_paragraph.scss | 6 +- src/scss/06-blocks/core/_preformatted.scss | 7 +- src/scss/06-blocks/core/_search.scss | 2 + src/scss/06-blocks/core/_separator.scss | 4 +- src/scss/06-blocks/core/_table.scss | 4 +- src/scss/08-template-parts/_header.scss | 57 +++++++------- src/scss/08-template-parts/_hero.scss | 10 ++- .../08-template-parts/template-parts.scss | 6 +- src/scss/09-templates/templates.scss | 6 +- src/scss/editor.scss | 26 +++---- src/scss/style.scss | 24 +++--- 69 files changed, 501 insertions(+), 337 deletions(-) diff --git a/src/scss/01-abstract/_variables.scss b/src/scss/01-abstract/_variables.scss index 58dcdc44..ad8d857f 100644 --- a/src/scss/01-abstract/_variables.scss +++ b/src/scss/01-abstract/_variables.scss @@ -1,6 +1,8 @@ @use "sass:map"; @use "sass:math"; +$entry-file-name: "style"; + /** * Variables */ diff --git a/src/scss/01-abstract/abstract.scss b/src/scss/01-abstract/abstract.scss index 398847bc..b78920fe 100644 --- a/src/scss/01-abstract/abstract.scss +++ b/src/scss/01-abstract/abstract.scss @@ -1,2 +1,2 @@ -@import "./constants"; -@import "./variables"; +@use "constants"; +@use "variables"; diff --git a/src/scss/02-tools/_f-column.scss b/src/scss/02-tools/_f-column.scss index 8ddb7f2b..91216a48 100644 --- a/src/scss/02-tools/_f-column.scss +++ b/src/scss/02-tools/_f-column.scss @@ -1,3 +1,6 @@ +@use "sass:meta"; +@use "../01-abstract/variables"; + @use "sass:map"; @use "sass:math"; @@ -55,7 +58,7 @@ @if not $var { - @return map.get(map.get($column-preset, $device), $prop); + @return map.get(map.get(variables.$column-preset, $device), $prop); } @else { @return $var; @@ -68,7 +71,7 @@ @function column($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) { // shift vars if $device is number - @if type-of($device) == "number" { + @if meta.type-of($device) == "number" { $total-gutter: $total-column; $total-column: $nb-gutter; $nb-gutter: $nb-column; @@ -76,7 +79,7 @@ $device: d; } - $preset: map.get($column-preset, $device); + $preset: map.get(variables.$column-preset, $device); $gutter-width: map.get($preset, gutter-width); $column-width: map.get($preset, column-width); $total-column: column-set-var($total-column, $device, total-column); @@ -98,13 +101,13 @@ @function column-px($device, $nb-column: null, $nb-gutter: null, $unitless: false) { // shift vars if $device is number - @if type-of($device) == "number" { + @if meta.type-of($device) == "number" { $nb-gutter: $nb-column; $nb-column: $device; $device: d; } - $preset: map.get($column-preset, $device); + $preset: map.get(variables.$column-preset, $device); $gutter-width: map.get($preset, gutter-width); $column-width: map.get($preset, column-width); @@ -125,13 +128,13 @@ @function column-full($device, $nb-column: null, $nb-gutter: null) { // shift vars if $device is number - @if type-of($device) == "number" { + @if meta.type-of($device) == "number" { $nb-gutter: $nb-column; $nb-column: $device; $device: d; } - $preset: map.get($column-preset, $device); + $preset: map.get(variables.$column-preset, $device); $gutter-width: map.get($preset, gutter-width); $column-width: map.get($preset, column-width); $total-column: map.get($preset, total-column); diff --git a/src/scss/02-tools/_f-context-align.scss b/src/scss/02-tools/_f-context-align.scss index cec4c732..d3e740ee 100644 --- a/src/scss/02-tools/_f-context-align.scss +++ b/src/scss/02-tools/_f-context-align.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + /** * Align - Make a context align (editor / style) * @@ -27,13 +29,13 @@ $function-context-align-last-value: ""; @function context-align($value: null, $suffix: " > ") { @if not $value { - @if ($entry-file-name == "style") { + @if (variables.$entry-file-name == "style") { @return ".align" + $function-context-align-last-value; } } @else { $function-context-align-last-value: $value !global; - @if ($entry-file-name == "editor") { + @if (variables.$entry-file-name == "editor") { @return "[data-align=\"" + $value + "\"]" + $suffix; } } diff --git a/src/scss/02-tools/_f-context-selector.scss b/src/scss/02-tools/_f-context-selector.scss index 1c8b91d3..47ee915f 100644 --- a/src/scss/02-tools/_f-context-selector.scss +++ b/src/scss/02-tools/_f-context-selector.scss @@ -1,3 +1,6 @@ +@use "sass:meta"; +@use "../01-abstract/variables"; + /** * Context selector - Make a context selector (editor / style) * @@ -53,17 +56,17 @@ $full-selector: ""; $parent: ""; - @if ($entry-file-name == "editor" and $editor) { + @if (variables.$entry-file-name == "editor" and $editor) { $parent: $editor; - } @else if ($entry-file-name == "style" and $default) { + } @else if (variables.$entry-file-name == "style" and $default) { $parent: $default; } @else { @return $selector; } - @if (type-of($selector) == "string") { + @if (meta.type-of($selector) == "string") { $full-selector: $parent + " " + $selector; - } @else if (type-of($selector) == "list") { + } @else if (meta.type-of($selector) == "list") { @each $s in $selector { $full-selector: $full-selector + $parent + " " + $s; } diff --git a/src/scss/02-tools/_f-em.scss b/src/scss/02-tools/_f-em.scss index 4622fb79..b1ba9fec 100644 --- a/src/scss/02-tools/_f-em.scss +++ b/src/scss/02-tools/_f-em.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables"; +@use "f-strip-units"; + @use "sass:math"; /** @@ -20,14 +23,14 @@ * */ -@function em($pxval, $base: $font-size-base) { +@function em($pxval, $base: variables.$font-size-base) { - @if not unitless($pxval) { - $pxval: strip-units($pxval); + @if not math.is-unitless($pxval) { + $pxval: f-strip-units.strip-units($pxval); } - @if not unitless($base) { - $base: strip-units($base); + @if not math.is-unitless($base) { + $base: f-strip-units.strip-units($base); } @return math.div($pxval, $base) * 1em; diff --git a/src/scss/02-tools/_f-fluid-size.scss b/src/scss/02-tools/_f-fluid-size.scss index 1b797bf4..bb9e932f 100644 --- a/src/scss/02-tools/_f-fluid-size.scss +++ b/src/scss/02-tools/_f-fluid-size.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables"; +@use "f-strip-units"; + /** * Fluid size * @@ -25,8 +28,8 @@ @use "sass:math"; @function fluid-size($min, $max, $start: xs, $end: sm) { - $start: math.div(map.get($breakpoints, $start), 100); - $end: math.div(map.get($breakpoints, $end), 100); + $start: math.div(map.get(variables.$breakpoints, $start), 100); + $end: math.div(map.get(variables.$breakpoints, $end), 100); - @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{strip-units($max - $min)}, #{$max}); + @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{f-strip-units.strip-units($max - $min)}, #{$max}); } diff --git a/src/scss/02-tools/_f-get-gutter-width.scss b/src/scss/02-tools/_f-get-gutter-width.scss index 48cef979..58c52fa1 100644 --- a/src/scss/02-tools/_f-get-gutter-width.scss +++ b/src/scss/02-tools/_f-get-gutter-width.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + @use "sass:map"; /** @@ -24,7 +26,7 @@ */ @function get-gutter($preset: d) { - @return map.get(map.get($column-preset, $preset), gutter-width); + @return map.get(map.get(variables.$column-preset, $preset), gutter-width); } @function get-gutter-width($preset: d) { diff --git a/src/scss/02-tools/_f-get-svg-url.scss b/src/scss/02-tools/_f-get-svg-url.scss index da25dce2..5d996762 100644 --- a/src/scss/02-tools/_f-get-svg-url.scss +++ b/src/scss/02-tools/_f-get-svg-url.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "sass:list"; +@use "../01-abstract/variables"; + @use "sass:map"; /** @@ -30,7 +34,7 @@ * */ -@function get-svg-url($name: null, $fill: $color-dark, $opacity: 1, $style: "") { +@function get-svg-url($name: null, $fill: variables.$color-dark, $opacity: 1, $style: "") { $svgs: ( // name-of-the-svg: (viewBox, content of the svg element) @@ -40,7 +44,7 @@ "close": ("0 0 20 20", "3Cpath d='M5.442 5.442 5 5.883l2.058 2.059L9.116 10l-2.058 2.058L5 14.117l.442.441.441.442 2.059-2.058L10 10.884l2.058 2.058L14.117 15l.441-.442.442-.441-2.058-2.059L10.884 10l2.058-2.058L15 5.883l-.442-.441L14.117 5l-2.059 2.058L10 9.116 7.942 7.058 5.883 5l-.441.442'/%3E"), ); - @if not map-has-key($svgs, $name) { + @if not map.has-key($svgs, $name) { @return ""; } @@ -49,8 +53,8 @@ } @if ($fill != "") { - $fill: " fill='rgba(#{red($fill), green($fill), blue($fill), $opacity})'"; + $fill: " fill='rgba(#{color.channel($fill, 'red'), color.channel($fill, 'green'), color.channel($fill, 'blue'), $opacity})'"; } - @return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + nth(map.get($svgs, $name), 1) + "'%3E%" + nth(map.get($svgs, $name), 2) + "%3C/svg%3E"); /* stylelint-disable-line */ + @return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + list.nth(map.get($svgs, $name), 1) + "'%3E%" + list.nth(map.get($svgs, $name), 2) + "%3C/svg%3E"); /* stylelint-disable-line */ } diff --git a/src/scss/02-tools/_m-bg-fullwidth.scss b/src/scss/02-tools/_m-bg-fullwidth.scss index 5bf20e9e..0411d17f 100644 --- a/src/scss/02-tools/_m-bg-fullwidth.scss +++ b/src/scss/02-tools/_m-bg-fullwidth.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables"; +@use "m-style-only"; + /** * Background fullwidth - Make a fullwidth background in a container element * @@ -13,7 +16,7 @@ * */ -@mixin bg-fullwidth($color: $color-grey-100) { +@mixin bg-fullwidth($color: variables.$color-grey-100) { position: relative; &::before { @@ -27,7 +30,7 @@ background-color: $color; transform: translate3d(-50%, 0, 0); - @include style-only { + @include m-style-only.style-only { z-index: -1; } } diff --git a/src/scss/02-tools/_m-block-vertical-spacing.scss b/src/scss/02-tools/_m-block-vertical-spacing.scss index e898d100..77b91be3 100644 --- a/src/scss/02-tools/_m-block-vertical-spacing.scss +++ b/src/scss/02-tools/_m-block-vertical-spacing.scss @@ -1,3 +1,5 @@ +@use "f-context-selector"; + /** * Block vertical spacing */ @@ -22,7 +24,7 @@ * */ @mixin block-vertical-spacing($type : margin, $spacing : var(--spacing--block-3)) { - #{context-selector(".blocks-container > &", ".is-root-container &")} { + #{f-context-selector.context-selector(".blocks-container > &", ".is-root-container &")} { #{$type}-top: $spacing; #{$type}-bottom: $spacing; diff --git a/src/scss/02-tools/_m-breakpoint.scss b/src/scss/02-tools/_m-breakpoint.scss index 3b99c70e..2cf6a0fe 100644 --- a/src/scss/02-tools/_m-breakpoint.scss +++ b/src/scss/02-tools/_m-breakpoint.scss @@ -1,3 +1,7 @@ +@use "sass:meta"; +@use "../01-abstract/variables"; +@use "f-em"; + @use "sass:map"; /** @@ -24,19 +28,19 @@ @mixin breakpoints($breakpoint, $min-or-max-or-breakpoint: min) { $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified - @if (type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") { + @if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") { - @media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) and (max-width: em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) { + @media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) and (max-width: f-em.em(map.get(variables.$breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) { @content; } } @else if ($min-or-max-or-breakpoint == max) { - @media screen and (max-width: em(map.get($breakpoints, $breakpoint) - 1, $font-size)) { + @media screen and (max-width: f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)) { @content; } } @else { - @media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) { + @media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) { @content; } } diff --git a/src/scss/02-tools/_m-btn.scss b/src/scss/02-tools/_m-btn.scss index bb464bcc..15461912 100644 --- a/src/scss/02-tools/_m-btn.scss +++ b/src/scss/02-tools/_m-btn.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables"; +@use "m-hover"; + /** * Button - All mixins for buttons - Used in src/scss/05-components/_btn.scss * @@ -31,12 +34,12 @@ font-size: 12px; font-weight: 700; line-height: 16px; - color: $color-dark; + color: variables.$color-dark; text-align: center; - background-color: $color-primary; + background-color: variables.$color-primary; border-radius: 10px; - @include hover { + @include m-hover.hover { @include btn-block-hover; } } @@ -44,8 +47,8 @@ // hover of the button block @mixin btn-block-hover { - color: $color-primary; - background-color: $color-dark; + color: variables.$color-primary; + background-color: variables.$color-dark; } // Coloring @@ -54,7 +57,7 @@ color: $color; background-color: $background-color; - @include hover { + @include m-hover.hover { color: $background-color; background-color: $color; } @@ -67,7 +70,7 @@ background-color: transparent; border: 2px solid currentColor; // Force button width VS Gutenberg CSS - @include hover { + @include m-hover.hover { @include btn-block-outline-hover; } } diff --git a/src/scss/02-tools/_m-checkbox-custom.scss b/src/scss/02-tools/_m-checkbox-custom.scss index 3fc8e849..0de9c702 100644 --- a/src/scss/02-tools/_m-checkbox-custom.scss +++ b/src/scss/02-tools/_m-checkbox-custom.scss @@ -1,3 +1,7 @@ +@use "../01-abstract/variables"; +@use "m-rtl"; +@use "m-sr-only"; + @use "sass:math"; /** @@ -21,8 +25,8 @@ * */ -@mixin checkbox-custom($color: $color-primary, $size: 18px, $border-width: 1px) { - @include sr-only; +@mixin checkbox-custom($color: variables.$color-primary, $size: 18px, $border-width: 1px) { + @include m-sr-only.sr-only; + label { position: relative; @@ -38,10 +42,10 @@ height: $size; margin: 0; content: ""; - background-color: $color-light; + background-color: variables.$color-light; border: $border-width solid $color; - @include rtl { + @include m-rtl.rtl { right: 0; left: auto; } @@ -61,7 +65,7 @@ transition: opacity .2s; transform: translate(-50%, -50%) rotate(-45deg); - @include rtl { + @include m-rtl.rtl { right: math.round(math.div($size, 2)); left: auto; transform: translate(50%, -50%) rotate(-45deg); diff --git a/src/scss/02-tools/_m-container-query.scss b/src/scss/02-tools/_m-container-query.scss index d8d9669c..b016cea6 100644 --- a/src/scss/02-tools/_m-container-query.scss +++ b/src/scss/02-tools/_m-container-query.scss @@ -1,3 +1,7 @@ +@use "sass:meta"; +@use "../01-abstract/variables"; +@use "f-em"; + @use "sass:map"; /** @@ -25,21 +29,21 @@ @mixin container-query($breakpoint, $min-or-max-or-breakpoint: min, $container-name: "") { $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified - @if (type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") { + @if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") { - @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) and (max-width: #{em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) { + @container #{$container-name} (min-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)}) and (max-width: #{f-em.em(map.get(variables.$breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) { @content; } } @else if ($min-or-max-or-breakpoint == max) { - @container #{$container-name} (max-width: #{em(map.get($breakpoints, $breakpoint) - 1, $font-size)}) { + @container #{$container-name} (max-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)}) { @content; } } @else { - @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) { + @container #{$container-name} (min-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)}) { @content; } diff --git a/src/scss/02-tools/_m-container.scss b/src/scss/02-tools/_m-container.scss index 88258062..8984fe86 100644 --- a/src/scss/02-tools/_m-container.scss +++ b/src/scss/02-tools/_m-container.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + /** * Container * @@ -13,7 +15,7 @@ * */ -@mixin container($size: $container-wide) { +@mixin container($size: variables.$container-wide) { width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2)); margin-inline: auto; } diff --git a/src/scss/02-tools/_m-editor-only.scss b/src/scss/02-tools/_m-editor-only.scss index dd1d273f..b9746300 100644 --- a/src/scss/02-tools/_m-editor-only.scss +++ b/src/scss/02-tools/_m-editor-only.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + /** * Editor style only * @@ -18,7 +20,7 @@ */ @mixin editor-only { - @if ($entry-file-name == "editor") { + @if (variables.$entry-file-name == "editor") { @content; } } diff --git a/src/scss/02-tools/_m-heading.scss b/src/scss/02-tools/_m-heading.scss index 1341158e..28d93d2c 100644 --- a/src/scss/02-tools/_m-heading.scss +++ b/src/scss/02-tools/_m-heading.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + /** * Heading - Used in src/scss/06-blocks/core/_heading.scss * @@ -42,7 +44,7 @@ */ @mixin heading($name: h1, $style: default) { - font-family: $font-family-primary; + font-family: variables.$font-family-primary; font-weight: 400; @if $name == h1 { diff --git a/src/scss/02-tools/_m-hover.scss b/src/scss/02-tools/_m-hover.scss index b549ca64..c3e60c79 100644 --- a/src/scss/02-tools/_m-hover.scss +++ b/src/scss/02-tools/_m-hover.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "sass:list"; /** @@ -44,10 +45,10 @@ $selectors: "&:hover", "&:active", "&:focus"; @if ($additionalSelectors) { - @if (type-of($additionalSelectors) == "string") { + @if (meta.type-of($additionalSelectors) == "string") { $selectors: $selectors "," $additionalSelectors; } - @else if (type-of($additionalSelectors) == "list") { + @else if (meta.type-of($additionalSelectors) == "list") { $selectors: list.join($selectors, $additionalSelectors, comma); } } diff --git a/src/scss/02-tools/_m-not-acf.scss b/src/scss/02-tools/_m-not-acf.scss index 4a99f4e6..06b51057 100644 --- a/src/scss/02-tools/_m-not-acf.scss +++ b/src/scss/02-tools/_m-not-acf.scss @@ -1,3 +1,5 @@ +@use "f-context-selector"; + /** * Not apply style to ACF fields * @@ -14,7 +16,7 @@ */ @mixin not-acf() { - #{context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} { + #{f-context-selector.context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} { @content; } } diff --git a/src/scss/02-tools/_m-radio-custom.scss b/src/scss/02-tools/_m-radio-custom.scss index 8d1478e8..0faf4872 100644 --- a/src/scss/02-tools/_m-radio-custom.scss +++ b/src/scss/02-tools/_m-radio-custom.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables"; +@use "m-checkbox-custom"; + @use "sass:math"; /** @@ -26,9 +29,9 @@ * */ -@mixin radio-custom($include-checkbox-style: false, $color: $color-primary, $size: 18px, $border-width: 1px) { +@mixin radio-custom($include-checkbox-style: false, $color: variables.$color-primary, $size: 18px, $border-width: 1px) { @if ($include-checkbox-style) { - @include checkbox-custom($color, $size, $border-width); + @include m-checkbox-custom.checkbox-custom($color, $size, $border-width); } + label { @@ -48,5 +51,5 @@ } @mixin radio-custom-checked() { - @include checkbox-custom-checked; + @include m-checkbox-custom.checkbox-custom-checked; } diff --git a/src/scss/02-tools/_m-scrollbar.scss b/src/scss/02-tools/_m-scrollbar.scss index 01ff74f3..08fe5df7 100644 --- a/src/scss/02-tools/_m-scrollbar.scss +++ b/src/scss/02-tools/_m-scrollbar.scss @@ -1,3 +1,5 @@ +@use "m-hover"; + /** * Scrollbar - Make an invisible scrollbar and custom the scrollbar color * @@ -55,7 +57,7 @@ border-radius: 20px; } - @include hover { + @include m-hover.hover { &::-webkit-scrollbar { display: block; } diff --git a/src/scss/02-tools/_m-select-custom.scss b/src/scss/02-tools/_m-select-custom.scss index 2b5ef9ea..8c0ba279 100644 --- a/src/scss/02-tools/_m-select-custom.scss +++ b/src/scss/02-tools/_m-select-custom.scss @@ -1,3 +1,7 @@ +@use "../01-abstract/variables"; +@use "f-get-svg-url"; +@use "m-rtl"; + @use "sass:color"; /** @@ -21,17 +25,17 @@ margin: 0; font-size: 16px; // prevent iOS zoom line-height: 1.15; - color: $color-text; - background-color: $color-light; - background-image: get-svg-url("down"), linear-gradient(to bottom, $color-light 0%, $color-light 100%); + color: variables.$color-text; + background-color: variables.$color-light; + background-image: f-get-svg-url.get-svg-url("down"), linear-gradient(to bottom, variables.$color-light 0%, variables.$color-light 100%); background-repeat: no-repeat, repeat; background-position: right 10px top 50%, 0 0; background-size: 10px auto, 100%; - border: 1px solid $color-grey-500; + border: 1px solid variables.$color-grey-500; border-radius: 10px; appearance: none; - @include rtl { + @include m-rtl.rtl { background-position: left 10px top 50%, 0 0; } @@ -47,13 +51,13 @@ // Hover style &:hover { - border-color: color.adjust($color-grey-500, $lightness: -10%); + border-color: color.adjust(variables.$color-grey-500, $lightness: -10%); } // Focus style &:focus { - color: color.adjust($color-text, $lightness: -10%); - border-color: color.adjust($color-grey-500, $lightness: -20%); + color: color.adjust(variables.$color-text, $lightness: -10%); + border-color: color.adjust(variables.$color-grey-500, $lightness: -20%); outline: none; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; @@ -63,7 +67,7 @@ } } - @include rtl { + @include m-rtl.rtl { background-position: left 10px top 50%, 0 0; } } diff --git a/src/scss/02-tools/_m-style-only.scss b/src/scss/02-tools/_m-style-only.scss index 69a34dca..f0e43190 100644 --- a/src/scss/02-tools/_m-style-only.scss +++ b/src/scss/02-tools/_m-style-only.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + /** * Style for Frontend UI only * @@ -18,7 +20,7 @@ */ @mixin style-only { - @if ($entry-file-name == "style") { + @if (variables.$entry-file-name == "style") { @content; } } diff --git a/src/scss/02-tools/_m-text-icon.scss b/src/scss/02-tools/_m-text-icon.scss index d1cc9f84..d3d00bc8 100644 --- a/src/scss/02-tools/_m-text-icon.scss +++ b/src/scss/02-tools/_m-text-icon.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/constants"; +@use "f-get-svg-url"; + /** * Add icon before text with mask to have the same color of the text * @@ -25,9 +28,9 @@ height: $size; content: ""; background-color: $color; - mask-image: get-svg-url($icon); + mask-image: f-get-svg-url.get-svg-url($icon); mask-position: center; mask-repeat: no-repeat; - transition: background-color .5s $ease-out-expo; + transition: background-color .5s constants.$ease-out-expo; } } diff --git a/src/scss/02-tools/tools.scss b/src/scss/02-tools/tools.scss index b2a540e4..20a3afcf 100644 --- a/src/scss/02-tools/tools.scss +++ b/src/scss/02-tools/tools.scss @@ -2,40 +2,40 @@ * Abstract folder entry file */ -@import "./f-assign-inputs"; -@import "./f-column"; -@import "./f-context-align"; -@import "./f-context-selector"; -@import "./f-easings"; -@import "./f-em"; -@import "./f-get-gutter-width"; -@import "./f-get-svg-url"; -@import "./f-strip-units"; -@import "./f-fluid-size"; -@import "./m-align"; -@import "./m-autofill"; -@import "./m-breakpoint"; -@import "./m-btn"; -@import "./m-checkbox-custom"; -@import "./m-container"; -@import "./m-container-query"; -@import "./m-declare-font-face"; -@import "./m-editor-only"; -@import "./m-heading"; -@import "./m-hover"; -@import "./m-line-clamp"; -@import "./m-placeholder-media"; -@import "./m-radio-custom"; -@import "./m-row-fullwidth"; -@import "./m-scrollbar"; -@import "./m-select-custom"; -@import "./m-sr-only"; -@import "./m-style-only"; -@import "./m-reduced-motion"; -@import "./m-bg-fullwidth"; -@import "./m-block-vertical-spacing"; -@import "./m-background-static"; -@import "./m-not-acf"; -@import "./m-rtl"; -@import "./m-text"; -@import "./m-text-icon"; +@use "f-assign-inputs"; +@use "f-column"; +@use "f-context-align"; +@use "f-context-selector"; +@use "f-easings"; +@use "f-em"; +@use "f-get-gutter-width"; +@use "f-get-svg-url"; +@use "f-strip-units"; +@use "f-fluid-size"; +@use "m-align"; +@use "m-autofill"; +@use "m-breakpoint"; +@use "m-btn"; +@use "m-checkbox-custom"; +@use "m-container"; +@use "m-container-query"; +@use "m-declare-font-face"; +@use "m-editor-only"; +@use "m-heading"; +@use "m-hover"; +@use "m-line-clamp"; +@use "m-placeholder-media"; +@use "m-radio-custom"; +@use "m-row-fullwidth"; +@use "m-scrollbar"; +@use "m-select-custom"; +@use "m-sr-only"; +@use "m-style-only"; +@use "m-reduced-motion"; +@use "m-bg-fullwidth"; +@use "m-block-vertical-spacing"; +@use "m-background-static"; +@use "m-not-acf"; +@use "m-rtl"; +@use "m-text"; +@use "m-text-icon"; diff --git a/src/scss/03-base/_body.scss b/src/scss/03-base/_body.scss index c6bdbe39..1463082d 100644 --- a/src/scss/03-base/_body.scss +++ b/src/scss/03-base/_body.scss @@ -1,13 +1,16 @@ +@use "../01-abstract/variables"; +@use "../02-tools/m-rtl"; + html { /* Set automatic RTL direction depending on lang attribute */ - @include set-rtl-direction; + @include m-rtl.set-rtl-direction; /* Apply border-box across the entire page. */ box-sizing: border-box; // HTML resets - font-family: $font-family-primary; - line-height: $line-height-base; + font-family: variables.$font-family-primary; + line-height: variables.$line-height-base; // Scroll resets -webkit-overflow-scrolling: touch; @@ -20,9 +23,9 @@ html { } body { - font-family: $font-family-primary; - font-size: $font-size-base; + font-family: variables.$font-family-primary; + font-size: variables.$font-size-base; font-weight: normal; - color: $color-text; - background-color: $color-light; + color: variables.$color-text; + background-color: variables.$color-light; } diff --git a/src/scss/03-base/_forms.scss b/src/scss/03-base/_forms.scss index fb124761..a078ae14 100644 --- a/src/scss/03-base/_forms.scss +++ b/src/scss/03-base/_forms.scss @@ -1,3 +1,12 @@ +@use "../01-abstract/variables"; +@use "../02-tools/f-assign-inputs"; +@use "../02-tools/f-get-svg-url"; +@use "../02-tools/m-checkbox-custom"; +@use "../02-tools/m-not-acf"; +@use "../02-tools/m-radio-custom"; +@use "../02-tools/m-select-custom"; +@use "../05-components/btn"; + @use "sass:color"; // All inputs variables @@ -8,10 +17,10 @@ $text-inputs-list: 'input[type="color"]', 'input[type="date"]', 'input[type="text"]', 'input[type="time"]', 'input[type="url"]', 'input[type="week"]', "input:not([type])", "textarea"; -$all-text-inputs: assign-inputs($text-inputs-list); +$all-text-inputs: f-assign-inputs.assign-inputs($text-inputs-list); // Not apply style to ACF fields -@include not-acf { +@include m-not-acf.not-acf { // Textarea textarea { resize: vertical; @@ -22,26 +31,26 @@ $all-text-inputs: assign-inputs($text-inputs-list); box-sizing: border-box; width: 100%; padding: 15px 25px; - font-family: $font-family-primary; + font-family: variables.$font-family-primary; line-height: 1; - color: $color-text; - background: color.adjust($color-light, $lightness: -5%); - border: 1px solid $color-grey-500; + color: variables.$color-text; + background: color.adjust(variables.$color-light, $lightness: -5%); + border: 1px solid variables.$color-grey-500; border-radius: 10px; //reset border radius for ios transition: border-color .5s ease; appearance: none; &::placeholder { - color: color.adjust($color-text, $lightness: 50%); + color: color.adjust(variables.$color-text, $lightness: 50%); } &:hover { - border-color: color.adjust($color-grey-500, $lightness: -10%); + border-color: color.adjust(variables.$color-grey-500, $lightness: -10%); } &:focus { - color: color.adjust($color-text, $lightness: -10%); - border-color: color.adjust($color-grey-500, $lightness: -20%); + color: color.adjust(variables.$color-text, $lightness: -10%); + border-color: color.adjust(variables.$color-grey-500, $lightness: -20%); } } @@ -53,20 +62,20 @@ $all-text-inputs: assign-inputs($text-inputs-list); // Custom select select { - @include select-custom; + @include m-select-custom.select-custom; } input[type="checkbox"], input[type="radio"] { - @include checkbox-custom; + @include m-checkbox-custom.checkbox-custom; &:checked { - @include checkbox-custom-checked; + @include m-checkbox-custom.checkbox-custom-checked; } } input[type="radio"] { - @include radio-custom(true); + @include m-radio-custom.radio-custom(true); } /* @@ -100,7 +109,7 @@ $all-text-inputs: assign-inputs($text-inputs-list); width: 16px; height: 16px; cursor: pointer; - background-image: get-svg-url("close", $color-dark); + background-image: f-get-svg-url.get-svg-url("close", variables.$color-dark); background-repeat: no-repeat; background-size: contain; -webkit-appearance: none; diff --git a/src/scss/03-base/_links.scss b/src/scss/03-base/_links.scss index 2e952751..be1577af 100644 --- a/src/scss/03-base/_links.scss +++ b/src/scss/03-base/_links.scss @@ -1,17 +1,20 @@ +@use "../02-tools/m-hover"; +@use "../02-tools/m-text-icon"; + a { color: currentColor; text-decoration: underline; cursor: pointer; &[target="_blank"] { - @include text-icon("external"); + @include m-text-icon.text-icon("external"); } - @include hover { + @include m-hover.hover { text-decoration: none; } } .link-external { - @include text-icon("external"); + @include m-text-icon.text-icon("external"); } diff --git a/src/scss/03-base/_print.scss b/src/scss/03-base/_print.scss index dbc8c65a..f3f31738 100644 --- a/src/scss/03-base/_print.scss +++ b/src/scss/03-base/_print.scss @@ -1,7 +1,9 @@ +@use "../01-abstract/variables"; + @media print { * { font-family: Arial, Helvetica, sans-serif !important; - color: $color-dark !important; + color: variables.$color-dark !important; text-decoration: none; text-shadow: none !important; background: transparent !important; diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss index 3c6ec979..09857e10 100644 --- a/src/scss/03-base/_variables-css.scss +++ b/src/scss/03-base/_variables-css.scss @@ -1,3 +1,8 @@ +@use "../01-abstract/variables"; +@use "../02-tools/f-fluid-size"; +@use "../02-tools/m-breakpoint"; +@use "../02-tools/m-reduced-motion"; + :root { /* * Heading @@ -13,11 +18,11 @@ /** * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * - * --heading--font-size-h1: #{fluid-size(58px, 156px)}; - * --heading--font-size-h2: #{fluid-size(47px, 96px)}; - * --heading--font-size-h3: #{fluid-size(38px, 52px)}; - * --heading--font-size-h4: #{fluid-size(32px, 45px)}; - * --heading--font-size-h5: #{fluid-size(28px, 34px)}; + * --heading--font-size-h1: #{f-fluid-size.fluid-size(58px, 156px)}; + * --heading--font-size-h2: #{f-fluid-size.fluid-size(47px, 96px)}; + * --heading--font-size-h3: #{f-fluid-size.fluid-size(38px, 52px)}; + * --heading--font-size-h4: #{f-fluid-size.fluid-size(32px, 45px)}; + * --heading--font-size-h5: #{f-fluid-size.fluid-size(28px, 34px)}; */ // Line height @@ -40,10 +45,10 @@ /** * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * - * --paragraph--font-size-huge: #{fluid-size(28px, 32px)}; - * --paragraph--font-size-large: #{fluid-size(20px, 24px)}; - * --paragraph--font-size-small: #{fluid-size(12px, 14px)}; - * --paragraph--font-size-default: #{fluid-size(14px, 16px)}; + * --paragraph--font-size-huge: #{f-fluid-size.fluid-size(28px, 32px)}; + * --paragraph--font-size-large: #{f-fluid-size.fluid-size(20px, 24px)}; + * --paragraph--font-size-small: #{f-fluid-size.fluid-size(12px, 14px)}; + * --paragraph--font-size-default: #{f-fluid-size.fluid-size(14px, 16px)}; */ // line height @@ -64,10 +69,10 @@ * Spacing fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * * Fluid spacing : - * --spacing--block-1: #{fluid-size(16px, 32px)}; - * --spacing--block-2: #{fluid-size(32px, 64px)}; - * --spacing--block-3: #{fluid-size(48px, 96px)}; - * --spacing--block-4: #{fluid-size(64px, 128px)}; + * --spacing--block-1: #{f-fluid-size.fluid-size(16px, 32px)}; + * --spacing--block-2: #{f-fluid-size.fluid-size(32px, 64px)}; + * --spacing--block-3: #{f-fluid-size.fluid-size(48px, 96px)}; + * --spacing--block-4: #{f-fluid-size.fluid-size(64px, 128px)}; * * Fixed spacings : * --spacing--fixed--block-1: 16px; @@ -77,7 +82,7 @@ /* * Gutters */ - --responsive--gutter: #{$external-gutter-mobile}; + --responsive--gutter: #{variables.$external-gutter-mobile}; /* * Alignments @@ -103,7 +108,7 @@ /* * A11y reduced motion */ - @include reduced-motion { + @include m-reduced-motion.reduced-motion { --speed: 0s; } @@ -111,7 +116,7 @@ * Global breakpoints */ - @include breakpoints(s, max) { + @include m-breakpoint.breakpoints(s, max) { /* * Admin bar become not sticky */ @@ -122,7 +127,7 @@ } } - @include breakpoints(md) { + @include m-breakpoint.breakpoints(md) { /* * Spacing * /!\ IMPORTANT : Remove it if you use fluid size function instead /!\ @@ -135,6 +140,6 @@ /* * Gutters */ - --responsive--gutter: #{$external-gutter}; + --responsive--gutter: #{variables.$external-gutter}; } } diff --git a/src/scss/03-base/base.scss b/src/scss/03-base/base.scss index b09c00ad..bad2f584 100644 --- a/src/scss/03-base/base.scss +++ b/src/scss/03-base/base.scss @@ -2,13 +2,13 @@ * Base folder entry file */ -@import "./fonts"; -@import "./variables-css"; -@import "./normalize"; -@import "./body"; -@import "./svg-icons"; -@import "./forms"; -@import "./links"; -@import "./media"; -@import "./text"; -@import "./print"; +@use "fonts"; +@use "variables-css"; +@use "normalize"; +@use "body"; +@use "svg-icons"; +@use "forms"; +@use "links"; +@use "media"; +@use "text"; +@use "print"; diff --git a/src/scss/04-utilities/_container.scss b/src/scss/04-utilities/_container.scss index c10d2f52..cfdeda7b 100644 --- a/src/scss/04-utilities/_container.scss +++ b/src/scss/04-utilities/_container.scss @@ -1,9 +1,12 @@ +@use "../01-abstract/variables"; +@use "../02-tools/m-container"; + /* Main Layout */ .container, .container-wide { - @include container; + @include m-container.container; } .container-default { - @include container($container-default); + @include m-container.container(variables.$container-default); } diff --git a/src/scss/04-utilities/_focus.scss b/src/scss/04-utilities/_focus.scss index 82747d14..9100934e 100644 --- a/src/scss/04-utilities/_focus.scss +++ b/src/scss/04-utilities/_focus.scss @@ -11,14 +11,3 @@ html { } } } - -%focus-seo-container { - &:has(:focus-visible) { - outline: 2px solid currentColor; - outline-offset: .5rem; - } - - *:focus { - outline: none; - } -} diff --git a/src/scss/04-utilities/_js-animation.scss b/src/scss/04-utilities/_js-animation.scss index db2ef44b..4dcc67dc 100644 --- a/src/scss/04-utilities/_js-animation.scss +++ b/src/scss/04-utilities/_js-animation.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/constants"; + /** * js-animation * @@ -39,7 +41,7 @@ %js-animation-translation-init { > * { opacity: 0; - transition: opacity .5s, transform .5s $ease-out-expo; + transition: opacity .5s, transform .5s constants.$ease-out-expo; transform: translateY(100px); } } @@ -79,7 +81,7 @@ > span { display: inline-block; - transition: transform .75s $ease-out-expo; + transition: transform .75s constants.$ease-out-expo; transform: translateY(150%); } } diff --git a/src/scss/04-utilities/_lazyload.scss b/src/scss/04-utilities/_lazyload.scss index df725030..6ef983f4 100644 --- a/src/scss/04-utilities/_lazyload.scss +++ b/src/scss/04-utilities/_lazyload.scss @@ -1,8 +1,10 @@ +@use "../01-abstract/variables"; + @use "sass:math"; .lazyload, .lazyloading { - background: $color-primary; + background: variables.$color-primary; opacity: 0; } @@ -30,7 +32,7 @@ $loading-dimensions: 50px; left: 0; z-index: 2; content: ""; - background: $color-primary; + background: variables.$color-primary; transition: opacity .5s, z-index .5s ease .5s; } @@ -42,7 +44,7 @@ $loading-dimensions: 50px; width: $loading-dimensions; height: $loading-dimensions; content: ""; - border: 5px solid $color-light; + border: 5px solid variables.$color-light; border-top-color: transparent; border-radius: $loading-dimensions; opacity: 1; diff --git a/src/scss/04-utilities/_palette.scss b/src/scss/04-utilities/_palette.scss index 26f4426a..c7827d60 100644 --- a/src/scss/04-utilities/_palette.scss +++ b/src/scss/04-utilities/_palette.scss @@ -1,6 +1,8 @@ +@use "../01-abstract/variables"; + @use "sass:map"; -@each $name, $colors in $palette { +@each $name, $colors in variables.$palette { .has-#{$name}-color { color: map.get($colors, color); } diff --git a/src/scss/04-utilities/_seo.scss b/src/scss/04-utilities/_seo.scss index 7d3aedd5..1972f556 100644 --- a/src/scss/04-utilities/_seo.scss +++ b/src/scss/04-utilities/_seo.scss @@ -1,3 +1,14 @@ +%focus-seo-container { + &:has(:focus-visible) { + outline: 2px solid currentColor; + outline-offset: .5rem; + } + + *:focus { + outline: none; + } +} + %seo-container { @extend %focus-seo-container; position: relative; diff --git a/src/scss/04-utilities/_sr-only.scss b/src/scss/04-utilities/_sr-only.scss index 856fb6bb..87eaf522 100644 --- a/src/scss/04-utilities/_sr-only.scss +++ b/src/scss/04-utilities/_sr-only.scss @@ -1,9 +1,11 @@ +@use "../02-tools/m-sr-only"; + %sr-only { - @include sr-only; + @include m-sr-only.sr-only; } %sr-only-focusable { - @include sr-only(true); + @include m-sr-only.sr-only(true); } .sr-only { diff --git a/src/scss/04-utilities/_wp-admin-bar.scss b/src/scss/04-utilities/_wp-admin-bar.scss index b09db67a..37a1998d 100644 --- a/src/scss/04-utilities/_wp-admin-bar.scss +++ b/src/scss/04-utilities/_wp-admin-bar.scss @@ -1,5 +1,7 @@ +@use "../02-tools/m-breakpoint"; + #wpadminbar { - @include breakpoints(sm, max) { + @include m-breakpoint.breakpoints(sm, max) { overflow: scroll; } } diff --git a/src/scss/04-utilities/utilities.scss b/src/scss/04-utilities/utilities.scss index a86ff752..e17147b9 100644 --- a/src/scss/04-utilities/utilities.scss +++ b/src/scss/04-utilities/utilities.scss @@ -1,10 +1,10 @@ -@import "./wp-admin-bar"; -@import "./focus"; -@import "./lazyload"; -@import "./seo"; -@import "./video-wrapper"; -@import "./palette"; -@import "./container"; -@import "./sr-only"; -@import "./js-animation"; -@import "./aria"; +@use "wp-admin-bar"; +@use "focus"; +@use "lazyload"; +@use "seo"; +@use "video-wrapper"; +@use "palette"; +@use "container"; +@use "sr-only"; +@use "js-animation"; +@use "aria"; diff --git a/src/scss/05-components/_btn.scss b/src/scss/05-components/_btn.scss index 65ba6377..aaae5e7c 100644 --- a/src/scss/05-components/_btn.scss +++ b/src/scss/05-components/_btn.scss @@ -1,15 +1,17 @@ +@use "../02-tools/m-btn"; + %btn { - @include btn; + @include m-btn.btn; } %btn-block { @extend %btn; - @include btn-block; + @include m-btn.btn-block; } %btn-block-outline { @extend %btn-block; - @include btn-block-outline; + @include m-btn.btn-block-outline; } .btn { diff --git a/src/scss/05-components/_skip-links.scss b/src/scss/05-components/_skip-links.scss index 9a96aae0..e0c4e362 100644 --- a/src/scss/05-components/_skip-links.scss +++ b/src/scss/05-components/_skip-links.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/constants"; +@use "../01-abstract/variables"; + .skip-links { position: fixed; top: var(--wp-admin-bar-height); @@ -5,9 +8,9 @@ z-index: 11; // Under header width: 100%; padding: 8px 10px 10px; - background-color: $color-primary; + background-color: variables.$color-primary; opacity: 0; - transition: transform .3s $ease-out-expo, opacity .3s; + transition: transform .3s constants.$ease-out-expo, opacity .3s; transform: translate3d(0, -100%, 0); ul { @@ -17,7 +20,7 @@ a { font-size: 13px; - color: $color-text; + color: variables.$color-text; text-decoration: none; &:focus { diff --git a/src/scss/05-components/components.scss b/src/scss/05-components/components.scss index 436e5ae0..469c635e 100644 --- a/src/scss/05-components/components.scss +++ b/src/scss/05-components/components.scss @@ -2,6 +2,6 @@ * Elements folder entry file */ -@import "./btn"; -@import "./searchform"; -@import "./skip-links"; +@use "btn"; +@use "searchform"; +@use "skip-links"; diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss index ffd46ba8..223a35ac 100644 --- a/src/scss/06-blocks/_gutenberg.scss +++ b/src/scss/06-blocks/_gutenberg.scss @@ -1,12 +1,19 @@ -@include editor-only { +@use "../01-abstract/variables"; +@use "../02-tools/f-context-selector"; +@use "../02-tools/f-get-gutter-width"; +@use "../02-tools/m-align"; +@use "../02-tools/m-editor-only"; +@use "../02-tools/m-heading"; + +@include m-editor-only.editor-only { // ---- // Post title style // ---- .editor-post-title { - @include heading(h1); + @include m-heading.heading(h1); - width: #{$container-wide}; + width: #{variables.$container-wide}; max-width: var(--responsive--alignwide-width); margin-bottom: var(--spacing--block-3); } @@ -16,7 +23,7 @@ // ---- .wp-block.block-editor-default-block-appender > textarea { font-family: var(--global--font-secondary); - font-size: $font-size-md; + font-size: variables.$font-size-md; } // ---- @@ -39,7 +46,7 @@ .has-drop-cap:not(:focus)::first-letter { float: left; margin: .1em .1em 0 0; - font-family: var($font-family-primary); + font-family: var(variables.$font-family-primary); font-size: calc(1.2 * var(--heading--font-size-h1)); font-style: normal; font-weight: var(--heading--font-weight); @@ -47,18 +54,18 @@ text-transform: uppercase; } -#{context-selector(".blocks-container", ".is-root-container")} { +#{f-context-selector.context-selector(".blocks-container", ".is-root-container")} { // ---- // Alignements horizontaux // ---- > :where(*) { - width: #{$container-default}; + width: #{variables.$container-default}; max-width: var(--responsive--aligndefault-width); margin-right: auto; margin-left: auto; } - @include editor-only { + @include m-editor-only.editor-only { > .wp-block[class*="wp-block-acf"], > .wp-block[class*="wp-block-beapi-manual-block"], > .wp-block[class*="wp-block-beapi-dynamic-block"] { @@ -67,7 +74,7 @@ } > .wp-block[class*="wp-block-acf"].is-selected { - width: #{$container-wide}; + width: #{variables.$container-wide}; max-width: var(--responsive--alignwide-width); } @@ -75,31 +82,31 @@ > :where(.wp-block[class*="wp-block-acf"]) :where(.block), > :where(.wp-block[class*="wp-block-beapi-manual-block"]) :where(.block), > :where(.wp-block[class*="wp-block-beapi-dynamic-block"]) :where(.block) { - width: $container-default; + width: variables.$container-default; max-width: var(--responsive--aligndefault-width); margin-right: auto; margin-left: auto; } } - #{context-selector(".alignwide", "[data-align='wide']")} { - width: #{$container-wide}; + #{f-context-selector.context-selector(".alignwide", "[data-align='wide']")} { + width: #{variables.$container-wide}; max-width: var(--responsive--alignwide-width); } - #{context-selector(".alignfull", "[data-align='full']")} { + #{f-context-selector.context-selector(".alignfull", "[data-align='full']")} { width: 100%; max-width: var(--responsive--alignfull-width); } .alignleft { - @include align; + @include m-align.align; } .alignright { - @include align(right); + @include m-align.align(right); } .aligncenter { @@ -117,7 +124,7 @@ :where(.is-layout-flex), :where(.is-layout-grid) { - gap: get-gutter-width(); + gap: f-get-gutter-width.get-gutter-width(); } // ---- @@ -156,7 +163,7 @@ } } - @include editor-only { + @include m-editor-only.editor-only { > * { diff --git a/src/scss/06-blocks/blocks.scss b/src/scss/06-blocks/blocks.scss index bd90a76a..58eb15f7 100644 --- a/src/scss/06-blocks/blocks.scss +++ b/src/scss/06-blocks/blocks.scss @@ -4,25 +4,25 @@ // - In the future the Block styles may get compiled to individual .css // files and conditionally loaded -@import "./core/audio"; -@import "./core/buttons"; -@import "./core/code"; -@import "./core/columns"; -@import "./core/cover"; -@import "./core/file"; -@import "./core/freeform"; -@import "./core/gallery"; -@import "./core/group"; -@import "./core/heading"; -@import "./core/image"; -@import "./core/list"; -@import "./core/media-text"; -@import "./core/paragraph"; -@import "./core/preformatted"; -@import "./core/pullquote"; -@import "./core/quote"; -@import "./core/separator"; -@import "./core/search"; -@import "./core/spacer"; -@import "./core/table"; -@import "./core/video"; +@use "core/audio"; +@use "core/buttons"; +@use "core/code"; +@use "core/columns"; +@use "core/cover"; +@use "core/file"; +@use "core/freeform"; +@use "core/gallery"; +@use "core/group"; +@use "core/heading"; +@use "core/image"; +@use "core/list"; +@use "core/media-text"; +@use "core/paragraph"; +@use "core/preformatted"; +@use "core/pullquote"; +@use "core/quote"; +@use "core/separator"; +@use "core/search"; +@use "core/spacer"; +@use "core/table"; +@use "core/video"; diff --git a/src/scss/06-blocks/core/_audio.scss b/src/scss/06-blocks/core/_audio.scss index d0c76ab9..93f59332 100644 --- a/src/scss/06-blocks/core/_audio.scss +++ b/src/scss/06-blocks/core/_audio.scss @@ -1,11 +1,13 @@ +@use "../../01-abstract/variables"; + .wp-block-audio { audio { &::-webkit-media-controls-panel { - background-color: $color-primary; + background-color: variables.$color-primary; } &:focus { - outline: 2px solid $color-primary; + outline: 2px solid variables.$color-primary; outline-offset: 5px; } } diff --git a/src/scss/06-blocks/core/_buttons.scss b/src/scss/06-blocks/core/_buttons.scss index 92fa30ab..e0dd6c9a 100644 --- a/src/scss/06-blocks/core/_buttons.scss +++ b/src/scss/06-blocks/core/_buttons.scss @@ -1,3 +1,5 @@ +@use "../../05-components/btn"; + .wp-block { // ---- // container diff --git a/src/scss/06-blocks/core/_columns.scss b/src/scss/06-blocks/core/_columns.scss index a7688a56..7a777b5b 100644 --- a/src/scss/06-blocks/core/_columns.scss +++ b/src/scss/06-blocks/core/_columns.scss @@ -1,5 +1,8 @@ +@use "../../02-tools/m-block-vertical-spacing"; +@use "../../02-tools/m-breakpoint"; + .wp-block-columns { - @include block-vertical-spacing(); + @include m-block-vertical-spacing.block-vertical-spacing(); .wp-block-column { &.has-background { @@ -12,7 +15,7 @@ margin-left: 0 !important; } - @include breakpoints(md, max) { + @include m-breakpoint.breakpoints(md, max) { flex-wrap: wrap !important; .wp-block-column { diff --git a/src/scss/06-blocks/core/_cover.scss b/src/scss/06-blocks/core/_cover.scss index c822270d..b768ff49 100644 --- a/src/scss/06-blocks/core/_cover.scss +++ b/src/scss/06-blocks/core/_cover.scss @@ -1,17 +1,20 @@ +@use "../../02-tools/m-editor-only"; +@use "../../02-tools/m-style-only"; + .wp-block-cover, .wp-block-cover-image { &:not(.alignwide):not(.alignfull) { clear: both; } - @include style-only { + @include m-style-only.style-only { &.alignfull { margin-top: 0; margin-bottom: 0; } } - @include editor-only { + @include m-editor-only.editor-only { [data-align="full"] & { margin-top: 0; margin-bottom: 0; diff --git a/src/scss/06-blocks/core/_file.scss b/src/scss/06-blocks/core/_file.scss index ec51aac2..8e8403f8 100644 --- a/src/scss/06-blocks/core/_file.scss +++ b/src/scss/06-blocks/core/_file.scss @@ -1,3 +1,5 @@ +@use "../../05-components/btn"; + .wp-block-file { $el: &; diff --git a/src/scss/06-blocks/core/_freeform.scss b/src/scss/06-blocks/core/_freeform.scss index 6d1f5848..8a34dbe4 100644 --- a/src/scss/06-blocks/core/_freeform.scss +++ b/src/scss/06-blocks/core/_freeform.scss @@ -1,5 +1,8 @@ +@use "../../01-abstract/variables"; +@use "../../02-tools/m-editor-only"; + .wp-block-freeform { - @include editor-only { + @include m-editor-only.editor-only { // Remove the border of blockquotes inside the classic block. &.block-library-rich-text__tinymce blockquote { border: none; @@ -12,7 +15,7 @@ // Backend Classic editor container .mce-content-body { - width: #{$container-wide}; + width: #{variables.$container-wide}; max-width: var(--responsive--alignwide-width); margin: 0; } diff --git a/src/scss/06-blocks/core/_gallery.scss b/src/scss/06-blocks/core/_gallery.scss index 75a7afaa..cf066295 100644 --- a/src/scss/06-blocks/core/_gallery.scss +++ b/src/scss/06-blocks/core/_gallery.scss @@ -1,3 +1,5 @@ +@use "../../02-tools/f-get-gutter-width"; + .wp-block-gallery { - --wp--style--gallery-gap-default: #{get-gutter-width()} !important; + --wp--style--gallery-gap-default: #{f-get-gutter-width.get-gutter-width()} !important; } diff --git a/src/scss/06-blocks/core/_group.scss b/src/scss/06-blocks/core/_group.scss index 03878e2c..77f56021 100644 --- a/src/scss/06-blocks/core/_group.scss +++ b/src/scss/06-blocks/core/_group.scss @@ -1,3 +1,6 @@ +@use "../../02-tools/m-breakpoint"; +@use "../../02-tools/m-editor-only"; + .wp-block-group { $el: &; @@ -14,14 +17,14 @@ } } - @include breakpoints(sm, max) { + @include m-breakpoint.breakpoints(sm, max) { &--full-mobile { max-width: 100% !important; } } } -@include editor-only { +@include m-editor-only.editor-only { .wp-block-group { &:not(.is-layout-grid) { display: flow-root; diff --git a/src/scss/06-blocks/core/_heading.scss b/src/scss/06-blocks/core/_heading.scss index 47b388ba..e35d4304 100644 --- a/src/scss/06-blocks/core/_heading.scss +++ b/src/scss/06-blocks/core/_heading.scss @@ -1,3 +1,5 @@ +@use "../../02-tools/m-heading"; + /** * Headings * @@ -33,17 +35,17 @@ $headings: ( @each $i, $styles in $headings { h#{$i} { - @include heading(h#{$i}); + @include m-heading.heading(h#{$i}); @each $style in $styles { &.is-style-#{$style} { - @include heading(h#{$i}, $style); + @include m-heading.heading(h#{$i}, $style); } } } .is-style-h#{$i} { - @include heading(h#{$i}); + @include m-heading.heading(h#{$i}); } .has-h-#{$i}-font-size { diff --git a/src/scss/06-blocks/core/_image.scss b/src/scss/06-blocks/core/_image.scss index cab35af6..c73f2ca2 100644 --- a/src/scss/06-blocks/core/_image.scss +++ b/src/scss/06-blocks/core/_image.scss @@ -1,3 +1,5 @@ +@use "../../01-abstract/variables"; + .wp-block-image { > img { max-width: 100%; @@ -5,7 +7,7 @@ } figcaption { - font-size: $font-size-xs; - color: $color-grey-600; + font-size: variables.$font-size-xs; + color: variables.$color-grey-600; } } diff --git a/src/scss/06-blocks/core/_list.scss b/src/scss/06-blocks/core/_list.scss index 2b7746f5..c23d1425 100644 --- a/src/scss/06-blocks/core/_list.scss +++ b/src/scss/06-blocks/core/_list.scss @@ -1,10 +1,14 @@ +@use "../../01-abstract/variables"; +@use "../../02-tools/f-context-selector"; +@use "../../02-tools/m-rtl"; + // Use the no-list-style class in your theme if you want the basic style %marker-ol-default { font-size: 16px; font-weight: 700; line-height: 1.3; - color: $color-dark; + color: variables.$color-dark; } %marker-ul-default { @@ -14,24 +18,24 @@ width: 6px; height: 6px; content: ""; - background-color: $color-dark; + background-color: variables.$color-dark; border-radius: 100%; - @include rtl { + @include m-rtl.rtl { right: -15px; left: inherit; } } -#{context-selector('.blocks-container', '.is-root-container')} { +#{f-context-selector.context-selector('.blocks-container', '.is-root-container')} { --offset-item: 30px; --vertical-spaging-item: 16px; ul, ol { &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) { - font-size: var(--paragraph--font-size-default, $font-size-base); - line-height: var(--paragraph--line-height-default, $line-height-base); + font-size: var(--paragraph--font-size-default, variables.$font-size-base); + line-height: var(--paragraph--line-height-default, variables.$line-height-base); ul, ol { @@ -50,7 +54,7 @@ padding-left: var(--offset-item); margin-bottom: var(--vertical-spaging-item); - @include rtl { + @include m-rtl.rtl { padding-right: var(--offset-item); padding-left: 0; } @@ -76,7 +80,7 @@ margin-bottom: var(--vertical-spaging-item); margin-left: calc(var(--offset-item) * .5); - @include rtl { + @include m-rtl.rtl { padding-right: calc(var(--offset-item) * .5); padding-left: 0; margin-right: calc(var(--offset-item) * .5); diff --git a/src/scss/06-blocks/core/_media-text.scss b/src/scss/06-blocks/core/_media-text.scss index efd47a97..f5db90ea 100644 --- a/src/scss/06-blocks/core/_media-text.scss +++ b/src/scss/06-blocks/core/_media-text.scss @@ -1,16 +1,20 @@ +@use "../../02-tools/m-editor-only"; +@use "../../02-tools/m-rtl"; +@use "../../02-tools/m-style-only"; + .wp-block-media-text { - @include rtl { + @include m-rtl.rtl { direction: rtl; // Force direction RTL, because WP force LTR direction on RTL view } - @include style-only { + @include m-style-only.style-only { &.alignfull { margin-top: 0; margin-bottom: 0; } } - @include editor-only { + @include m-editor-only.editor-only { [data-align="full"] & { margin-top: 0; margin-bottom: 0; diff --git a/src/scss/06-blocks/core/_paragraph.scss b/src/scss/06-blocks/core/_paragraph.scss index b408979b..f8c0b947 100644 --- a/src/scss/06-blocks/core/_paragraph.scss +++ b/src/scss/06-blocks/core/_paragraph.scss @@ -1,7 +1,9 @@ +@use "../../02-tools/m-text"; + $paragraphs: "default", "small", "large", "huge"; p { - @include text(default); + @include m-text.text(default); &.has-background { padding: 20px; @@ -9,7 +11,7 @@ p { @each $style in $paragraphs { &.is-style-#{$style} { - @include text(#{$style}); + @include m-text.text(#{$style}); } } } diff --git a/src/scss/06-blocks/core/_preformatted.scss b/src/scss/06-blocks/core/_preformatted.scss index 3ec6b650..172ccdca 100644 --- a/src/scss/06-blocks/core/_preformatted.scss +++ b/src/scss/06-blocks/core/_preformatted.scss @@ -1,11 +1,14 @@ +@use "../../02-tools/m-editor-only"; +@use "../../02-tools/m-style-only"; + .wp-block-preformatted { overflow-x: auto; - @include style-only { + @include m-style-only.style-only { white-space: pre; } - @include editor-only { + @include m-editor-only.editor-only { white-space: pre !important; } } diff --git a/src/scss/06-blocks/core/_search.scss b/src/scss/06-blocks/core/_search.scss index 5002363f..785871c7 100644 --- a/src/scss/06-blocks/core/_search.scss +++ b/src/scss/06-blocks/core/_search.scss @@ -1,3 +1,5 @@ +@use "../../05-components/btn"; + .wp-block-search { $el: &; diff --git a/src/scss/06-blocks/core/_separator.scss b/src/scss/06-blocks/core/_separator.scss index d221bd04..dd49a986 100644 --- a/src/scss/06-blocks/core/_separator.scss +++ b/src/scss/06-blocks/core/_separator.scss @@ -1,3 +1,5 @@ +@use "../../02-tools/m-editor-only"; + hr { margin-right: auto; margin-left: auto; @@ -9,7 +11,7 @@ hr { } } -@include editor-only { +@include m-editor-only.editor-only { .wp-block-separator, hr { clear: both; diff --git a/src/scss/06-blocks/core/_table.scss b/src/scss/06-blocks/core/_table.scss index f0b6b714..0b45f21c 100644 --- a/src/scss/06-blocks/core/_table.scss +++ b/src/scss/06-blocks/core/_table.scss @@ -1,3 +1,5 @@ +@use "../../02-tools/m-not-acf"; + %table { width: 100%; min-width: 240px; @@ -9,7 +11,7 @@ } // Not apply style to ACF fields -@include not-acf { +@include m-not-acf.not-acf { table { @extend %table; } diff --git a/src/scss/08-template-parts/_header.scss b/src/scss/08-template-parts/_header.scss index e0da6c64..9e97ea25 100644 --- a/src/scss/08-template-parts/_header.scss +++ b/src/scss/08-template-parts/_header.scss @@ -1,3 +1,10 @@ +@use "../01-abstract/constants"; +@use "../01-abstract/variables"; +@use "../02-tools/f-column"; +@use "../02-tools/m-breakpoint"; +@use "../02-tools/m-hover"; +@use "../02-tools/m-rtl"; + /** * Header */ @@ -39,11 +46,11 @@ height: 46px; padding: 0; cursor: pointer; - background: $color-text; + background: variables.$color-text; border: none; border-radius: 50%; - @include rtl { + @include m-rtl.rtl { right: auto; left: var(--responsive--gutter); } @@ -55,9 +62,9 @@ width: 20px; height: 2px; margin: -1px 0 0 -10px; - background: $color-light; + background: variables.$color-light; border-radius: 2px; - transition: background-color .5s $ease-in-out-expo; + transition: background-color .5s constants.$ease-in-out-expo; &::before, &::after { @@ -67,9 +74,9 @@ width: 100%; height: 100%; content: ""; - background: $color-light; + background: variables.$color-light; border-radius: inherit; - transition: transform .5s $ease-in-out-expo; + transition: transform .5s constants.$ease-in-out-expo; } &::before { @@ -120,7 +127,7 @@ width: 50px; height: 50px; padding: 0; - color: $color-dark; + color: variables.$color-dark; text-indent: -10000px; vertical-align: middle; cursor: pointer; @@ -160,7 +167,7 @@ &--menu-is-open { #{$el}__menu-toggle { > span { - background: rgba($color-light, 0); + background: rgba(variables.$color-light, 0); &::before { transform: rotate(135deg); @@ -173,7 +180,7 @@ } } - @include breakpoints(mdl, max) { + @include m-breakpoint.breakpoints(mdl, max) { &__menu { position: absolute; top: 0; @@ -183,10 +190,10 @@ width: 100%; height: 100vh; overflow: auto; - background: $color-primary; + background: variables.$color-primary; transform: translateX(-100%); - @include rtl { + @include m-rtl.rtl { transform: translateX(100%); } @@ -203,7 +210,7 @@ padding-top: 22px; + li { - border-top: 1px solid $color-dark; + border-top: 1px solid variables.$color-dark; } } } @@ -214,7 +221,7 @@ } } - @include breakpoints(sm) { + @include m-breakpoint.breakpoints(sm) { &__menu { #{$el}__logo-link { display: none; @@ -222,26 +229,26 @@ } } - @include breakpoints(sm, mdl) { + @include m-breakpoint.breakpoints(sm, mdl) { #{$el}__menu { right: 0; left: auto; - width: column(6); + width: f-column.column(6); transform: translateX(100%); - @include rtl { + @include m-rtl.rtl { right: auto; left: 0; transform: translateX(-100%); } > div { - padding: column(2, 2) column(1, 1, 6); + padding: f-column.column(2, 2) f-column.column(1, 1, 6); } } } - @include breakpoints(mdl) { + @include m-breakpoint.breakpoints(mdl) { .container { display: flex; align-items: flex-start; @@ -257,19 +264,19 @@ } &__menu { - width: column(9); + width: f-column.column(9); > div { text-align: right; - @include rtl { + @include m-rtl.rtl { text-align: left; } } } &__menu-list { - color: $color-text; + color: variables.$color-text; li + li { margin-top: 12px; @@ -279,7 +286,7 @@ display: inline; text-align: left; - @include rtl { + @include m-rtl.rtl { text-align: right; } @@ -298,7 +305,7 @@ } .menu-item-has-children { - @include hover { + @include m-hover.hover { > #{$el}__sub-menu { .no-js & { display: block; @@ -314,7 +321,7 @@ width: 6px; height: 6px; - @include rtl { + @include m-rtl.rtl { right: auto; left: 0; } @@ -338,7 +345,7 @@ &::after { position: absolute; content: ""; - background: $color-primary; + background: variables.$color-primary; } &::before { diff --git a/src/scss/08-template-parts/_hero.scss b/src/scss/08-template-parts/_hero.scss index 6f092217..3b102b46 100644 --- a/src/scss/08-template-parts/_hero.scss +++ b/src/scss/08-template-parts/_hero.scss @@ -1,9 +1,13 @@ +@use "../01-abstract/variables"; +@use "../02-tools/m-breakpoint"; +@use "../02-tools/m-row-fullwidth"; + /** * Hero */ .hero { - @include row-fullwidth; + @include m-row-fullwidth.row-fullwidth; padding: var(--spacing--block-1) 0; margin-bottom: var(--spacing--block-1); @@ -12,7 +16,7 @@ position: relative; z-index: 4; padding: 20px; - background: rgba($color-light, .5); + background: rgba(variables.$color-light, .5); } &__img { @@ -26,7 +30,7 @@ height: 100%; } - @include breakpoints(md) { + @include m-breakpoint.breakpoints(md) { padding: 100px 0; } } diff --git a/src/scss/08-template-parts/template-parts.scss b/src/scss/08-template-parts/template-parts.scss index 1e4aafcf..46bf5015 100644 --- a/src/scss/08-template-parts/template-parts.scss +++ b/src/scss/08-template-parts/template-parts.scss @@ -1,3 +1,3 @@ -@import "./header"; -@import "./footer"; -@import "./hero"; +@use "header"; +@use "footer"; +@use "hero"; diff --git a/src/scss/09-templates/templates.scss b/src/scss/09-templates/templates.scss index e9d186f8..175baf0e 100644 --- a/src/scss/09-templates/templates.scss +++ b/src/scss/09-templates/templates.scss @@ -1,3 +1,3 @@ -@import "./404"; -@import "./home"; -@import "./default"; +// @use "404"; +@use "home"; +@use "default"; diff --git a/src/scss/editor.scss b/src/scss/editor.scss index cb6a38a4..7e631a66 100644 --- a/src/scss/editor.scss +++ b/src/scss/editor.scss @@ -5,58 +5,58 @@ $entry-file-name: "editor"; * == Contain SCSS and CSS variables and webfonts declarations. */ -@import "./01-abstract/abstract"; +@use "01-abstract/abstract"; /** * Tools * == Contains functions and mixins. */ -@import "./02-tools/tools"; +@use "02-tools/tools"; /** * Base * == Contain generic styles such as normalize or reset. */ -@import "./03-base/fonts"; -@import "./03-base/variables-css"; -@import "./03-base/svg-icons"; -@import "./03-base/links"; -@import "./03-base/text"; +@use "03-base/fonts"; +@use "03-base/variables-css"; +@use "03-base/svg-icons"; +@use "03-base/links"; +@use "03-base/text"; /** * Utilities * == Utility classes that are not assigned to a specific component. */ -@import "./04-utilities/utilities"; +@use "04-utilities/utilities"; /** * Blocks * == Gutenberg core blocks styles, style for front-end layout and editor. */ -@import "./05-components/btn"; +@use "05-components/btn"; /** * Gutenberg * == Gutenberg core/custom blocks and patterns styles, style for front-end layout and editor. */ -@import "./06-blocks/gutenberg"; -@import "./06-blocks/blocks"; +@use "06-blocks/gutenberg"; +@use "06-blocks/blocks"; /** * Patterns * == Contains styles for gutenberg patterns. */ -@import "./07-patterns/patterns"; +@use "07-patterns/patterns"; /** * Vendor * == Plugins or libraries custom styles. */ -@import "./10-vendor/vendor"; +@use "10-vendor/vendor"; diff --git a/src/scss/style.scss b/src/scss/style.scss index 25fe1dd4..b9d60030 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1,72 +1,70 @@ -$entry-file-name: "style"; - /** * Abstract * == Contain SCSS and CSS variables and webfonts declarations. */ -@import "./01-abstract/abstract"; +@use "01-abstract/abstract"; /** * Tools * == Contains functions and mixins. */ -@import "./02-tools/tools"; +@use "02-tools/tools"; /** * Base * == Contain generic styles such as normalize or reset. */ -@import "./03-base/base"; +@use "03-base/base"; /** * Utilities * == Utility classes that are not assigned to a specific component. */ -@import "./04-utilities/utilities"; +@use "04-utilities/utilities"; /** * Components * == Contain any default component. Just give the components some basic styles. */ -@import "./05-components/components"; +@use "05-components/components"; /** * Gutenberg * == Gutenberg core/custom blocks and patterns styles, style for front-end layout and editor. */ -@import "./06-blocks/gutenberg"; -@import "./06-blocks/blocks"; +@use "06-blocks/gutenberg"; +@use "06-blocks/blocks"; /** * Patterns * == Contains styles for gutenberg patterns. */ -@import "./07-patterns/patterns"; +@use "07-patterns/patterns"; /** * Template parts * == If you want to add custom styles for specific page templates parts. */ -@import "./08-template-parts/template-parts"; +@use "08-template-parts/template-parts"; /** * Pages * == If you want to add custom styles for specific page templates. */ -@import "./09-templates/templates"; +@use "09-templates/templates"; /** * Vendor * == Plugins or libraries custom styles. */ -@import "./10-vendor/vendor"; +@use "10-vendor/vendor"; From 92741968a082470c1d63b0593f1382c1a64b3fd7 Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 5 Nov 2024 15:30:10 +0100 Subject: [PATCH 2/2] chore (sass): update sass and sass-loader --- package.json | 4 +- yarn.lock | 225 +++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 204 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index d6ac519c..c9990ff0 100644 --- a/package.json +++ b/package.json @@ -54,8 +54,8 @@ "postcss-scss": "^4.0.6", "postcss-sort-media-queries": "^5.2.0", "prettier": "^2.2.1", - "sass": "^1.52.3", - "sass-loader": "^11.0.1", + "sass": "^1.80.6", + "sass-loader": "^16.0.3", "sharp": "^0.32.1", "style-loader": "^2.0.0", "stylelint": "^14.13.0", diff --git a/yarn.lock b/yarn.lock index 4e129e59..2adb8257 100644 --- a/yarn.lock +++ b/yarn.lock @@ -763,6 +763,150 @@ __metadata: languageName: node linkType: hard +"@parcel/watcher-android-arm64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-android-arm64@npm:2.5.0" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + +"@parcel/watcher-darwin-arm64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-darwin-arm64@npm:2.5.0" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@parcel/watcher-darwin-x64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-darwin-x64@npm:2.5.0" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@parcel/watcher-freebsd-x64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-freebsd-x64@npm:2.5.0" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"@parcel/watcher-linux-arm-glibc@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-arm-glibc@npm:2.5.0" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@parcel/watcher-linux-arm-musl@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-arm-musl@npm:2.5.0" + conditions: os=linux & cpu=arm & libc=musl + languageName: node + linkType: hard + +"@parcel/watcher-linux-arm64-glibc@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-arm64-glibc@npm:2.5.0" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@parcel/watcher-linux-arm64-musl@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-arm64-musl@npm:2.5.0" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@parcel/watcher-linux-x64-glibc@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-x64-glibc@npm:2.5.0" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@parcel/watcher-linux-x64-musl@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-x64-musl@npm:2.5.0" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@parcel/watcher-win32-arm64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-win32-arm64@npm:2.5.0" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@parcel/watcher-win32-ia32@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-win32-ia32@npm:2.5.0" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@parcel/watcher-win32-x64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-win32-x64@npm:2.5.0" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"@parcel/watcher@npm:^2.4.1": + version: 2.5.0 + resolution: "@parcel/watcher@npm:2.5.0" + dependencies: + "@parcel/watcher-android-arm64": 2.5.0 + "@parcel/watcher-darwin-arm64": 2.5.0 + "@parcel/watcher-darwin-x64": 2.5.0 + "@parcel/watcher-freebsd-x64": 2.5.0 + "@parcel/watcher-linux-arm-glibc": 2.5.0 + "@parcel/watcher-linux-arm-musl": 2.5.0 + "@parcel/watcher-linux-arm64-glibc": 2.5.0 + "@parcel/watcher-linux-arm64-musl": 2.5.0 + "@parcel/watcher-linux-x64-glibc": 2.5.0 + "@parcel/watcher-linux-x64-musl": 2.5.0 + "@parcel/watcher-win32-arm64": 2.5.0 + "@parcel/watcher-win32-ia32": 2.5.0 + "@parcel/watcher-win32-x64": 2.5.0 + detect-libc: ^1.0.3 + is-glob: ^4.0.3 + micromatch: ^4.0.5 + node-addon-api: ^7.0.0 + node-gyp: latest + dependenciesMeta: + "@parcel/watcher-android-arm64": + optional: true + "@parcel/watcher-darwin-arm64": + optional: true + "@parcel/watcher-darwin-x64": + optional: true + "@parcel/watcher-freebsd-x64": + optional: true + "@parcel/watcher-linux-arm-glibc": + optional: true + "@parcel/watcher-linux-arm-musl": + optional: true + "@parcel/watcher-linux-arm64-glibc": + optional: true + "@parcel/watcher-linux-arm64-musl": + optional: true + "@parcel/watcher-linux-x64-glibc": + optional: true + "@parcel/watcher-linux-x64-musl": + optional: true + "@parcel/watcher-win32-arm64": + optional: true + "@parcel/watcher-win32-ia32": + optional: true + "@parcel/watcher-win32-x64": + optional: true + checksum: 253f93c5f443dfbb638df58712df077fe46ff7e01e7c78df0c4ceb001e8f5b31db01eb7ddac3ae4159722c4d1525894cd4ce5be49f5e6c14a3a52cbbf9f41cbf + languageName: node + linkType: hard + "@pkgjs/parseargs@npm:^0.11.0": version: 0.11.0 resolution: "@pkgjs/parseargs@npm:0.11.0" @@ -2006,8 +2150,8 @@ __metadata: postcss-scss: ^4.0.6 postcss-sort-media-queries: ^5.2.0 prettier: ^2.2.1 - sass: ^1.52.3 - sass-loader: ^11.0.1 + sass: ^1.80.6 + sass-loader: ^16.0.3 sharp: ^0.32.1 style-loader: ^2.0.0 stylelint: ^14.13.0 @@ -2546,7 +2690,7 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.5.1": +"chokidar@npm:^3.5.1": version: 3.6.0 resolution: "chokidar@npm:3.6.0" dependencies: @@ -2565,6 +2709,15 @@ __metadata: languageName: node linkType: hard +"chokidar@npm:^4.0.0": + version: 4.0.1 + resolution: "chokidar@npm:4.0.1" + dependencies: + readdirp: ^4.0.1 + checksum: 193da9786b0422a895d59c7552195d15c6c636e6a2293ae43d09e34e243e24ccd02d693f007c767846a65abbeae5fea6bfacb8fc2ddec4ea4d397620d552010d + languageName: node + linkType: hard + "chownr@npm:^1.1.1": version: 1.1.4 resolution: "chownr@npm:1.1.4" @@ -3523,6 +3676,15 @@ __metadata: languageName: node linkType: hard +"detect-libc@npm:^1.0.3": + version: 1.0.3 + resolution: "detect-libc@npm:1.0.3" + bin: + detect-libc: ./bin/detect-libc.js + checksum: daaaed925ffa7889bd91d56e9624e6c8033911bb60f3a50a74a87500680652969dbaab9526d1e200a4c94acf80fc862a22131841145a0a8482d60a99c24f4a3e + languageName: node + linkType: hard + "detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.2": version: 2.0.3 resolution: "detect-libc@npm:2.0.3" @@ -6572,13 +6734,6 @@ __metadata: languageName: node linkType: hard -"klona@npm:^2.0.4": - version: 2.0.6 - resolution: "klona@npm:2.0.6" - checksum: ac9ee3732e42b96feb67faae4d27cf49494e8a3bf3fa7115ce242fe04786788e0aff4741a07a45a2462e2079aa983d73d38519c85d65b70ef11447bbc3c58ce7 - languageName: node - linkType: hard - "known-css-properties@npm:^0.26.0": version: 0.26.0 resolution: "known-css-properties@npm:0.26.0" @@ -7407,6 +7562,15 @@ __metadata: languageName: node linkType: hard +"node-addon-api@npm:^7.0.0": + version: 7.1.1 + resolution: "node-addon-api@npm:7.1.1" + dependencies: + node-gyp: latest + checksum: 46051999e3289f205799dfaf6bcb017055d7569090f0004811110312e2db94cb4f8654602c7eb77a60a1a05142cc2b96e1b5c56ca4622c41a5c6370787faaf30 + languageName: node + linkType: hard + "node-gyp@npm:latest": version: 10.1.0 resolution: "node-gyp@npm:10.1.0" @@ -9334,6 +9498,13 @@ __metadata: languageName: node linkType: hard +"readdirp@npm:^4.0.1": + version: 4.0.2 + resolution: "readdirp@npm:4.0.2" + checksum: 309376e717f94fb7eb61bec21e2603243a9e2420cd2e9bf94ddf026aefea0d7377ed1a62f016d33265682e44908049a55c3cfc2307450a1421654ea008489b39 + languageName: node + linkType: hard + "readdirp@npm:~3.6.0": version: 3.6.0 resolution: "readdirp@npm:3.6.0" @@ -9692,38 +9863,46 @@ __metadata: languageName: node linkType: hard -"sass-loader@npm:^11.0.1": - version: 11.1.1 - resolution: "sass-loader@npm:11.1.1" +"sass-loader@npm:^16.0.3": + version: 16.0.3 + resolution: "sass-loader@npm:16.0.3" dependencies: - klona: ^2.0.4 neo-async: ^2.6.2 peerDependencies: - fibers: ">= 3.1.0" - node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 + "@rspack/core": 0.x || 1.x + node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 sass: ^1.3.0 + sass-embedded: "*" webpack: ^5.0.0 peerDependenciesMeta: - fibers: + "@rspack/core": optional: true node-sass: optional: true sass: optional: true - checksum: e969351003cfb2db09fea9100d6075cd4a188b04596e0c950dbd3b3367635d25f474ce06a15fb2b4e85e29f115ace49eaa3e0d4a1ab1c096f12c598b048b2963 + sass-embedded: + optional: true + webpack: + optional: true + checksum: 888b2fbe4e1455778ecb9fde77d9803fc5b7c01137740512f701acb1716830a9d8290cf664734f8472455353fa09a919c693a6d2c42c4d21c1fdc77a2a06db52 languageName: node linkType: hard -"sass@npm:^1.52.3": - version: 1.77.2 - resolution: "sass@npm:1.77.2" +"sass@npm:^1.80.6": + version: 1.80.6 + resolution: "sass@npm:1.80.6" dependencies: - chokidar: ">=3.0.0 <4.0.0" + "@parcel/watcher": ^2.4.1 + chokidar: ^4.0.0 immutable: ^4.0.0 source-map-js: ">=0.6.2 <2.0.0" + dependenciesMeta: + "@parcel/watcher": + optional: true bin: sass: sass.js - checksum: fd75b1f255a30ecd4ee79fa020830d7bf426dd15de2f47cf9610130707dc2a029da3677ca0a6c89e8d4626b0a2816456bb7fb706cb518cfbf2e7c0038ef7a4b8 + checksum: 1a81e0fe093ff9109228b5dc1ea2ad64d3fb0e266d968e664a52aca059dd448fbe9a90d9a5a7518e5f31fd1087149ea349bf6fe1271ab15075b7a145c1bea0c9 languageName: node linkType: hard