v1.0.0-alpha.50 - The Return of the Scoped CSS

Scoped CSS is Back 🎉

In your components, now you can write css like -

// navbar.abell
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<style>
ul {
  background-color: #ddd;
}
</style>  

And it will be scoped for this particular component by default. The ul tags outside of the navbar component will not get these styles.

This is an experimental version of scoped CSS and this one will directly inline the CSS into HTML. In future versions, the bundling of CSS files will improve.

You can also opt out of this by adding scoped="false" to style tag <style scoped="false">.

Thoughts Behind the Decision

So I've been trying to keep abell minimal and close to HTML, CSS, JS setup. I've been treating CSS scoping as an enhancement which can be done using third-party libraries. However, while rebuilding the https://blog.saurabhdaware.in in new Abell I realized, CSS is really messy to write in vanilla setup and thus in Abell.

How we write CSS plays a major role in the DX of the frontend development. There are a few third-party solutions like https://stitches.dev/ that can be used with Abell however it might take some time for them to get some traction in the ecosystem and the setup with Abell is not super straightforward. There isn't any obvious framework-agnostic CSS solution in the ecosystem right now.

Thus it felt necessary to have out-of-the-box CSS scoping in Abell which improves the overall DX of writing and scaling CSS. People will still have an option of ignoring this feature and using third-party without a problem.

We might also get a native CSS scoping solution in CSS (Draft Proposal for CSS Scoping) which I can later leverage in future versions.

Will be improving over this implementation in future updates :D