SASS not respecting LOCALLY scoped css variables

[mikematos84]

Summary

I have a package using Storybook and have style-loader, css-loader, and sass-loader all configured using @storybook/addon-styling-webpack. The weird thing I see is that GLOBALLY scoped CSS variables, are being respected and can be used within SASS, but not LOCALLY scoped ones. I am able to use LOCALLY scoped CSS variables when I use SASS within a NextJS app. So I think it is potentially a misconfiguration on my end rather than a bug. I would appreciate any help anyone can provide.

Here is my storybook configuration

const { dirname, join } = require('path');
const { loadSiteFonts } = require('../../../shared/.storybook/fonts');

module.exports = {
  // Specify files containing component stories.
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],

  // Add desired addons to enhance Storybook functionality.
  addons: [
    getAbsolutePath('@storybook/addon-a11y'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-storysource'),
    getAbsolutePath('storybook-addon-mock'),
    getAbsolutePath('storybook-dark-mode'),
    'storybook-addon-performance',
    getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
    {
      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          // Replaces existing CSS rules to support CSS Modules
          {
            test: /\.css$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    auto: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                  },
                },
              },
            ],
          },
          // Replaces any existing Sass rules with given rules
          {
            test: /\.s[ac]ss$/i,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    auto: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                  },
                },
              },
              {
                loader: 'sass-loader',
                options: {
                  implementation: require.resolve('sass'),
                },
              },
            ],
          },
        ],
      },
    },
  ],

  // Configure the framework used by Storybook.
  framework: {
    name: getAbsolutePath('@storybook/react-webpack5'),
    options: {},
  },

  // Auto-generate documentation for Component Story Format (CSF) files.
  docs: {},

  // Implement custom webpack configuration.
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@emotion/core': getAbsolutePath('@emotion/react'),
      '@emotion/styled': getAbsolutePath('@emotion/styled'),
      'emotion-theming': getAbsolutePath('@emotion/react'),
    };

    return config;
  },

  // previewHead
  previewHead: (head) => {
    const fontData = loadSiteFonts();
    return `
    ${head}
    ${fontData}
  `;
  },

  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },
};

function getAbsolutePath(value) {
  return dirname(require.resolve(join(value, 'package.json')));
}

And here is a sample of the CSS that works

:root {
  // CSS variables are globally scoped
  --background-color: #f0f0f0;
  --warning-color: #ffcc00;
  --success-color: #4caf50;
  --error-color: #f44336;
}

.sass {
  &__button {
    background-color: var(--background-color);
    
    &.--warning {
      background-color: var(--warning-color);
    }

    &.--success {
      background-color: var(--success-color);
    }

    &.--error {
      background-color: var(--error-color);
    }
  }
}

and the CSS that does not work, but I would like it too

:root {
  // CSS variables are globally scoped
}

.sass {
  // CSS variables are locally scoped
  --background-color: #f0f0f0;
  --warning-color: #ffcc00;
  --success-color: #4caf50;
  --error-color: #f44336;

  &__button {
    background-color: var(--background-color);
    
    &.--warning {
      background-color: var(--warning-color);
    }

    &.--success {
      background-color: var(--success-color);
    }

    &.--error {
      background-color: var(--error-color);
    }
  }
}

Additional information

No response

Create a reproduction

No response

[kerryj89]

Just to clear out the obvious but sometimes easy to overlook things, are you maybe doing something like

className="sass {styles.sass__button} ..."

or

className="{styles.sass__button} ..."

instead of

className="{styles.sass} {styles.sass__button} ..."

[mikematos84]

Yes so in the end I am doing it like that. I use the classnames package to allow me to apply the classes a little easier, but it is definitely referencing the classes. Here is an example of the sample component. Which works fine for me in when the CSS variables a in the :root but bot when they are part of .sass

import styles from './SassComponent.module.scss';
import classNames from 'classnames';

export default function SassComponent({ size = 'sm', disabled = false, status }) {
  return (
    <button
      className={classNames(styles.sass__button, {
        [styles[`--${size}`]]: size,
        [styles['--disabled']]: disabled,
        [styles[`--${status}`]]: status,
      })}
    >
      Sass Component
    </button>
  );
}

the SASS that goes along with it

:root {
  // This is working
  // --background-color: #f0f0f0;
  // --warning-color: #ffcc00;
  // --success-color: #4caf50;
  // --error-color: #f44336;
}

.sass {
  // This is not
  --background-color: #f0f0f0;
  --warning-color: #ffcc00;
  --success-color: #4caf50;
  --error-color: #f44336;

  &__button {
    background-color: var(--background-color);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;

    &.--disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &.--sm {
      padding: 5px;
    }

    &.--md {
      padding: 10px;
    }

    &.--lg {
      padding: 15px;
    }

    &.--warning {
      background-color: var(--warning-color);
    }

    &.--success {
      background-color: var(--success-color);
    }

    &.--error {
      background-color: var(--error-color);
    }
  }
}

[mikematos84]

So it turns out if I move the variables into the sass__button then I start to see the CSS variables being used. But shouldn't they be available from the top down of the parent?

.sass {
  &__button {
  --background-color: #f0f0f0;
  --warning-color: #ffcc00;
  --success-color: #4caf50;
  --error-color: #f44336;

    background-color: var(--background-color);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;

    &.--disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &.--sm {
      padding: 5px;
    }

    &.--md {
      padding: 10px;
    }

    &.--lg {
      padding: 15px;
    }

    &.--warning {
      background-color: var(--warning-color);
    }

    &.--success {
      background-color: var(--success-color);
    }

    &.--error {
      background-color: var(--error-color);
    }
  }
}

[kerryj89]

This got me tripped up before, too.

So what's happening here (if I understand you right):

.sass {
  // This is not
  --background-color: #f0f0f0;
  --warning-color: #ffcc00;
  --success-color: #4caf50;
  --error-color: #f44336;

  &__button {
    background-color: var(--background-color);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    ...
  }

Is actually compiled to (well, with hashses)

.sass {
  --background-color: #f0f0f0;
  --warning-color: #ffcc00;
  --success-color: #4caf50;
  --error-color: #f44336;
}

.sass__button {
  background-color: var(--background-color);
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  ...
}

And you are only applying .sass__button to <button> and not .sass itself. There are several ways to go about this:

1. Pass in styles.sass (end result is that these variables are "glued" to the component like the others aka css modules - e.g. compiled class name might be _sass-2njs83k

import styles from './SassComponent.module.scss';
import classNames from 'classnames';

export default function SassComponent({ size = 'sm', disabled = false, status }) {
  return (
    <button
      className={classNames(styles.sass, styles.sass__button, {
        [styles[`--${size}`]]: size,
        [styles['--disabled']]: disabled,
        [styles[`--${status}`]]: status,
      })}
    >
      Sass Component
    </button>
  );
}

2. Set it globally in css modules (now you can use the .sass class anywhere, but it's somewhere in between global and module scoped now and other people can overwrite it deterministically since its no longer hashed with .sass { ... })

:global(.sass) {
  --background-color: #f0f0f0;
  --warning-color: #ffcc00;
  --success-color: #4caf50;
  --error-color: #f44336;
}

.sass {
  &__button {
    background-color: var(--background-color);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    ...
  }
}

import styles from './SassComponent.module.scss';
import classNames from 'classnames';

export default function SassComponent({ size = 'sm', disabled = false, status }) {
  return (
    <button
      className={classNames('sass', styles.sass__button, {
        [styles[`--${size}`]]: size,
        [styles['--disabled']]: disabled,
        [styles[`--${status}`]]: status,
      })}
    >
      Sass Component <span className="sass">Can now be tapped into anywhere, no need to import in</span>
    </button>
  );
}

3. If you want to skip having to pass in sass at all and are okay with having it in the almost-global level (not hashed), you can do

:global([class*="__sass__"]) {
  --background-color: #f0f0f0;
  --warning-color: #ffcc00;
  --success-color: #4caf50;
  --error-color: #f44336;
}

.sass {
  &__button {
    background-color: var(--background-color);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    ...
  }
}

The wildcard selector will apply anytime it sees __sass__ in the class name. While unlikely to happen it can collide with any other hashed classes with sass anywhere in its name.

---

Your "solution" works but it works because you are defining the css variables at the sass__button level which is imported in and used in your JSX. Maybe that's all you wanted but the way you had it before made it seem like you were trying to define a "sass" scope selector that other components can tap into, but if those variables are exclusively for your button then your latest solution is the right way.