Discovery: CSS is hoisted out of parent class in style-consolidated stylesheet about vets-design-system-documentation HOT 4 CLOSED

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

from vets-design-system-documentation.

It appears that imported CSS was being hoisted because the import statement is not using the correct file type and format.

In order to import a stylesheet within a class as we were intending to, we must name the inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. @import '~@department-of-veterans-affairs/component-library/dist/main.css';
→ @import '~@department-of-veterans-affairs/component-library/dist/main' ; and of course, main.css renamed to _main.scss

Specific to this ticket: main.css contains more rules that were intended to be imported, as such the file may not need to be imported within the .consolidated class.

from vets-design-system-documentation.

@rmessina1010 - Is there an issue tracking our implementation of these changes or did we already make these changes?

from vets-design-system-documentation.

@humancompanion-usds - we don't have an issue yet for implementing changes, and actually with Randi's recent work to completely decouple the injected header, we likely won't need to do anything on our end to guard against this happening again. Her rework of the style-consolidated.scss file completely removed the import of component-library/dist/main.css.

from vets-design-system-documentation.