Multiple Turbo instances


Please be aware that the generated CSS rules need to be carefully ordered. For example, active styles (:active) must come after hover styles (:hover) otherwise the active styles will never take effect.

Turbo compilers take care of this by default but you may run into issues when you use multiple Turbo instances on the same page. (That is, you add multiple stylesheets generated by separate Turbo instances.)

In such cases, the second stylesheet may define a hover state that is overriding the active state defined in the first stylesheet because the definition happens later.

There are two obvious choices to solve the issue:

  • Use a single compiler instance, or

  • use a unique namespace in each compiler instance, thereby avoiding conflicts.


You will be able to mix future Turbo CSS versions with the current version in the same codebase, avoiding costly migrations (time, money)

You must have noticed the t1 class in Turbo CSS expressions. It's main purpose is to allow the evolution of the Turbo CSS language without forcing you to do costly rewrites in the future.

The t1 line of the specification is frozen to be backwards compatible. We may add features, in which case you should upgrade to get those features, but we will not introduce breaking changes forcing a rewrite on you. That's what the t2 line is for. 

As the language evolves, we will collect any ideas for a t2 line and release it eventually. At that point, you will have the option to keep using the t1 line, migrate your entire codebase to the t2 line, or most likely, start using the t2 version to write new code, while keep your existing codebase on the t1 line.

Because Turbo CSS expressions must currently include the t1 class and the t2 class in the future, you will be able to individually decide for each Turbo CSS expression which compiler to use. (Basically you will be able to pass around a single compiler object that wraps multiple compilers, and always use the appropriate one. No significant increase in complexity.)

Note that the error messages may change over time.

Timeless Turbo CSS code examples

Another huge benefit of using the t1 class name is that you will always be able to look at a Turbo CSS code snippet and tell which line is required to compile it.