Skip to content

Commit

Permalink
✅ test(_generator_v2.spec.scss): Add missing screen keyword to medi…
Browse files Browse the repository at this point in the history 
…a query for width, update unit test
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Jan 26, 2024
1 parent 75e1941 commit 333f802
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 156 deletions.
2 changes: 0 additions & 2 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import gulp from 'gulp';
// import gulpLoadPlugins from 'gulp-load-plugins';
// const $ = gulpLoadPlugins();
import concat from 'gulp-concat';
import header from 'gulp-header';
import sizereport from 'gulp-sizereport';
Expand Down
2 changes: 1 addition & 1 deletion src/internal/_generator_v2.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ $default-variant-delimiter: '\\:';
$result: ();

@each $key, $value in config.$breakpoint-pairs {
$result: map.set($result, $key, '@media (min-width: #{map-get(config.$breakpoints, $value)})');
$result: map.set($result, $key, '@media screen and (min-width: #{map-get(config.$breakpoints, $value)})');
}

@return $result;
Expand Down
273 changes: 120 additions & 153 deletions tests/internal/_generator_v2.spec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
color: blue !important;
}

@media (min-width: 640px) {
@media screen and (min-width: 640px) {
.sm\:text-blue {
color: blue !important;
}
Expand All @@ -91,7 +91,7 @@
}
}

@media (min-width: 768px) {
@media screen and (min-width: 768px) {
.md\:text-blue {
color: blue !important;
}
Expand All @@ -109,7 +109,7 @@
}
}

@media (min-width: 1024px) {
@media screen and (min-width: 1024px) {
.lg\:text-blue {
color: blue !important;
}
Expand All @@ -127,7 +127,7 @@
}
}

@media (min-width: 1280px) {
@media screen and (min-width: 1280px) {
.xl\:text-blue {
color: blue !important;
}
Expand Down Expand Up @@ -253,180 +253,147 @@
}
}
}
}

// @include it('should generate expected utility classes with variant support for viewports') {
// @include assert {
// @include output {
// @include generator_v2.utility(
// $common-class-name: 'col',
// $class-value-pairs: (
// '0': (
// 'width': 0%,
// ),
// '1': (
// 'width': 25%,
// ),
// '2': (
// 'width': 50%,
// ),
// '3': (
// 'width': 75%,
// ),
// '4': (
// 'width': 100%,
// ),
// ),
// $variants: (),
// $prefix: '',
// $generate-viewports: 'true',
// $override: '!important'
// );
// }
// @include expect {
// .col-0 {
// width: 0% !important;
// }
@include it('should generate expected utility classes with variant support for viewports') {
@include assert {
@include output($selector: false) {
@include generator_v2.utility(
$base-class-name: 'col',
$class-value-pairs: (
'0': (
'width': 0%,
),
'1': (
'width': 25%,
),
'2': (
'width': 50%,
),
'3': (
'width': 75%,
),
'4': (
'width': 100%,
),
),
$variants: (),
$class-prefix: '',
$generate-viewports: true,
$override: '!important'
);
}
@include expect($selector: false) {
.col-0 {
width: 0% !important;
}

// .col-1 {
// width: 25% !important;
// }
.col-1 {
width: 25% !important;
}

// .col-2 {
// width: 50% !important;
// }
.col-2 {
width: 50% !important;
}

// .col-3 {
// width: 75% !important;
// }
.col-3 {
width: 75% !important;
}

// .col-4 {
// width: 100% !important;
// }
.col-4 {
width: 100% !important;
}

// @media screen and (min-width: 640px) {
// .sm\:col-0 {
// width: 0% !important;
// }
// }
@media screen and (min-width: 640px) {
.sm\:col-0 {
width: 0% !important;
}

// @media screen and (min-width: 640px) {
// .sm\:col-1 {
// width: 25% !important;
// }
// }
.sm\:col-1 {
width: 25% !important;
}

// @media screen and (min-width: 640px) {
// .sm\:col-2 {
// width: 50% !important;
// }
// }
.sm\:col-2 {
width: 50% !important;
}

// @media screen and (min-width: 640px) {
// .sm\:col-3 {
// width: 75% !important;
// }
// }
.sm\:col-3 {
width: 75% !important;
}

// @media screen and (min-width: 640px) {
// .sm\:col-4 {
// width: 100% !important;
// }
// }
.sm\:col-4 {
width: 100% !important;
}
}

// @media screen and (min-width: 768px) {
// .md\:col-0 {
// width: 0% !important;
// }
// }
@media screen and (min-width: 768px) {
.md\:col-0 {
width: 0% !important;
}

// @media screen and (min-width: 768px) {
// .md\:col-1 {
// width: 25% !important;
// }
// }
.md\:col-1 {
width: 25% !important;
}

// @media screen and (min-width: 768px) {
// .md\:col-2 {
// width: 50% !important;
// }
// }
.md\:col-2 {
width: 50% !important;
}

// @media screen and (min-width: 768px) {
// .md\:col-3 {
// width: 75% !important;
// }
// }
.md\:col-3 {
width: 75% !important;
}

// @media screen and (min-width: 768px) {
// .md\:col-4 {
// width: 100% !important;
// }
// }
.md\:col-4 {
width: 100% !important;
}
}

// @media screen and (min-width: 1024px) {
// .lg\:col-0 {
// width: 0% !important;
// }
// }
@media screen and (min-width: 1024px) {
.lg\:col-0 {
width: 0% !important;
}

// @media screen and (min-width: 1024px) {
// .lg\:col-1 {
// width: 25% !important;
// }
// }
.lg\:col-1 {
width: 25% !important;
}

// @media screen and (min-width: 1024px) {
// .lg\:col-2 {
// width: 50% !important;
// }
// }
.lg\:col-2 {
width: 50% !important;
}

// @media screen and (min-width: 1024px) {
// .lg\:col-3 {
// width: 75% !important;
// }
// }
.lg\:col-3 {
width: 75% !important;
}

// @media screen and (min-width: 1024px) {
// .lg\:col-4 {
// width: 100% !important;
// }
// }
.lg\:col-4 {
width: 100% !important;
}
}

// @media screen and (min-width: 1280px) {
// .xl\:col-0 {
// width: 0% !important;
// }
// }
@media screen and (min-width: 1280px) {
.xl\:col-0 {
width: 0% !important;
}

// @media screen and (min-width: 1280px) {
// .xl\:col-1 {
// width: 25% !important;
// }
// }
.xl\:col-1 {
width: 25% !important;
}

// @media screen and (min-width: 1280px) {
// .xl\:col-2 {
// width: 50% !important;
// }
// }
.xl\:col-2 {
width: 50% !important;
}

// @media screen and (min-width: 1280px) {
// .xl\:col-3 {
// width: 75% !important;
// }
// }
.xl\:col-3 {
width: 75% !important;
}

// @media screen and (min-width: 1280px) {
// .xl\:col-4 {
// width: 100% !important;
// }
// }
// }
// }
// }
// }
.xl\:col-4 {
width: 100% !important;
}
}
}
}
}
}

// @include describe('utility-with-body()') {
// @include it('should generate expected utility classes with variant support') {
Expand Down

0 comments on commit 333f802

Please sign in to comment.