revert sass

Author: dreamwasp

nx.json

@@ -62,6 +62,7 @@
     }
   },
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "useDaemonProcess": false,
   "nxCloudAccessToken": "ZmVjZWYxNzctYTdmZC00ODYzLTg4MzEtZTE1YTVmZDdkZmY1fHJlYWQ=",
   "parallel": 3,
   "useInferencePlugins": false,

package.json

@@ -25,12 +25,12 @@
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/jest": "^11.11.0",
     "@mdx-js/react": "^3.1.0",
-    "@nx/jest": "20.5.0",
-    "@nx/js": "20.5.0",
-    "@nx/react": "20.5.0",
-    "@nx/storybook": "20.5.0",
-    "@nx/web": "20.5.0",
-    "@nx/webpack": "20.5.0",
+    "@nx/jest": "19.3.2",
+    "@nx/js": "19.3.2",
+    "@nx/react": "19.3.2",
+    "@nx/storybook": "19.3.2",
+    "@nx/web": "19.3.2",
+    "@nx/webpack": "19.3.2",
     "@storybook/addon-controls": "8.3.6",
     "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-docs": "^8.3.6",
@@ -81,7 +81,7 @@
     "lint-staged": "14.0.1",
     "micromatch": "^4.0.5",
     "mutationobserver-shim": "^0.3.3",
-    "nx": "20.5.0",
+    "nx": "19.3.2",
     "nx-cloud": "^19.1.0",
     "onchange": "^7.0.2",
     "prettier": "^2.8.7",

packages/gamut-styles/core.scss

@@ -1 +1 @@
-@use "core/index";
+@import "core/index";

packages/gamut-styles/core/index.scss

@@ -1,4 +1,4 @@
-@use "../utils";
-@use "reboot";
-@use "fonts";
-@use "typography";
+@import "../utils";
+@import "reboot";
+@import "fonts";
+@import "typography";

packages/gamut-styles/package.json

@@ -25,7 +25,6 @@
     "@emotion/styled": "^11.3.0",
     "lodash": "^4.17.5",
     "react": "^17.0.2 || ^18.2.0",
-    "sass": "^1.85.0",
     "stylis": "^4.0.7"
   },
   "publishConfig": {

packages/gamut-styles/utils.scss

@@ -1 +1 @@
-@forward "utils/index";
+@import "utils/index";

packages/gamut-styles/utils/index.scss

@@ -1,5 +1,5 @@
 // import order is unfortunately important here
 // variables needs to access functions, and mixins needs to access variables
-@forward "functions/index";
-@forward "variables/index";
-@forward "mixins/index";
+@import "functions/index";
+@import "variables/index";
+@import "mixins/index";

packages/gamut-styles/utils/mixins/_responsive.scss

@@ -1,5 +1,4 @@
 // Try to use these simple mixins if possible for your responsive needs
-@use "../variables/index.scss" as *;
 
 // Example usage:
 //

packages/gamut-styles/utils/mixins/index.scss

@@ -1,6 +1,6 @@
-@forward "font-smoothing";
-@forward "no-select";
-@forward "responsive";
-@forward "shadow";
-@forward "sr-only";
-@forward "legacy";
+@import "font-smoothing";
+@import "no-select";
+@import "responsive";
+@import "shadow";
+@import "sr-only";
+@import "legacy";

packages/gamut-styles/utils/mixins/legacy.scss

@@ -1,5 +1,3 @@
-@use "responsive";
-
 // Legacy Helper mixins
 
 // these variables should be located in ../variables
@@ -10,19 +8,19 @@ $bp-tablet: 736px;
 $bp-desktop: 960px;
 
 @mixin device-phone {
-  @include responsive.screen-size-between($bp-phone, $bp-tablet - 1) {
+  @include screen-size-between($bp-phone, $bp-tablet - 1) {
     @content;
   }
 }
 
 @mixin device-tablet {
-  @include responsive.screen-size-between($bp-tablet, $bp-desktop - 1) {
+  @include screen-size-between($bp-tablet, $bp-desktop - 1) {
     @content;
   }
 }
 
 @mixin device-desktop {
-  @include responsive.screen-size-gte($bp-desktop) {
+  @include screen-size-gte($bp-desktop) {
     @content;
   }
 }