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

@@ -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-')
+      );
+    }
+  });
 });

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,
+  )
+);

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';

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"

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;
+  }
+}

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) {