UIKit Refactor Part 3: Bug Fixes + ITCSS Folder Reorganization

[sghoweri]

1. Adds number prefixes to UIKit's ITCSS folders to make it easier to manage which layers of the CSS correspond with which level of specificity / heavy-handedness

Fixes the ordering of the utilities, vendor and theme layers to utilities have the highest specificity, 3rd party vendor styles can get overwritten by components if needed, and theming-level styles build off of the component base styles established.

2. Fixes the typeahead dropdown styles (broken on dev currently)

3. Updates the ish controls to vertically center in the header (which, if the text in the top-level nav items wraps to more than one line, looks broken otherwise)

4. Fixes a bunch of bugs with PL's modal / code panel on dev -- besides now opening and closing properly, it now animates primarily based off of CSS transforms so the panel itself animates with a lot less Jank! #jankFree

^ should address the code panel bugs @bmuenzenmeyer mentioned here

[sghoweri]

@bmuenzenmeyer looks like Prettier auto-formatted a ton of Sass here with the 1:1 folder rename... much more than the handful of Sass files with actual changes here:

• 4f09e35
• da13765
• f75de74
• 16f8fe4
• a5be07b

Is this ok (expected)? Just want to make sure this all makes sense!

[bmuenzenmeyer]

I have yet to look formally at this but wanted to make mention that the CSS organization has always been the responsibility of @bradfrost and I want to ensure he is comfortable with what is changing.

[bmuenzenmeyer]

Also I think it's high time we ignore sass scss within https://github.com/pattern-lab/patternlab-node/blob/dev/.prettierignore

My interest in prettier within the monorepo begins and ends with js

[sghoweri]

Yeah, we just have Prettier and Eslint targeting our JS files in Bolt’s monorepo (and enforce linting / formatting for .scss files via our Stylelint config).

That’d probably be a better solution here.

[bradfrost]

👋Heya @sghoweri @bmuenzenmeyer, just ducking in here to say this is on my radar to take a look at; I just need to find a little time to do it. Looks exciting!

[bmuenzenmeyer]

That’d probably be a better solution here.

#910 already exists for this. A good idea then, forgotten, a good idea now 🤷‍♂️

[bmuenzenmeyer]

Looks good overall @sghoweri thank you so much!

Any idea why there are files with what looks to be cache-busting names in the output?

https://github.com/pattern-lab/patternlab-node/pull/934/files#diff-78b520855132cfcf67e87053bd35070e
https://github.com/pattern-lab/patternlab-node/pull/934/files#diff-d387402df46a10a801c2b0faa84e169b

[sghoweri]

Any idea why there are files with what looks to be cache-busting names in the output?

https://github.com/pattern-lab/patternlab-node/pull/934/files#diff-78b520855132cfcf67e87053bd35070e
https://github.com/pattern-lab/patternlab-node/pull/934/files#diff-d387402df46a10a801c2b0faa84e169b

@bmuenzenmeyer I’m pretty sure that’s related to the extract config option in the Webpack plugin handling the Critical CSS generation:
https://github.com/pattern-lab/patternlab-node/blob/dev/packages/uikit-workshop/webpack.config.js#L163 — which “Extracts inlined styles from referenced stylesheets”.

Basically when that option is enabled, the Critical npm package will create a new CSS file with the inlined Critical CSS omitted from it, with the new hashed filename getting automatically referenced in the HTML that’s wired up.

No changes to CSS = same hashed filename.

Not all that different than cache busting in Webpack with dynamically generates bundles that get asynchronously / conditionally imported (aka dynamic imports)

Thoughts?

[bmuenzenmeyer]

Makes sense. The missing piece was digging for this in the diff

All good! Great work!

💃