From 5e56a9a93860c488ae979ce58f870e75a67d1c15 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Sat, 9 May 2020 16:31:18 +0200
Subject: [PATCH] Feat(curriculum): scss not sass (#38764)

---
 client/src/templates/Challenges/rechallenge/transformers.js | 4 +++-
 ...y-a-style-until-a-condition-is-met-with-while.english.md | 4 ++--
 .../sass/create-reusable-css-with-mixins.english.md         | 4 ++--
 ...tend-one-set-of-css-styles-to-another-element.english.md | 4 ++--
 .../sass/nest-css-with-sass.english.md                      | 4 ++--
 .../sass/store-data-with-sass-variables.english.md          | 4 ++--
 .../sass/use-each-to-map-over-items-in-a-list.english.md    | 6 +++---
 .../sass/use-for-to-create-a-sass-loop.english.md           | 6 +++---
 .../use-if-and-else-to-add-logic-to-your-styles.english.md  | 4 ++--
 9 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/client/src/templates/Challenges/rechallenge/transformers.js b/client/src/templates/Challenges/rechallenge/transformers.js
index 3f7bb01e15..90fd88394f 100644
--- a/client/src/templates/Challenges/rechallenge/transformers.js
+++ b/client/src/templates/Challenges/rechallenge/transformers.js
@@ -177,7 +177,9 @@ function getBabelOptions({ preview = false, protect = true }) {
 
 const sassWorker = createWorker(sassCompile);
 async function transformSASS(element) {
-  const styleTags = element.querySelectorAll('style[type="text/sass"]');
+  // we only teach scss syntax, not sass. Also the compiler does not seem to be
+  // able to deal with sass.
+  const styleTags = element.querySelectorAll('style[type~="text/scss"]');
   await Promise.all(
     [].map.call(styleTags, async style => {
       style.type = 'text/css';
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md
index 5f07537d5b..ed2971c9b2 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md
@@ -60,7 +60,7 @@ tests:
 <div id='html-seed'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
 
 
 
@@ -81,7 +81,7 @@ tests:
 <section id='solution'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
   $x: 1;
   @while $x < 6 {
     .text-#{$x}{
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md
index 69379a9c95..f6e1ca8e16 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md
@@ -75,7 +75,7 @@ tests:
 <div id='html-seed'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
 
 
 
@@ -101,7 +101,7 @@ tests:
 <section id='solution'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
   @mixin border-radius($radius) {
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md
index b83eedb516..9df5d6d11b 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md
@@ -58,7 +58,7 @@ tests:
 <div id='html-seed'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
   h3{
     text-align: center;
   }
@@ -92,7 +92,7 @@ tests:
 <section id='solution'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
   h3{
     text-align: center;
   }
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md
index b1dcb84431..6b3187d654 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md
@@ -66,7 +66,7 @@ tests:
 <div id='html-seed'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
   .blog-post {
 
   }
@@ -95,7 +95,7 @@ tests:
 <section id='solution'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
   .blog-post {
     h1 {
       text-align: center;
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md
index e73c50650d..9d8a555c48 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md
@@ -54,7 +54,7 @@ tests:
 <div id='html-seed'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
 
 
   .header{
@@ -90,7 +90,7 @@ tests:
 <section id='solution'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
   $text-color: red;
 
   .header{
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md
index 51c58c0435..e045fa4db3 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md
@@ -77,7 +77,7 @@ tests:
 <div id='html-seed'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
 
 
 
@@ -104,7 +104,7 @@ The solution requires using the $color variable twice: once for the class name a
 ### List Data type
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
 
   @each $color in blue, black, red {
     .#{$color}-bg {background-color: $color;}
@@ -124,7 +124,7 @@ The solution requires using the $color variable twice: once for the class name a
 ### Map Data type
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
 
   $colors: (color1: blue, color2: black, color3: red);
 
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md
index da97a02703..3e459b7a35 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md
@@ -72,7 +72,7 @@ tests:
 <div id='html-seed'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
 
 
 
@@ -95,7 +95,7 @@ tests:
 <section id='solution'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
 
 @for $i from 1 through 5 {
   .text-#{$i} { font-size: 15px * $i; }
@@ -111,7 +111,7 @@ tests:
 ```
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
 
 @for $i from 1 to 6 {
   .text-#{$i} { font-size: 15px * $i; }
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md
index 25938f985e..faefa34200 100644
--- a/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md
@@ -77,7 +77,7 @@ tests:
 <div id='html-seed'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
 
 
 
@@ -102,7 +102,7 @@ tests:
 <section id='solution'>
 
 ```html
-<style type='text/sass'>
+<style type='text/scss'>
   @mixin border-stroke($val) {
     @if $val == light {
       border: 1px solid black;