refactor(styles): reorder imports to avoid config conflict (#10963)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/styles/__tests__/__snapshots__/styles-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Snapshot Tests should match snapshots 1`] = `
+exports[`@carbon/styles should have stable public scss entrypoints 1`] = `
 Array [
   "scss/compat/theme",
   "scss/compat/themes",

packages/styles/__tests__/styles-test.js

@@ -91,36 +91,51 @@ const filepaths = [
   'scss/components/treeview',
   'scss/components/ui-shell',
 ];
-describe.each(filepaths)('%s', (filepath) => {
-  it('should be importable', async () => {
-    await expect(render(`@use '../${filepath}';`)).resolves.toBeDefined();
+
+describe('@carbon/styles', () => {
+  describe.each(filepaths)('%s', (filepath) => {
+    it('should be importable', async () => {
+      await expect(render(`@use '../${filepath}';`)).resolves.toBeDefined();
+    });
   });
-});
 
-describe('Snapshot Tests', () => {
-  it('should match snapshots', async () => {
+  it('should have stable public scss entrypoints', async () => {
     expect(filepaths).toMatchSnapshot();
   });
-});
 
-describe('@carbon/styles/scss/config', () => {
-  test('Config overrides', async () => {
-    const { get } = await render(`
-      @use 'sass:meta';
-      @use '../scss/config' with (
-        $prefix: 'custom-prefix',
-        $css--font-face: false,
-      );
+  describe('scss/config', () => {
+    test('config overrides', async () => {
+      const { get } = await render(`
+        @use 'sass:meta';
+        @use '../scss/config' with (
+          $prefix: 'custom-prefix',
+          $css--font-face: false,
+        );
 
-      $_: get('config', (
-        prefix: config.$prefix,
-        css--font-face: config.$css--font-face,
-      ));
-    `);
+        $_: get('config', (
+          prefix: config.$prefix,
+          css--font-face: config.$css--font-face,
+        ));
+      `);
+
+      expect(get('config').value).toEqual({
+        prefix: 'custom-prefix',
+        ['css--font-face']: false,
+      });
+    });
+  });
 
-    expect(get('config').value).toEqual({
-      prefix: 'custom-prefix',
-      ['css--font-face']: false,
+  describe('import order', () => {
+    it('should support bringing in stylesheets independently', async () => {
+      await expect(
+        render(`
+          @use '../scss/reset';
+          @use '../scss/grid';
+          @use '../scss/breakpoint';
+          @use '../scss/colors';
+          @use '../scss/components';
+        `)
+      ).resolves.not.toThrow();
     });
   });
 });

packages/styles/scss/_reset.scss

@@ -6,7 +6,7 @@
 //
 
 @use 'config';
-@use 'type';
+@use 'type/reset' as type;
 
 @mixin reset {
   /// http://meyerweb.com/eric/tools/css/reset/

packages/styles/scss/_type.scss → packages/styles/scss/type/_index.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'config';
+@use '../config';
 @forward '@carbon/type' show
   // Mixins
   reset,

packages/styles/scss/type/_reset.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/type/scss/modules/reset';

packages/type/index.scss

@@ -13,3 +13,4 @@
 @forward 'scss/modules/reset';
 @forward 'scss/modules/scale';
 @forward 'scss/modules/styles';
+@forward 'scss/modules/default-type';

packages/type/scss/modules/_default-type.scss

@@ -0,0 +1,55 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@use 'styles' as *;
+
+/// Include default type styles
+/// @access public
+/// @group @carbon/type
+@mixin default-type {
+  h1 {
+    @include type-style('productive-heading-06');
+  }
+
+  h2 {
+    @include type-style('productive-heading-05');
+  }
+
+  h3 {
+    @include type-style('productive-heading-04');
+  }
+
+  h4 {
+    @include type-style('productive-heading-03');
+  }
+
+  h5 {
+    @include type-style('productive-heading-02');
+  }
+
+  h6 {
+    @include type-style('productive-heading-01');
+  }
+
+  p {
+    @include type-style('body-long-02');
+  }
+
+  a {
+    @if meta.global-variable-exists('carbon--theme') and
+      map.has-key($carbon--theme, 'link-01')
+    {
+      color: map.get($carbon--theme, 'link-01');
+    } @else {
+      color: #0062fe;
+    }
+  }
+
+  em {
+    font-style: italic;
+  }
+}

packages/type/scss/modules/_reset.scss

@@ -9,7 +9,6 @@
 @use 'sass:meta';
 @use '@carbon/layout';
 @use 'font-family' as *;
-@use 'styles' as *;
 
 /// Include a type reset for a given body and mono font family
 /// @param {String} $body-font-family [font-family('sans')] - The font family used on the `<body>` element
@@ -43,50 +42,3 @@
     @include font-weight('semibold');
   }
 }
-
-/// Include default type styles
-/// @access public
-/// @group @carbon/type
-@mixin default-type {
-  h1 {
-    @include type-style('productive-heading-06');
-  }
-
-  h2 {
-    @include type-style('productive-heading-05');
-  }
-
-  h3 {
-    @include type-style('productive-heading-04');
-  }
-
-  h4 {
-    @include type-style('productive-heading-03');
-  }
-
-  h5 {
-    @include type-style('productive-heading-02');
-  }
-
-  h6 {
-    @include type-style('productive-heading-01');
-  }
-
-  p {
-    @include type-style('body-long-02');
-  }
-
-  a {
-    @if meta.global-variable-exists('carbon--theme') and
-      map.has-key($carbon--theme, 'link-01')
-    {
-      color: map.get($carbon--theme, 'link-01');
-    } @else {
-      color: #0062fe;
-    }
-  }
-
-  em {
-    font-style: italic;
-  }
-}