`@include carbon--type-style` doesn't work with `enable-css-custom-properties` on

What package(s) are you using?

• carbon-components
• carbon-components-react
• @carbon/type

Detailed description

Describe in detail the issue you’re having.

I’m trying to isolate https://github.com/carbon-design-system/ibm-cloud-cognitive/issues/733. When trying to use @carbon/type’s SCSS resources, I find the following Sass:

$feature-flags: (
  enable-css-custom-properties: true,
);

@import '@carbon/type/scss/styles';

.test-btn {
  @include carbon--type-style('expressive-heading-05');
}

fails to compile using the sass package:

    ERROR in ./index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/fast-sass-loader/lib??ref--4-2!./index.scss)
    Module build failed (from ./node_modules/fast-sass-loader/lib/index.js):
    Error: (md: (font-size: 2.25rem, font-weight: 300, line-height: 1.22), lg: (font-size: 2.625rem, line-height: 1.19), xlg: (font-size: 3rem, line-height: 1.17), max: (font-size: 3.75rem)) isn't a valid CSS value.
         ╷
    1164 │       #{$value}
         │         ^^^^^^
         ╵
      index.scss 1164:9  custom-properties()
      index.scss 1198:7  carbon--type-style()
      index.scss 1209:3  root stylesheet

Is this issue related to a specific component?

No.

What browser are you working in?

None, this is at build time.

What version of the Carbon Design System are you using?

1. @carbon/type@10.27.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

N/A

Steps to reproduce the issue

index.js:

import './index.scss'
console.log('hello world')

index.scss:

$feature-flags: (
  enable-css-custom-properties: true,
);
@import '@carbon/type/scss/styles';
.test-btn {
  @include carbon--type-style('expressive-heading-05');
}

webpack.config.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'production',
  entry: {
    main: './index.js'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
        loader: MiniCssExtractPlugin.loader
      }, {
        loader: 'css-loader'
      }, {
        loader: 'fast-sass-loader',
        options: {
          includePaths: ['node_modules']
        }
      }]
    }]
  },
  plugins: [new MiniCssExtractPlugin()]
}

Command line:

npm install \
  webpack \
  webpack-cli \
  mini-css-extract-plugin \
  css-loader \
  fast-sass-loader \
  sass \
  @carbon/type
npx webpack

Additional information

I think the problem may lie here:

    @if global-variable-exists('feature-flags') and
      map-get($feature-flags, 'enable-css-custom-properties')
    {
      @include custom-properties($name, $token);
    } @else {
      // Otherwise, we just include all the property declarations directly on the
      // selector
      @include properties(map-remove($token, 'breakpoints'));
    }

Shouldn’t you be stripping the breakpoints property out of $token on both of those branches?

[s100]

@andreancardona First I apologise, it looks like there were a few hitches in my steps to reproduce. Firstly, it looks like fast-sass-loader has some serious problems with module resolution. So I have modified my webpack.config.js from:

      {
        loader: 'fast-sass-loader'
      }

to

      {
        loader: 'fast-sass-loader',
        options: {
          includePaths: ['node_modules']
        }
      }

to make this work properly. Secondly, the error I was originally seeing, “Declarations may only be used within style rules”, is a red herring and is my fault, not a Carbon issue. I wrote

@include carbon--type-style('expressive-heading-05');

when, as your CodeSandbox correctly says, I should have written something like:

.test-btn {
  @include carbon--type-style('expressive-heading-05');
}

With this change made, the actual error I see is:

    ERROR in ./index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/fast-sass-loader/lib??ref--4-2!./index.scss)
    Module build failed (from ./node_modules/fast-sass-loader/lib/index.js):
    Error: (md: (font-size: 2.25rem, font-weight: 300, line-height: 1.22), lg: (font-size: 2.625rem, line-height: 1.19), xlg: (font-size: 3rem, line-height: 1.17), max: (font-size: 3.75rem)) isn't a valid CSS value.
         ╷
    1164 │       #{$value}
         │         ^^^^^^
         ╵
      index.scss 1164:9  custom-properties()
      index.scss 1198:7  carbon--type-style()
      index.scss 1209:3  root stylesheet

I have upgraded updated my original issue statement to reflect this.

Having said that… your CodeSandbox does not reproduce my issue because it skips over some critical stuff. Firstly, you’re explicitly setting $fluid: true, when I am not. Setting $fluid: true sends us down a different code path which doesn’t demonstrate this problem. I’m not setting $fluid at all, which means it defaults to $fluid: false.

Secondly, your CodeSandbox doesn’t look like it’s using my webpack configuration. I don’t know what you are using internally, I think it’s create-react-app, which is pretty complex internally. But my guess is you might be using fast-sass-loader@1, which uses node-sass, which is deprecated, and we’re moving away from it. In my webpack configuration, we’re using the latest, fast-sass-loader@2, which uses sass internally, which causes this problem.

[davidbmaier]

Just to confirm this is not an outlier: I’m seeing the same problem as @s100 - but only when using sass to compile the styles (as opposed to node-sass, which works fine). As sass is the recommended one now, staying with node-sass is not really an option long-term.

Also, I’m only seeing the problem using expressive types - productive ones seem to compile fine? But that may just be coincidental.