Revolutionizing hTWOo Core 2.8.0: Major Architectural Upgrade Insights

2025/07/16 by Stefan Bauer

It has been a while since a new version of the hTWOo Core has been released. The reason was that I had to change many things in the underlying architecture first. The current one made me uncomfortable at some point. Let me explain what has changed.

TL;DR

HTWOO Core 2.8.0 will introduce major architectural updates:

🔧 Replaced Gulp with a custom ICE build system for simpler, reusable pipelines.
⚙️ Adopted nx.dev to configure smart CI/CD workflows—now enhanced with GitHub Copilot and an AI-native MCP server.
🧪 Switched to Vitest for faster, native TypeScript and JavaScript testing.
♿ Added automated accessibility testing via Playwright and axe-core to meet full WCAG/AA compliance.
📝 Standardized commits using Conventional Commits to improve clarity and traceability across hTWOo projects.

Gulp vs Custom build

Gulp served me well over the last couple of years, but at some point. I wanted to have shiny new tools to play with. Since I integrated Gulp into Pattern Lab for the first time, it was never really optimal.

I wanted something more modern that would fit my purposes perfectly. It always caused too many dependencies in the “package.json” files. Especially since we reuse the custom build chain in pattern libraries for our customers as well. At some point, the configuration diverged between projects.

To have an easier and more manageable approach, I created a tool named ICE. It contains a custom-built chain and hot-reloader, supporting SASS and TypeScript, and is tailored specifically for Patternlabs.

AI improved CI/CD pipelines

Not to be confused with Corporate Identity or Design—this is about Continuous Integration and Deployment. AI hasn’t killed it; it’s just changed how we work. We write less, do more.

For tools like ice, my first Old-Fashioned VS Code extension, or even what’s ahead for HTWOO, I rely on a setup that adapts to my workflow.

Screenshot of NXdev website — Ai driven repo management allows you to configure common cicd tasks way faster

That setup uses nx.dev — a tool that lets me shape CI/CD pipelines and project configs exactly how I need.

I’ve spent countless hours fine-tuning aspects such as changelog automation and CI troubleshooting. Sometimes, progress means wasting time—strategically.

But with NX and GitHub Copilot—now boosted by an AI-native MCP (Model Context Protocol) server—my repos aren’t just smart. They’re capable.

If you like to work smarter, not harder, this is the right tool for you.

How I commit changes

To create a changelog directly from your commit messages, you need to write the message in a more structured approach.

Screenshot of conventional commit web site — Conventional commits are easy to remember and gives your commit messages more structure

For that, I use a specification named “Conventional Commits”

Every commit message starts in the following way:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

Type could be fix:, feat:, docs., style: and so on. The scope could be htwoo-core, htwoo-react, followed by a description.

It enables your developers to have a better understanding of what is happening on the project. Specifically, on HTWOO, all commits have been implemented in the past with commit messages similar to this.

fix[HTML]: Update accordion structure

This led Julie Turner to realize that the HTML structure of the component in hTWOo-core had changed, necessitating an update in hTWOo-react as well.

fix[CSS]: Updated accordion style

On the other hand, a commit message like this could have been ignored, since the CSS of htwoo-core is the base for htwoo-react anyway.

Accessibility testing already in HTWOO-Core

One thing that is near and dear to my heart is accessibility testing. We began with htwoo-react, as it was the starting point for automated accessibility testing, given the existing plugin for Storybook.

Patternlab for htwoo-core hasn’t had such a plugin; the upcoming release will be the first release where I have an automated accessibility test already for HTML and CSS in hTWOo core, which makes it fully WCAG/AA compliant, instead of having just a nebulous statement like Fluent UI.

Accessibility compliance means nothing — Fluent ui marketing buzzword information on accessibility without a clear indication of what it means

Something compliant or fully tested is two completely different things. More on that later. In the meantime, you will find the documentation on the upcoming branch.

Accessibility testing utilizes Playwright and axe-core.

Vitest for Typescript and JavaScript testing

Another new tool in our quiver is vitest, which we are using instead of Jest.

Screenshot of vitest website — Vitest provides a powerful next level testing framework

It supports out-of-box ESM, TypeScript, and JSX, which is powered by esbuild. The performance is incredible, as it does not use a TypeScript file transpiler, such as Babel.

Finally

Those changes have made my life easier in many ways. The new architecture introduces no breaking changes; instead, it brings improvements. Especially with one eye already on the Flunt Design 2 upgrade, this is a more future-ready setup for the complete projects. Let’s finish up with a collection of useful links:

NX.dev – Makes your repo and CI/CD pipeline smarter and helps GitHub Copilot to understand your project better.
Playwright.dev – End-to-end testing for modern webapps
Axe-core – for accessibility testing.
Old-fashioned VS Code extension – Allows you to have meaningful order in your CSS Files
Vitest.dev – truly a next-gen testing framework with amazing performance.
Convetional Commits – Better structure for your commit message
Make meaningful commit message
How to write a commit message