refactor: lower clickable style specificity by importing css module last #1508
Conversation
size-limit report 📦
|
Codecov Report
@@ Coverage Diff @@
## next #1508 +/- ##
=======================================
Coverage 91.91% 91.91%
=======================================
Files 277 277
Lines 4178 4178
Branches 755 755
=======================================
Hits 3840 3840
Misses 313 313
Partials 25 25
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
| "pattern": "*.module.css", | ||
| "group": "index", | ||
| "patternOptions": { "matchBase": true }, | ||
| "position": "after" |
There was a problem hiding this comment.
Looks for module.css and places after the index file, which is placed after imports from parents (where subcomponents live)
| @@ -7,7 +7,7 @@ | |||
| /** | |||
| * Accordion Button, wraps the heading and open indicator icon. | |||
| */ | |||
| .accordion-button.accordion-button { | |||
| .accordion-button { | |||
There was a problem hiding this comment.
removes doubling selectors in this file
| */ | ||
| .button--primary.button--primary { | ||
| .button--primary { |
There was a problem hiding this comment.
removes doubling selectors in this file
| @@ -24,7 +24,7 @@ | |||
| transition-duration: var(--eds-anim-fade-quick); | |||
| transition-timing-function: var(--eds-anim-ease); | |||
|
|
|||
| svg { | |||
| :where(svg) { | |||
There was a problem hiding this comment.
I added :where pseudo selectors to nested svg selectors to reduce specificity to (0, 1, 0) to be easily overridden by class selectors
| @@ -61,7 +61,7 @@ | |||
| /** | |||
| * Primary brand clickable style | |||
| */ | |||
| .clickable-style--primary.clickable-style--brand { | |||
| :where(.clickable-style--primary).clickable-style--brand { | |||
There was a problem hiding this comment.
Reduced specificity to these double class selectors to (0,1,0) as well
| @@ -19,7 +19,7 @@ | |||
| width: 100%; | |||
| } | |||
|
|
|||
| .menu__button.menu__button { | |||
| .menu__button { | |||
There was a problem hiding this comment.
removed doubled/quadrupled class selectors in this file
?? possibly with how bundling happens |
|
This is a great catch. I didn't realize we weren't consistent in this, but this follows the same order one would use if you managed the CSS (or any dependencies really) in the "classical" way:
|
|
@jinlee93 would this be a good one to test as an alpha on GST? Logically, this will Just Work (tm) |
Yea, TW classes have a lower specificity in GST than EDS due to the TW stylesheet being imported way earlier in the main app file and EDS components being imported ad hoc, so I imagine there wouldn't be any breaks where TW suddenly has more specificity over EDS components, but will alpha publish and test for sanity 👍 edit: might have spoken too soon https://github.com/chanzuckerberg/edu-stack/pull/32/commits/45912363535406a07d20d7e214fef08c8e5af12b#diff-4133eb55408b25b35b8e07c696a9dfc97b741c555d7407e8c86d0845e5eecc28R26-R28 |
|
@booc0mtaco GST CI tests pass and Chromatic only has the InputField label changes with v9.2.0-alpha.0 published off of this branch |
Summary:
:wherepseudoselectors toClickableStyle.module.cssto keep specificity to (0,1,0) so they can be overriden via class stylingyarn lint --fixto push css module imports to the end of importsTest Plan: