2.0: Back to the basics (again)

TL;DR – now that browser support has improved for custom props and CSS grid, Shoelace 2.0 will go back to its roots and once again be highly customizable without the need for any sort of build process.

---

As Shoelace evolved, it became clear that we weren’t quite ready for certain CSS features in production. I feel I was a bit too premature with pushing Custom Properties and CSS Grid Layout when Shoelace was released back in July, but I think we’re ready to move these features to the mainstream.

Edge 16 was released on October 16, and with it brings full support for Custom Properties and CSS Grid Layout. This doesn’t include IE11, but I’m OK with that at this point.

Here’s what I’d like to do moving forward:

• Remove all cssnext-specific features so you don’t have to build Shoelace to use it.
• Rework the build process so the dist contains custom properties. This will make Shoelace easier to use and, once again, customizable via CDN.
• Split variables into their own component files again, making Shoelace much more modular and extensible. For example, you’ll be able to include a single third party .css file that inherits your theme/component styles automatically, even from a CDN!
• Address #12 by requiring component classes (e.g. <button class="btn">) for default components. My updated thoughts on this: styling is easier, implementing is easier, and the “namespace” has some benefits.

This is a bit of a backpedal, but I think it’s finally time. Of course, this will introduce a breaking change in terms of browser support, so the new version will be 2.0.

Thoughts?

[claviska]

Stencil uses Rollup under the hood which handles tree-shaking. The generated components can be consumed in a couple ways:

1. Lazy loaded – you load a <script> and just use the components. They’re loaded asynchronously, so only what’s used is what’s loaded. I believe this is how Ionic consumes their Stencil components.

2. Custom Elements Bundle – you load and register each component yourself. This is one of Stencil’s @next features but an important one that I’d like to expose for sure.

In either case, you’re only loading what you actually need rather than the entire component library. 👍

BTW, here’s a (scaled down to fit) screenshot of buttons. This is one component. Each variation is made simply by changing props and/or adding slots.

[NullVoxPopuli]

I think getting rid of the build process and using all native modern features would be amazing!

For those who still want IE11 or other old browsers… just… don’t use the new version of shoelace? there is nothing wrong with staying an old version for compatibility reasons.