From 3e25f8dd3dbc99055937e73ad3b19946fbf73385 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Mon, 18 Apr 2022 11:20:50 -0500
Subject: [PATCH] fix(styles): correctly prefix type tokens and custom
 properties (#11228)

* fix(styles): forward along prefix correctly

* fix(styles): correctly prefix type tokens and custom properties

Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/styles/scss/__tests__/type-test.js | 21 +++++++++++++++++++++
 packages/styles/scss/type/_index.scss       |  9 +++++++++
 packages/type/index.scss                    |  8 +++-----
 packages/type/package.json                  |  4 ++--
 packages/type/scss/_prefix.scss             | 19 ++++++++++++++++++-
 packages/type/scss/_styles.scss             |  5 +----
 6 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/packages/styles/scss/__tests__/type-test.js b/packages/styles/scss/__tests__/type-test.js
index 5d2c6a8a9b8a..fbef72d473a3 100644
--- a/packages/styles/scss/__tests__/type-test.js
+++ b/packages/styles/scss/__tests__/type-test.js
@@ -10,6 +10,7 @@
 'use strict';
 
 const { SassRenderer } = require('@carbon/test-utils/scss');
+const css = require('css');
 
 const { render } = SassRenderer.create(__dirname);
 
@@ -74,4 +75,24 @@ describe('@carbon/styles/scss/type', () => {
       ]
     `);
   });
+
+  test('prefix', async () => {
+    const { result } = await render(`
+      @use '../config' with (
+        $prefix: 'custom',
+      );
+      @use '../type';
+
+      .my-selector {
+        @include type.type-style('label-01');
+      }
+    `);
+    const { stylesheet } = css.parse(result.css.toString());
+    const [rule] = stylesheet.rules;
+    for (const declaration of rule.declarations) {
+      expect(declaration.value).toEqual(
+        expect.stringContaining('var(--custom-')
+      );
+    }
+  });
 });
diff --git a/packages/styles/scss/type/_index.scss b/packages/styles/scss/type/_index.scss
index 51356a4676f8..22bdb0f36324 100644
--- a/packages/styles/scss/type/_index.scss
+++ b/packages/styles/scss/type/_index.scss
@@ -47,3 +47,12 @@
   $display-03,
   $display-04,
   $tokens;
+
+@use '@carbon/type';
+
+@include type.configure(
+  (
+    prefix: config.$prefix,
+    custom-property-prefix: config.$prefix,
+  )
+);
diff --git a/packages/type/index.scss b/packages/type/index.scss
index c0802d6597d9..44cb9dd1e77d 100644
--- a/packages/type/index.scss
+++ b/packages/type/index.scss
@@ -5,12 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'scss/prefix' with (
-  $prefix: 'bx' !default,
-);
-@forward 'scss/classes';
+@forward 'scss/prefix';
 @forward 'scss/font-family';
-@forward 'scss/reset';
 @forward 'scss/scale';
+@forward 'scss/reset';
 @forward 'scss/styles';
+@forward 'scss/classes';
 @forward 'scss/default-type';
diff --git a/packages/type/package.json b/packages/type/package.json
index 9f821b48e840..73ca6b65e455 100644
--- a/packages/type/package.json
+++ b/packages/type/package.json
@@ -33,8 +33,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonType && carbon-cli inline && carbon-cli check \"scss/*.scss\"",
-    "clean": "rimraf css es lib umd scss/_inlined scss/vendor"
+    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonType && carbon-cli check \"scss/*.scss\"",
+    "clean": "rimraf css es lib umd"
   },
   "dependencies": {
     "@carbon/grid": "^11.1.0"
diff --git a/packages/type/scss/_prefix.scss b/packages/type/scss/_prefix.scss
index 09c7214038b8..dd28ef403807 100644
--- a/packages/type/scss/_prefix.scss
+++ b/packages/type/scss/_prefix.scss
@@ -5,7 +5,24 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+
 /// @type String
 /// @access public
 /// @group @carbon/type
-$prefix: 'bx' !default;
+$prefix: 'cds' !default;
+
+/// @type String
+/// @access public
+/// @group @carbon/type
+$custom-property-prefix: 'cds' !default;
+
+@mixin configure($values) {
+  @if map.has-key($values, 'prefix') {
+    $prefix: map.get($values, 'prefix') !global;
+  }
+
+  @if map.has-key($values, 'custom-property-prefix') {
+    $custom-property-prefix: map.get($values, 'custom-property-prefix') !global;
+  }
+}
diff --git a/packages/type/scss/_styles.scss b/packages/type/scss/_styles.scss
index 53f952957eaf..04dd7d4638c6 100644
--- a/packages/type/scss/_styles.scss
+++ b/packages/type/scss/_styles.scss
@@ -11,6 +11,7 @@
 @use 'sass:math';
 @use '@carbon/grid/scss/config' as gridconfig;
 @use '@carbon/grid/scss/breakpoint' as grid;
+@use 'prefix' as *;
 @use 'font-family';
 @use 'scale';
 
@@ -810,10 +811,6 @@ $tokens: (
 // TODO move following variable and `custom-property` mixin into shared file for
 // both `@carbon/type` and `@carbon/themes`
 
-/// @access private
-/// @group @carbon/type
-$custom-property-prefix: 'cds' !default;
-
 /// @access private
 /// @group @carbon/type
 @mixin custom-properties($name, $value) {