fix(typography): Separate @material/feature-targeting

[EstebanG23]

Was causing sass test to fail and blocking PR merging.

[asyncLiz]

@abhiomkar suggested the different syntax, any idea why this would cause tests to fail?

[patrickrodee]

What about as ft to its clearly different than feature-targeting?

I'm trying to find ways we can take advantage of the _index.scss files.

[asyncLiz]

If we're just looking for another name, I'd recommend feature as a name that is concise and makes sense.

@use "@material/feature-targeting" as feature;

@mixin my-component-core-styles($query: feature.all()) {
  $feat-structure: feature.create-target($query, structure);

  @include feature.targets($feat-structure) {
    // ...
  }
}

[EstebanG23]

I tried both ft and without the as feature-targeting results are as follow:

Error: Can't find stylesheet to import.
26 │ @use "@material/feature-targeting" as ft;

Also do want to add this is blocking other PRs from being merged but I would encourage to file a bug/issue to investigate ways to take advantage of the _index.scss files.

[abhiomkar]

Thanks @EstebanG23 for sending a fix! Wondering why Copybara didn't block CL submit when github action failed in first place. 🤔

Sass couldn't compile Sass test files with @import statements since the custom importer doesn't handle new _index files (See testing/featuretargeting/sass-test-compile.helper.ts).

Next steps:

• Fix sass-test-compile.helper.ts to handle @import syntax. (Created Use sass-loader to compile Sass test files #5641)
• We should migrate all our test files to use @use syntax.

[patrickrodee]

Could be related to webpack-contrib/sass-loader#804