Skip to content

Commit

Permalink
update dependencies, migrate scss code (#38)
Browse files Browse the repository at this point in the history 
fix deprecation warnings when using the latest versions of sass

fixes #37
  • Loading branch information
@philmtd
philmtd authored Nov 22, 2024
1 parent b71ea27 commit 7163ac6
Show file tree
Hide file tree
Showing 17 changed files with 2,245 additions and 2,223 deletions.
4,160 changes: 2,091 additions & 2,069 deletions package-lock.json
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@
},
"bin": "main.js",
"devDependencies": {
"glob": "^10.2.6",
"jest": "^29.5.0",
"jest-environment-node-single-context": "^29.1.0",
"glob": "^11.0.0",
"jest": "^29.7.0",
"jest-environment-node-single-context": "^29.4.0",
"jest-junit": "^16.0.0",
"sass": "^1.62.1",
"sass-true": "^7.0.0"
"sass": "^1.81.0",
"sass-true": "^8.1.0"
}
}
26 changes: 13 additions & 13 deletions src/lib/flex-align-attributes.scss
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
@import "mixins";
@use "mixins" as mix;

/// Generates flex align data attribute selectors
@mixin flex-align-attributes {
*[data-flex-align="start"] {
@include flex-align-start-properties;
@include mix.flex-align-start-properties;
}
*[data-flex-align="center"] {
@include flex-align-center-properties;
@include mix.flex-align-center-properties;
}
*[data-flex-align="end"] {
@include flex-align-end-properties;
@include mix.flex-align-end-properties;
}
*[data-flex-align="baseline"] {
@include flex-align-baseline-properties;
@include mix.flex-align-baseline-properties;
}
*[data-flex-align="stretch"] {
@include flex-align-stretch-properties;
@include mix.flex-align-stretch-properties;
}
}

@mixin flex-align-attributes-for-media-sizes {
@each $name, $_ in $flex-layout-media-queries {
@include flex-layout-media($name) {
@each $name, $_ in mix.$flex-layout-media-queries {
@include mix.flex-layout-media($name) {
*[data-flex-align-#{$name}="start"] {
@include flex-align-start-properties;
@include mix.flex-align-start-properties;
}
*[data-flex-align-#{$name}="center"] {
@include flex-align-center-properties;
@include mix.flex-align-center-properties;
}
*[data-flex-align-#{$name}="end"] {
@include flex-align-end-properties;
@include mix.flex-align-end-properties;
}
*[data-flex-align-#{$name}="baseline"] {
@include flex-align-baseline-properties;
@include mix.flex-align-baseline-properties;
}
*[data-flex-align-#{$name}="stretch"] {
@include flex-align-stretch-properties;
@include mix.flex-align-stretch-properties;
}
}
}
Expand Down
26 changes: 13 additions & 13 deletions src/lib/flex-align-classes.scss
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
@import "mixins";
@use "mixins" as mix;

/// Generates flex align class selectors
@mixin flex-align-classes {
*.fx-flex-align--start {
@include flex-align-start-properties;
@include mix.flex-align-start-properties;
}
*.fx-flex-align--center {
@include flex-align-center-properties;
@include mix.flex-align-center-properties;
}
*.fx-flex-align--end {
@include flex-align-end-properties;
@include mix.flex-align-end-properties;
}
*.fx-flex-align--baseline {
@include flex-align-baseline-properties;
@include mix.flex-align-baseline-properties;
}
*.fx-flex-align--stretch {
@include flex-align-stretch-properties;
@include mix.flex-align-stretch-properties;
}
}

@mixin flex-align-classes-for-media-sizes {
@each $name, $_ in $flex-layout-media-queries {
@include flex-layout-media($name) {
@each $name, $_ in mix.$flex-layout-media-queries {
@include mix.flex-layout-media($name) {
*.fx-flex-align--start--#{$name} {
@include flex-align-start-properties;
@include mix.flex-align-start-properties;
}
*.fx-flex-align--center--#{$name} {
@include flex-align-center-properties;
@include mix.flex-align-center-properties;
}
*.fx-flex-align--end--#{$name} {
@include flex-align-end-properties;
@include mix.flex-align-end-properties;
}
*.fx-flex-align--baseline--#{$name} {
@include flex-align-baseline-properties;
@include mix.flex-align-baseline-properties;
}
*.fx-flex-align--stretch--#{$name} {
@include flex-align-stretch-properties;
@include mix.flex-align-stretch-properties;
}
}
}
Expand Down
42 changes: 21 additions & 21 deletions src/lib/flex-attributes.scss
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,85 @@
@use "layout-attributes" as la;
@import "mixins";
@use "mixins" as mix;

/// Generates flex data-attribute selectors
@mixin flex-attributes {
*[data-flex] {
@include flex-properties;
@include mix.flex-properties;
}

*[data-flex="auto"] {
@include flex-auto-properties;
@include mix.flex-auto-properties;
}

*[data-flex="grow"] {
@include flex-grow-properties;
@include mix.flex-grow-properties;
}

*[data-flex="initial"] {
@include flex-initial-properties;
@include mix.flex-initial-properties;
}

*[data-flex="none"] {
@include flex-none-properties;
@include mix.flex-none-properties;
}

*[data-flex="nogrow"] {
@include flex-nogrow-properties;
@include mix.flex-nogrow-properties;
}

*[data-flex="noshrink"] {
@include flex-noshrink-properties;
@include mix.flex-noshrink-properties;
}

*[data-flex-fill] {
@include flex-fill-properties;
@include mix.flex-fill-properties;
}

*:has(>[data-flex],>[data-flex-fill]):not(#{la.all-data-layout-selectors()}) {
@include flex-row-properties;
@include mix.flex-row-properties;
}
}

/// Generates flex data-attribute selectors for media sizes
@mixin flex-attributes-for-media-sizes {
@each $name, $_ in $flex-layout-media-queries {
@include flex-layout-media($name) {
@each $name, $_ in mix.$flex-layout-media-queries {
@include mix.flex-layout-media($name) {
*[data-flex-#{$name}] {
@include flex-properties;
@include mix.flex-properties;
}

*[data-flex-#{$name}="auto"] {
@include flex-auto-properties;
@include mix.flex-auto-properties;
}

*[data-flex-#{$name}="grow"] {
@include flex-grow-properties;
@include mix.flex-grow-properties;
}

*[data-flex-#{$name}="initial"] {
@include flex-initial-properties;
@include mix.flex-initial-properties;
}

*[data-flex-#{$name}="none"] {
@include flex-none-properties;
@include mix.flex-none-properties;
}

*[data-flex-#{$name}="nogrow"] {
@include flex-nogrow-properties;
@include mix.flex-nogrow-properties;
}

*[data-flex-#{$name}="noshrink"] {
@include flex-noshrink-properties;
@include mix.flex-noshrink-properties;
}

*[data-flex-fill-#{$name}] {
@include flex-fill-properties;
@include mix.flex-fill-properties;
}

}

*:has(>[data-flex-#{$name}],>[data-flex-fill-#{$name}]):not(#{la.all-data-layout-selectors()}) {
@include flex-row-properties;
@include mix.flex-row-properties;
}
}
}
42 changes: 21 additions & 21 deletions src/lib/flex-classes.scss
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,84 @@
@import "mixins";
@use "mixins" as mix;

/// Generates flex class selectors
@mixin flex-classes {
*.fx-flex {
@include flex-properties;
@include mix.flex-properties;
}

*.fx-flex-auto {
@include flex-auto-properties;
@include mix.flex-auto-properties;
}

*.fx-flex-grow {
@include flex-grow-properties;
@include mix.flex-grow-properties;
}

*.fx-flex-initial {
@include flex-initial-properties;
@include mix.flex-initial-properties;
}

*.fx-flex-none {
@include flex-none-properties;
@include mix.flex-none-properties;
}

*.fx-flex-nogrow {
@include flex-nogrow-properties;
@include mix.flex-nogrow-properties;
}

*.fx-flex-noshrink {
@include flex-noshrink-properties;
@include mix.flex-noshrink-properties;
}

*.fx-flex-fill {
@include flex-fill-properties;
@include mix.flex-fill-properties;
}

*:has(>.fx-flex,>.fx-flex-auto,>.fx-flex-grow,>.fx-flex-initial,>.fx-flex-none,>.fx-flex-nogrow,>.fx-flex-noshrink,>.fx-flex-fill,>[class*="fx-flex--"]):not([class*="fx-layout-"]) {
@include flex-row-properties;
@include mix.flex-row-properties;
}
}

/// Generates flex class selectors for media sizes
@mixin flex-classes-for-media-sizes {
@each $name, $_ in $flex-layout-media-queries {
@include flex-layout-media($name) {
@each $name, $_ in mix.$flex-layout-media-queries {
@include mix.flex-layout-media($name) {
*.fx-flex--#{$name} {
@include flex-properties;
@include mix.flex-properties;
}

*.fx-flex-auto--#{$name} {
@include flex-auto-properties;
@include mix.flex-auto-properties;
}

*.fx-flex-grow--#{$name} {
@include flex-grow-properties;
@include mix.flex-grow-properties;
}

*.fx-flex-initial--#{$name} {
@include flex-initial-properties;
@include mix.flex-initial-properties;
}

*.fx-flex-none--#{$name} {
@include flex-none-properties;
@include mix.flex-none-properties;
}

*.fx-flex-nogrow--#{$name} {
@include flex-nogrow-properties;
@include mix.flex-nogrow-properties;
}

*.fx-flex-noshrink--#{$name} {
@include flex-noshrink-properties;
@include mix.flex-noshrink-properties;
}

*.fx-flex-fill--#{$name} {
@include flex-fill-properties;
@include mix.flex-fill-properties;
}

}

*:has(>.fx-flex--#{$name},>.fx-flex-auto--#{$name},>.fx-flex-grow--#{$name},>.fx-flex-initial--#{$name},>.fx-flex-none--#{$name},>.fx-flex-nogrow--#{$name},>.fx-flex-noshrink--#{$name},>.fx-flex-fill--#{$name}):not([class*="fx-layout-"]) {
@include flex-row-properties;
@include mix.flex-row-properties;
}
}
}
11 changes: 5 additions & 6 deletions src/lib/flex-size-attributes.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@use "sass:list";
@use "sass:math";

@import "mixins";
@use "mixins" as mix;

/// Includes selectors for attributes which can be used to add a specific gap to elements in a flex container
///
Expand Down Expand Up @@ -33,8 +32,8 @@
@include flex-size-attribute($i * $increment)
}
@if $includeSelectorsForMediaSizes {
@each $name, $_ in $flex-layout-media-queries {
@include flex-layout-media($name) {
@each $name, $_ in mix.$flex-layout-media-queries {
@include mix.flex-layout-media($name) {
@for $i from math.div($from, $increment) through math.div($to, $increment) {
@include flex-size-attribute($i * $increment, $name)
}
Expand All @@ -54,8 +53,8 @@
@include flex-size-attribute($value)
}
@if $includeSelectorsForMediaSizes {
@each $name, $_ in $flex-layout-media-queries {
@include flex-layout-media($name) {
@each $name, $_ in mix.$flex-layout-media-queries {
@include mix.flex-layout-media($name) {
@each $value in $values {
@include flex-size-attribute($value, $name)
}
Expand Down
Loading

0 comments on commit 7163ac6

Please sign in to comment.