Coralite v0.22.0 Released

Thomas David - 18 Feb 26

I am excited to announce the release of Coralite v0.22.0! This update brings powerful new styling capabilities, concurrent rendering for faster builds, and significant performance improvements across the board.

Automatic Scoped Styles #

Component styles are now scoped by default, with automatic CSS transformation handling root class selectors. This means you can write standard CSS without worrying about manual scoping, and Coralite will automatically apply the correct selectors based on where the class is used.

For example, given a component with a root class and a descendant class:

<template id="my-card">
  <div class="card">
    <h2 class="title">My Card</h2>
    <p>Some content...</p>
  </div>
  <style>  
  /* Applies to the root element because .card is on the root */
  .card {
    background: white;
    padding: 1rem;
    border-radius: 8px;
  }
  
  /* Applies to the descendant element */
  .title {
    color: #333;
    font-size: 1.5rem;
  }
</style>
</template>

Coralite will automatically transform this into scoped CSS:

  [data-style-selector="my-card"] {
    &.card {
      background: white;
      padding: 1rem;
      border-radius: 8px;
    }
  
    .title {
      color: #333;
      font-size: 1.5rem;
    }
  }

This ensures that styles remain encapsulated within the component while still allowing you to target the root element easily.

Concurrent Rendering #

The build process now supports concurrent rendering with build-scoped render queues. This allows Coralite to process multiple pages in parallel, significantly reducing build times for large sites.

The new addRenderQueue(page, buildId) method enables plugins to safely add pages to the current build queue without race conditions.

Performance Improvements #

This release includes several performance optimizations:

• DOM Creation: A new benchmark shows up to 22x speedup in DOM node creation.
• Document Cloning: The new cloneDocumentInstance utility provides a faster and safer way to clone documents for mutations during the build process.
• Optimized CSS Transformation: The style transformation logic has been unified and optimized for better performance.

How to Upgrade #

To upgrade to the latest version, update your project dependencies:

  npm install coralite@0.22.0

  npm install coralite-scripts@0.22.0

Related posts

• Coralite v0.22.0 Released: Scoped Styles & Concurrent Rendering - 18 Feb 26
• Coralite v0.20 Released: Major Performance Boost & New APIs - 9 Feb 26
• Coralite v0.19.0 Released: Script System Refactor - 1 Jan 26

More blog posts