refactor: Bundle USWDS + custom styles as part of the parcel library build

[dzole0311]

Related Ticket: #1191
Related Next.js PR: NASA-IMPACT/next-veda-ui#20

Description of Changes

• Bundle USWDS styles and custom styles with our components
• Fix USWDS asset paths to work in Next.js via PostCSS URL handling
• Rename SCSS files to match component names to prevent namespace conflicts (otherwise they throw namespace exists errors when they are imported into one entry SCSS file)
• Consolidate styles into a single entry point (styles.scss)
• Update yarn.lock / resolve merge conflicts

Main problem this PR addresses

When our USWDS-styled components were used in Next.js, they appeared unstyled because USWDS assets weren't properly bundled. This PR:

1. Bundles all needed USWDS assets with our components
2. Resolves USWDS asset paths correctly in Next.js
3. Makes styles work automatically in Next.js without the need for manual style imports

The third point is interesting because Next.js detects and loads any CSS dependencies that Parcel bundled with our components, which I hope makes the developer experience much smoother. This means we could do this:

// Just import the component, styles come automatically once the VEDA UI lib is used
import { Header } from '@veda-ui/lib'

And the component will be styled with the VEDA UI styles, instead of having to:

// Had to manually import styles in Next.js app
import '@veda-ui/lib/styles.css'
import { Header } from '@veda-ui/lib'

Notes & Questions About Changes

Few things to note (cc @hanbyul-here @sandrahoang686 @AliceR)

1. This approach only includes USWDS styles that we're actively using in our components. These styles are managed through our main styles.scss file. This means we're keeping things lightweight by not including styles for USWDS components we don't use (like the stepper component). If a Next.js project needs additional USWDS components later, we can easily add them to styles.scss or they could install the USWDS library and get access to it. This keeps our bundle size small and efficient (we only ship what we actually need for VEDA)

2. Style organization:

• Main entry point: app/scripts/styles/styles.scss
• Component styles should be imported in this entry file, not in the components. However, they can be kept in the respective component directory for easier look up
• Next.js apps don't need to install USWDS as a dependency, everything comes with our components

Validation / Testing

VEDA UI

1. Check preview deployment
2. Check that USWDS styles work (page header)
3. Check that custom styles work (page header)
4. Confirm icons display correctly (nav chevrons)

Next.js

1. Test locally using symlink with veda-ui branch (1137-implement-new-ds-page-header, now merged to main)
2. Check that both USWDS and custom styles work (page header)
3. Check that no manual style imports are needed

[netlify]

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	d447521
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/6757e9a8dd0e2900087ea654
😎 Deploy Preview	https://deploy-preview-1275--veda-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AliceR]

Everything works as you describe it @dzole0311 ! Thank you! 🙌

[dzole0311]

Thanks for reviewing and testing @AliceR!

[sandrahoang686]

I am just reading this now, really like and prefer this approach! thanks @dzole0311.