[BUG] Errors with Storybook 7 using Emulsify CLI

[callinmullaney]

What: Resolves https://github.com/emulsify-ds/emulsify-drupal/issues/293 where compiling compound components results in an error.

Why:

Fixes an issue where the Storybook 7 upgrade broke compiling with the latest version of Compound.

To Test:

Create Drupal Project: composer create-project drupal/recommended-project [PROJECT_NAME] --no-interaction

Move into the project directory cd [PROJECT_NAME]

Install Emulsify client globally npm install -g @emulsify/cli

Initialize your theme with emulsify emulsify init --checkout=feat-issue-293 "[THEME NAME]"

Install the version of Drupal componentst works with Drupal 10 composer require 'drupal/components:^3.0@beta'

Install the version of emulsify_twig that work with Drupal 10 composer require 'drupal/emulsify_twig^4.0'

Move into the theme directory cd web/themes/custom/[THEME NAME]

Install Compound System emulsify system install compound

Start the watch task and run Storybook to where errors are seen npm run develop

Note: The scss files should now compile. However, this will result in a lot of stylint warnings (examples below) but this is more of an issue with the Compound repository and not emulsify-drupal specifically.

WARN [stylelint] 
WARN components/style.scss
WARN   2:9  ✖  Expected "'~normalize.css/normalize'" to be "url('~normalize.css/normalize')"                                import-notation
WARN   3:9  ✖  Expected "'~breakpoint-sass/stylesheets/breakpoint'" to be "url('~breakpoint-sass/stylesheets/breakpoint')"  import-notation
WARN   6:9  ✖  Expected "'00-base/**/*.scss'" to be "url('00-base/**/*.scss')"                                              import-notation
WARN   7:9  ✖  Expected "'01-atoms/**/*.scss'" to be "url('01-atoms/**/*.scss')"                                            import-notation
WARN   8:9  ✖  Expected "'02-molecules/**/*.scss'" to be "url('02-molecules/**/*.scss')"                                    import-notation
WARN   9:9  ✖  Expected "'03-organisms/**/*.scss'" to be "url('03-organisms/**/*.scss')"                                    import-notation
WARN  10:9  ✖  Expected "'04-templates/**/*.scss'" to be "url('04-templates/**/*.scss')"                                    import-notation
WARN  11:9  ✖  Expected "'00-base/01-colors/colors-used.scss'" to be "url('00-base/01-colors/colors-used.scss')"            import-notation```

[amazingrando]

@callinmullaney Following the instructions, I continue to get variables not being found errors. Should there be a step where we are telling the emulsify init command that it should be using this PR?

[callinmullaney]

@amazingrando I updated the testing directions. You're correct that the emulsify init command should have specified this branch. To test we need to run emulsify init --checkout=feat-issue-293 [THEME NAME] instead.

[github-actions[bot]]

:tada: This PR is included in version 4.6.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: