AlaskaAirlines / WebCoreStyleSheets

The core front-end framework for building experiences with the Orion Design System and transition to the Auro Design System.
https://auro.alaskaair.com/webcorestylesheets
Apache License 2.0
5 stars 5 forks source link

WCSS: $scope is an undefined variable #157

Closed gusnaughton closed 1 year ago

gusnaughton commented 1 year ago

Describe the bug

I am attempting to use the .table CSS utility from WCSS.

I am importing the following:

// Global Auro styles

@import '../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables'; // Auro design tokens as Sass variables, required to import WCSS
@import '../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties'; // Auro design tokens as CSS Custom Properties, used by auro-* components

$scope: true;
@import "../node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/table";
@import '../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints';
@import '../node_modules/@aurodesignsystem/webcorestylesheets/dist/fonts';
@import '../node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize';
@import '../node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials';
@import '../node_modules/@aurodesignsystem/webcorestylesheets/dist/headings';

with a package.json containing the following auro deps:

    "@alaskaairux/auro-accordion": "^1.6.6",
    "@alaskaairux/auro-flightline": "^1.4.0",
    "@aurodesignsystem/auro-alert": "^2.0.3",
    "@aurodesignsystem/auro-flight": "^2.2.0",
    "@aurodesignsystem/auro-hyperlink": "^3.3.3",
    "@aurodesignsystem/auro-icon": "^4.0.2",
    "@aurodesignsystem/webcorestylesheets": "^4.3.0",
    "@aurolabs/auro-flightstatus": "^1.0.0",
    "@alaskaairux/auro-checkbox": "^1.2.2",
    "@alaskaairux/auro-radio": "^1.6.2",
    "@alaskaairux/design-tokens": "^3.14.0",
    "@aurodesignsystem/auro-button": "^7.0.1",
    "@aurodesignsystem/auro-header": "^2.0.1",
    "@aurodesignsystem/auro-input": "^2.14.1",

When I build, I receive the following:

ERROR in ./src/components/PriorityList.svelte
Module build failed (from ./node_modules/svelte-loader/index.js):
Error: Undefined variable.
   ╷
15 │ #{$scope}.auro_table {
   │   ^^^^^^
   ╵
  node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/_table.scss 15:3  @import
  stdin 2:9                                                                                 root stylesheet