Organize SCSS imports into layers for better structure

[codecalm]

This pull request refactors the SCSS structure by organizing imports into CSS cascade layers using the @layer directive. This improves maintainability and modularity of the codebase. Additionally, it removes unused debugging code, further simplifying the SCSS files.

SCSS Refactoring with Cascade Layers:

• core/scss/_bootstrap-components.scss: Grouped Bootstrap imports under @layer directives for props, reset, components, and utilities to better align with the cascade structure.
• core/scss/_core.scss: Introduced @layer directives for props, layout, components, and utils to organize core SCSS imports. Removed duplicate and unnecessary imports.
• Other SCSS files (tabler-flags.scss, tabler-marketing.scss, tabler-payments.scss, tabler-socials.scss, tabler-themes.scss, tabler-vendors.scss): Added appropriate @layer directives (components, utilities, themes, or vendors) to organize imports modularly.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: b639b0ea2c2c015b05a1630be9589b350758121e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
tabler	✅ Ready (Inspect)	Visit Preview	May 21, 2025 0:46am
tabler-docs	✅ Ready (Inspect)	Visit Preview	May 21, 2025 0:46am

[kevinpapst]

Excuse my naive question, but reading e.g. this here it seems that @layer can be problematic. As Tabler is used mainly as an integration, so itself is embedded in the final products themselves, I wonder if this change might break implementing projects down the line.

What if a project currently uses @import tabler and other imports in their SCSS files? Honestly: I don't have enough SCSS knowledge, I am just curious because Copilot emitted several warnings about potential issues when @layer is introduced.

Are there any changes necessary when using Tabler in my own builds (not using the dist files, but the SCSS files directly)?

[codecalm]

@kevinpapst you're right. I'll hold off on merging this for the moment

[codecalm]

@kevinpapst on the other site, in v6 Bootstrap will be also used @layers in source code: https://github.com/twbs/bootstrap/pull/41236/files#diff-50b6ff2f3b80dd5ac386e653cb38713b3665fc59e3c8a9f85fe576cee1598f04 (eg. file `scss/_spinners.scss)

[kevinpapst]

I am just trying to raise awareness for BC breaks. Publishing something like this in a minor version can potentially cause a lot of headaches, while I do not see benefits (probably just because I do not understand @layers). Maybe this PR can be delayed for a new major version.

Are you planning to support Bootstrap v6? If so, this could probably released at the same time.