[WIP] Replace node-sass with sass-embedded

polaris-react/.storybook/main.js

@@ -49,6 +49,7 @@ module.exports = {
           },
           {
             loader: 'sass-loader',
+            options: {api: 'modern'},
           },
         ],
       },

polaris-react/config/rollup/plugin-styles.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 const {createFilter} = require('@rollup/pluginutils');
-const nodeSass = require('node-sass');
+const sass = require('sass-embedded');
 const postcss = require('postcss');
 const cssModules = require('postcss-modules');
 
@@ -148,16 +148,9 @@ module.exports.styles = function styles({
 
       let sassOutput;
       try {
-        sassOutput = nodeSass
-          .renderSync({
-            data: source,
-            file: id,
-            outputStyle: 'compact',
-            includePaths: [path.dirname(id)],
-          })
-          .css.toString();
+        sassOutput = (await sass.compileAsync(id, {style: 'expanded'})).css;
       } catch (err) {
-        throw new Error(err.formatted);
+        throw new Error(err);
       }
 
       const postCssOutput = await styleProcessor

polaris-react/package.json

@@ -100,7 +100,6 @@
     "create-file-webpack": "^1.0.2",
     "globby": "^11.1.0",
     "node-cmd": "^3.0.0",
-    "node-sass": "^7.0.1",
     "object-hash": "^1.3.1",
     "postcss": "^8.3.1",
     "postcss-loader": "^4.2.0",
@@ -112,7 +111,8 @@
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.0",
-    "sass-loader": "^12.4.0",
+    "sass-embedded": "^1.55.0",
+    "sass-loader": "^12.6.0",
     "semver": "^6.3.0",
     "shx": "^0.3.2",
     "svgo": "^2.8.0",

polaris-react/src/components/Navigation/_variables.scss

@@ -1,3 +1,5 @@
+@import '../../styles/common';
+
 $nav-variables: (
   mobile-spacing: calc(var(--p-space-2) + var(--p-space-05)),
   desktop-spacing: calc(var(--p-space-1) + var(--p-space-05)),

polaris-react/src/components/ResourceList/_variables.scss

@@ -1,3 +1,5 @@
+@import '../../styles/common';
+
 $resource-list-variables: (
   header-min-height: 56px,
   header-vertical-padding: var(--p-space-2),

polaris-react/src/styles/_common.scss

@@ -1,21 +1,13 @@
-// This file is Polaris's private Sass API.
-// Within this codebase import this file if you wish to use our helper functions
-// Don't use this externally as it may change
-
-// stylelint-disable scss/partial-no-import
-
-@import './foundation/layout';
-@import './foundation/focus-ring';
-
-@import './shared/accessibility';
-@import './shared/breakpoints';
-@import './shared/buttons';
-@import './shared/controls';
-@import './shared/forms';
-@import './shared/icons';
-@import './shared/layout';
-@import './shared/page';
-@import './shared/typography';
-@import './shared/interaction-state';
-
-@import '../../../node_modules/@shopify/polaris-tokens/dist/scss/media-queries';
+@forward './foundation/layout';
+@forward './foundation/focus-ring';
+
+@forward './shared/accessibility';
+@forward './shared/breakpoints';
+@forward './shared/buttons';
+@forward './shared/controls';
+@forward './shared/forms';
+@forward './shared/icons';
+@forward './shared/layout';
+@forward './shared/page';
+@forward './shared/typography';
+@forward './shared/interaction-state';

polaris-react/src/styles/shared/_breakpoints.scss

@@ -1,3 +1,5 @@
+@forward '../../../../node_modules/@shopify/polaris-tokens/dist/scss/media-queries';
+
 @function breakpoint($value, $inclusive: true) {
   $value-unit: unit($value);
   // Down media condition breakpoints are being subtracted by 0.05px to prevent

polaris-react/src/styles/shared/_buttons.scss

@@ -1,3 +1,6 @@
+@import './../foundation/focus-ring';
+@import './icons';
+
 @mixin high-contrast-button-outline($outline: var(--p-border-width-2) dotted) {
   @media (-ms-high-contrast: active) {
     outline: $outline;

polaris-react/src/styles/shared/_page.scss

@@ -1,3 +1,7 @@
+@import '../foundation/layout';
+@import './typography';
+@import './breakpoints';
+
 $page-max-width: $layout-width-primary-max + $layout-width-secondary-max +
   $layout-width-inner-spacing-base;
 

polaris-react/src/styles/shared/_typography.scss

@@ -1,3 +1,5 @@
+@import './breakpoints';
+
 @mixin text-style-caption {
   font-size: 13px;
   font-weight: var(--p-font-weight-regular);

stylelint-polaris/configs/internal.js

@@ -52,7 +52,7 @@ module.exports = {
       allowedMediaFeatureNames: ['forced-colors', '-ms-high-contrast'],
       allowedScssInterpolations: [
         // TODO: Add utility to @shopify/polaris-tokens to getMediaConditionNames
-        /^\$p-breakpoints-(xs|sm|md|lg|xl)-(up|down|only)$/,
+        /^([\w-]+\.)?\$p-breakpoints-(xs|sm|md|lg|xl)-(up|down|only)$/,
       ],
     },
   },

stylelint-polaris/index.js

@@ -58,7 +58,7 @@ module.exports = {
         allowedMediaFeatureNames: ['forced-colors', '-ms-high-contrast'],
         allowedScssInterpolations: [
           // TODO: Add utility to @shopify/polaris-tokens to getMediaConditionNames
-          /^\$p-breakpoints-(xs|sm|md|lg|xl)-(up|down|only)$/,
+          /^([\w-]+\.)?\$p-breakpoints-(xs|sm|md|lg|xl)-(up|down|only)$/,
         ],
       },
       {severity: 'warning'},