fix(css): scss `global` flag (#3844)

src/language-css/parser-postcss.js

@@ -163,6 +163,7 @@ function parseMediaQuery(value) {
 }
 
 const DEFAULT_SCSS_DIRECTIVE = "!default";
+const GLOBAL_SCSS_DIRECTIVE = "!global";
 
 function parseNestedCSS(node) {
   if (node && typeof node === "object") {
@@ -205,6 +206,11 @@ function parseNestedCSS(node) {
           node.value = node.value.slice(0, -DEFAULT_SCSS_DIRECTIVE.length);
         }
 
+        if (node.value.endsWith(GLOBAL_SCSS_DIRECTIVE)) {
+          node.global = true;
+          node.value = node.value.slice(0, -GLOBAL_SCSS_DIRECTIVE.length);
+        }
+
         node.value = parseValue(node.value);
       } catch (e) {
         throw createError(

src/language-css/printer-postcss.js

@@ -108,6 +108,7 @@ function genericPrint(path, options, print) {
           : path.call(print, "value"),
         n.important ? " !important" : "",
         n.default ? " !default" : "",
+        n.global ? " !global" : "",
         n.nodes
           ? concat([
               " {",

tests/css_scss/__snapshots__/jsfmt.spec.js.snap

@@ -28,6 +28,15 @@ $default: "very-long-long-long-long-long-long-long-long-long-long-long-value"
 $default: "very-long-long-long-long-long-long-long-long-long-long-long-value"
 !default;
 
+$global: #111111 !global;
+$global: #111111   !global;
+$global: #111111
+!global;
+$global: "very-long-long-long-long-long-long-long-long-long-long-long-value" !global;
+$global: "very-long-long-long-long-long-long-long-long-long-long-long-value"   !global;
+$global: "very-long-long-long-long-long-long-long-long-long-long-long-value"
+!global;
+
 $map: (key: value, other-key: other-value);
 $map: (key: value, other-key: other-value) !default;
 $map: (key: value, other-key: other-value)  !default;
@@ -467,6 +476,13 @@ $default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !d
 $default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
 $default: "very-long-long-long-long-long-long-long-long-long-long-long-value" !default;
 
+$global: #111111 !global;
+$global: #111111 !global;
+$global: #111111 !global;
+$global: "very-long-long-long-long-long-long-long-long-long-long-long-value" !global;
+$global: "very-long-long-long-long-long-long-long-long-long-long-long-value" !global;
+$global: "very-long-long-long-long-long-long-long-long-long-long-long-value" !global;
+
 $map: (
   key: value,
   other-key: other-value

tests/css_scss/scss.css

@@ -18,6 +18,15 @@ $default: "very-long-long-long-long-long-long-long-long-long-long-long-value"
 $default: "very-long-long-long-long-long-long-long-long-long-long-long-value"
 !default;
 
+$global: #111111 !global;
+$global: #111111   !global;
+$global: #111111
+!global;
+$global: "very-long-long-long-long-long-long-long-long-long-long-long-value" !global;
+$global: "very-long-long-long-long-long-long-long-long-long-long-long-value"   !global;
+$global: "very-long-long-long-long-long-long-long-long-long-long-long-value"
+!global;
+
 $map: (key: value, other-key: other-value);
 $map: (key: value, other-key: other-value) !default;
 $map: (key: value, other-key: other-value)  !default;