Migrating from ember-component-css to ember-css-modules + sass

Hello! I am trying to update an app to the latest Ember version. In order to do that and have an ability to use Glimmer components, I would like to migrate that app from ember-component-css to ember-css-modules. The app itself has a lot of components and dependencies on other add-ons. That’s why I am looking for the smoothest possible way to migrate the components.

That means that, as an intermediate step, I would like to keep both ember-component-css under app/styles/component-styles and ember-css-modulesstyle files collocated to their .hbs and .js files. This approach works OK with .css files.

However, when I am trying to convert the .css module file to .scss and use ember-css-modules-sass, I am facing an error during the build: Top-level selectors may not contain the parent selector "&".

The “&” on the top level worked fine in “ember-component-css” – and is widely used in the app (and in one of the consumed addons). The question is: Is it possible to configure the build process in a way that both addons work separately and don’t break the build and use the .scss syntax/features in both cases? Maybe I can somehow configure the ember-css-modules to process only the css modules in the /components dir?

Thank you in advance!