v2.0 Release Candidate - Release Notes

[endigo9740]

*** Skeleton v2 is now live! ***

---

Today we're happy to introduce the new v2 release candidate of Skeleton! This represents a huge step forward for Skeleton, introducing a number of important updates, new features, and of course some necessary breaking changes. As part of today's update you'll find a new Skeleton plugin for Tailwind, new theme format and configuration options, a dynamic transitions system for components, and much more!

🚨 Migration Guide 🚨

We've created a detailed migration guide to help you move from v1.x to the v2 release candidate.

• View the v2 RC migration guide
• View the v2 RC documentation site

🆕 What's New?

New Tailwind Plugin (#1660)

Skeleton co-maintainer @AdrianGonz97 has provided one of the largest and most impactful updates - a brand new Skeleton Tailwind plugin, which is now a standalone package separate from the core library. Under the hood, the plugin composes and injects all styles required, such Skeleton's Tailwind Elements, and injects those directly via Tailwind. This means you're no longer required to import and manage additional stylesheets such as theme.css or skeleton.css. Additionally, the plugin now supports the recently introduced .ts or .js formats for your Tailwind Config. The new plugin also changes the way you define and customize your themes settings, which we'll cover in more detail below.

New Theme Updates (#1660)

Learn more about the new theme options from the updated Themes section of our documentation.

Register and Switch Themes

The new Skeleton v2 plugin now allows you to register one or more preset or custom themes directly within your Tailwind config. You may then define which theme you wish to be actively displayed via a data-theme attribute on the body element in your application. This means dynamic theme switching is not only possible, but quite trivial to implement!

Preset Theme Enhancements

Preset themes have a simpler interface for enabling optional features, such as background gradients. This is provided via the enhancements setting in your plugin settings. Set the value to TRUE to opt into these extra features per each theme.

New Theme Format

Additionally, themes have been migrated to use CSS-in-JS, Tailwind's preferred format for injecting new styles via plugin. Themes still utilize CSS custom properties (aka CSS variables) like before, this merely changes how the theme data is delivered to the plugin. Typescript fans will also enjoy the new CustomThemeConfig type for simple type safety.

Using the New Format

Whether you're using a preset theme or aiming to migrate a custom theme, we recommend following our full migration guide linked at the top of this page. Note that we've also update the Theme Generator to output themes in the new format.

Dynamic Transitions for Components (#1533)

Contributor @Mahmoud-zino has devoted a tremendous amount of time to introduce a new dynamic transition system. This allows you to modify or disable transitions for nearly every component in the library! See the new Essentials > Transitions to learn more about how this works. This covers which components are supported, how to configure each transition, how to disable transitions, and of course how to adhere to best practices for accessibility. And yes, this dynamic transition system supports custom Svelte-based CSS or JS Svelte transitions!

New Table of Contents Utility (#1832)

Skeleton introduced a rudimentary Table of Contents component for our v1 launch, however, this never quite reached our standards of quality. Given this, we've raised this feature to the ground and began anew. With this, a new version of the feature can now be found under Utilities > Table of Contents.

The new version features a "crawler" action to scan a region of the page for headings, optionally append unique IDs to each heading, passing a reference for each heading to the component. While the updated component provides the visual interface and list of links on the page. Furthermore, we've reworked the scroll mechanisms to allow for native browser URL hashes for deep linking (ex: /some/path#my-deeplinked-section). This means the feature is now supported with or without the use of the Skeleton App Shell. You'll note the default styles are much less opinionated, but you'll find a wider range of customization is possible through the new style props.

Tree View Updates (#1779)

Contributor @Mahmoud-zino has been hard at work to introduce a number of user-requested features to the new Tree View. This includes a slew of selection methods, utility features, and even a means to generate tree views in a data-driven and recursive manner. Given the scope of the changes we're going to keep the beta label for a little while longer, but very much welcome your feedback on these changes.

PurgeCSS Plugin Support

While not directly part of the library proper, Skeleton co-maintainer @AdrianGonz97 has launched his initial version of vite-plugin-tailwind-purgecss. If you're not aware, Tailwind can provide a sub-par experience when it comes to purging unused CSS provided by third party Tailwind libraries such as Skeleton. To remedy this, the plugin helps ensure only the styles used in your production application make it to final CSS bundle. While optional, we highly encourage this for all Skeleton projects and have enabled it by default for all Skeleton CLI generated projects going forward. We've also provide a simple guide to help you get started.

Additional Updates:

• Skeleton co-maintainer @niktek has introduced a slew of updates to the Skeleton CLI
• Added a regionLabel prop to the RadioGroup component (Feat/radio group region label prop #1836)
• Many updates to the Skeleton documentation to cover the latest changes.

⚠️ Breaking Changes:

Drawers, Modals, and Toasts Stores (#1831)

We've refactored the stores for all singleton-based overlay features to help prevent known SvelteKit SSR issues. The new requirements are covered in our migration guide, and of course you're welcome to reference the updated documentation page for each feature:

• Drawers: https://skeleton-docs-git-v2-skeleton-labs.vercel.app/utilities/drawers
• Modals: https://skeleton-docs-git-v2-skeleton-labs.vercel.app/utilities/modals
• Toasts: https://skeleton-docs-git-v2-skeleton-labs.vercel.app/utilities/toasts

Skeleton Data Table Removed (#1822)

We've now removed the long-deprecated and unlisted Skeleton Data Table feature. Going forward, Skeleton's official recommendation is to use Svelte Simple Datatables paired with Skeleton's Table Element styles. For any holdouts wishing to keep the legacy data table feature, you can find a zip backup here.

Additional Breaking Changes

• The deprecated whitelist | blacklist props have been removed from the Autocomplete component.
  Chore/v2 cleanup deprecated removal #1822
• Removed all remnants of Skeleton's legacy typography system, which is no longer available in v2.
  Chore/v2 cleanup deprecated removal #1822
• Renamed the Paginator offset to page for better semantics.
  Chore/v2 cleanup deprecated removal #1822

🐞 Bugfixes

• Resolved a bug when Autocomplete allow and deny lists are empty.
  bugfix/autocomplete-denyallow-lists-reactive-update #1825
• Resolved a style issue for .bg-hover-primary-token color in dark mode.
  bugfix/background-hover-token-color #1824
• Prevent Paginator from resetting page value on length change.
  Bugfix/paginator-prevent-page-reset #1837
• InputChips now update binded value only once.
  bugfix/inputchips-updates-twice #1768

What's Next?

We'll be gathering and implementing fixes for issues found within the v2 RC, then anticipate a minor migration process from v2 RC -> v2 (stable). Keep an eye out for that in our next round of announcements on or around August 29th.

You may also reference our current proposals for the v3 roadmap. This provides a sneak peek into what we have planned for the future.

[stemcc]

Does the new Tailwind plugin make it easier to play nice with other component libraries using Tailwind like Flowbite Svelte?

[endigo9740]

I believe it does actually. @AdrianGonz97 mentioned this might be possible using prefixing. I don't recall the specifics though, so I'll reach out and see if can expand with more details.

[AdrianGonz97]

While it's technically possible now, there are a couple of caveats.

Our Tailwind plugin now has a prefix config option that will add a provided prefix to all skeleton component classes. For instance, if prefix is set to sk-, a skeleton component class, such as btn, will now be defined as sk-btn.

The catch is that you can't use this in combination with the rest of our component library (basically, anything imported from @skeletonlabs/skeleton) as our components only use the nonprefixed classes. You can see an example here where rounded-container-token is a skeleton specific class. If we were to add a prefix of sk-, this component's class names wouldn't update, and the styles would be completely off.

This config option is really only geared towards those that only want to use the Tailwind plugin and that's it. So yes, you could use the plugin with Flowbite, you just can't use the rest of the component library.

[endigo9740]

Thanks @AdrianGonz97 - so in order to properly utilize it everyone would have to go all in on the prefixes. Both end users and us on the library side as well. Hmm, yeah not ideal but makes total sense. Thanks for the clarification!

@stemcc so it's not "components" exactly, definitely not Flowbite Svelte, but it's worth sharing this guide we created for adjusting Flowbite "elements" for use within a Skeleton project. I shared this with Zoltan (head of Flowbite) a while back, and he liked it enough to share with their community. May not be what you're after exactly, but still worth a look:
https://www.skeleton.dev/blog/skeleton-plus-flowbite

Beyond that, I always encourage folks asking about mixed library support to specify what the other library does that you're interested in. I can't promise that Skeleton will have parity in all regards, everything generated here is done on a voluntary basis after all, but always nice to have on our radar.

[stemcc]

I appreciate your responses, thank you @endigo9740 and @AdrianGonz97.

I used to use more of a mixed library approach (and the headaches thereby introduced) but I've now get about 90%+ of my current project's components ported over to Skeleton or pure tailwind.

I always encourage folks asking about mixed library support to specify what the other library does that you're interested in.

One component pattern I use that I don't think Skeleton has a simple answer for (yet) is just a simple expandable element.

Like you'd see in Carbon Component Svelte or similarly in Flowbite Svelte (the menu dropdown wrapper).

Skeleton has expandable elements in the Accordion and TreeView but I find myself missing being able to use just a simple Expandable element as a building block for more complex components without the need to roll my own.

[endigo9740]

@stemcc glad to hear we're able to cover the majority of your needs. Yeah a smaller collapsable element might have some benefit. I'll keep that in mind. And obviously feel free to file a feature request here on GitHub as well. That's actually very likely to be picked up by a contributor at some point.