SCSS 7-1 Pattern: Issues w/ User Agent Overrides, Circular Dependencies, & PurgeCSS Remov Normalize

Hello everyone! I’m working on an SCSS project using the 7-1 pattern, and I’ve run into a few issues that I’d love some help with. I’ll try to keep it concise, but I’ve included details and links to make it easier to understand. 1. User Agent Stylesheet Overriding My Resets For some reason, the user agent stylesheet is overriding my resets (like margin) and body styles (e.g., font-size, etc.). I expected the order of styles to be: - user agent stylesheet → normalize → reset → body → my custom styles. But in reality, the user agent stylesheet seems to be overriding my styles. I’ve attached some screenshots from DevTools to show what’s happening. 2. Circular Dependencies in SCSS 7-1 Architecture For those using the SCSS 7-1 pattern, how do you handle circular dependencies between files? Specifically, I want to: - Import a function (pxToRem) from abstracts/functions into abstracts/typography. - Import a font size map from abstracts/typography into abstracts/functions. This creates a loop, and I’m not sure how to avoid it. Any advice would be greatly appreciated! 3. PurgeCSS Removing Unused Normalize Styles I’m using vite-plugin-purgecss to remove unused utility classes, but it’s also stripping out parts of my normalize.scss that aren’t explicitly used in the project (e.g., styles for h1 and html remain, but others are removed). I don’t think this is the intended behavior. I’ve tried to find how to add a file to some exception list, but found info only on plugin’s whitelist, which accepts a list of tags, but that feels like wrong solution. Is there a way to solve this through CSS, or do I need to switch to loading normalize via CDN or JS? Project Details If it helps, the project is built with Vite, and you can check it out on GitHub: https://github.com/zang3tsu88/wellington_chef To run it locally: - Run npm install. - Run npm run dev. Thanks in advance for any help or suggestions! I’m really looking forward to learning from your expertise.

GitHub

GitHub - zang3tsu88/wellington_chef

Contribute to zang3tsu88/wellington_chef development by creating an account on GitHub.