Use math.div instead of slash for sass

.all-contributorsrc

@@ -792,6 +792,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "egriff38",
+      "name": "Eshin Griffith",
+      "avatar_url": "https://avatars.githubusercontent.com/u/6627718?v=4",
+      "profile": "https://github.com/egriff38",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -186,6 +186,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/szymonbrandys"><img src="https://avatars.githubusercontent.com/u/79149899?v=4?s=100" width="100px;" alt=""/><br /><sub><b>szymonbrandys</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=szymonbrandys" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/adamalston"><img src="https://avatars.githubusercontent.com/u/18297826?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adam Alston</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=adamalston" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/Kiittyka"><img src="https://avatars.githubusercontent.com/u/41021851?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Krithika S Udupa</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kiittyka" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/egriff38"><img src="https://avatars.githubusercontent.com/u/6627718?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eshin Griffith</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=egriff38" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/carbon-react/src/components/Grid/Grid.stories.scss

@@ -1,6 +1,5 @@
-@import '~carbon-components/scss/globals/scss/vars';
-@import '~carbon-components/scss/globals/scss/colors';
-@import '~carbon-components/scss/globals/scss/typography';
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/type' as *;
 
 // Grid modes
 .bx--css-grid {

packages/components/src/globals/scss/_typography.import.scss

@@ -0,0 +1,78 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+//-------------------------------------------
+// Compatibility notes (*.import.scss)
+// ------------------------------------------
+//
+// This file is intended to be consumed and processed with dart-sass.
+// It is incompatible with node-sass/libsass as it contains sass language features
+// or functions that are unavailable in node-sass/libsass, such as `math.div`.
+//
+// The non-`.import` suffixed version of this file eg. `_filename.scss`
+// is intended to be compatible with node-sass/libsass.
+//
+// Styles authored within this file must be duplicated to the corresponding
+// compatibility file to ensure we continue to support node-sass and dart-sass
+// in v10.
+
+@use 'sass:math';
+@import 'vars'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+
+/// Base font size in px
+/// @access public
+/// @group global-typography
+/// @type Number
+/// @deprecated (For v10) Superseded by `$carbon--base-font-size`
+$base-font-size: 16px !default;
+
+/// Convert px to rem
+/// @access public
+/// @param {Number} $px - Value of type in pixels
+/// @returns {Number} In rem
+/// @example rem(48px);
+/// @group global-typography
+/// @deprecated (For v10) Use `carbon--rem()`
+@function rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $base-font-size) * 1rem;
+}
+
+/// Convert px to em
+/// @access public
+/// @param {Number} $px - Value of type in pixels
+/// @returns {Number} In em
+/// @example em(48px);
+/// @group global-typography
+/// @deprecated (For v10) Use `carbon--em()`
+@function em($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $base-font-size) * 1em;
+}
+
+// 🔬 Experimental
+// stylelint-disable-next-line no-invalid-position-at-import-rule
+@import '../../globals/scss/vendor/@carbon/elements/scss/type/font-family';
+// stylelint-disable-next-line no-invalid-position-at-import-rule
+@import '../../globals/scss/vendor/@carbon/elements/scss/type/styles';
+
+/// Different type styles per token
+/// @access public
+/// @param {String} $name - The name of the token to get the styles for
+/// @param {Bool} $fluid [false] - Specify whether to include fluid styles
+/// @example @include type-style('body-short-01');
+/// @group global-typography
+@mixin type-style($name, $fluid: false) {
+  @include carbon--type-style($name, $fluid);
+}

packages/components/src/globals/scss/_typography.scss

@@ -4,6 +4,20 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+//-------------------------------------------
+// Compatibility notes
+// ------------------------------------------
+//
+// This file is intended to be consumed and processed with node-sass/libsass.
+// Sass language features only available in dart-sass, such as `math.div`,
+// should not be used.
+//
+// The `.import` suffixed version of this file eg. `_filename.import.scss`
+// is intended to be compatible with dart-sass.
+//
+// Styles authored within this file must be duplicated to the corresponding
+// compatibility file to ensure we continue to support node-sass and dart-sass
+// in v10.
 
 @import 'vars';
 

packages/components/tests/styles-test.js

@@ -16,7 +16,7 @@ const defaultOptions = {
 const cwd = path.resolve(__dirname, '../src');
 const files = glob.sync('**/*.scss', {
   cwd,
-  ignore: ['**/vendor/@carbon/**'],
+  ignore: ['**/vendor/@carbon/**', '**/*.import.scss'],
 });
 
 const render = promisify(sass.render);