Latest News

2016-03-25: v1.1 — Conditional expressions. PowerCSS now supports arbitrary-depth conditional CSS and media queries. See the Conditional Expressions section of updated documentation. We added 22 regression tests to ensure quality and reliability.

The API is backwards compatible with 1.0 which we feel is a major accomplishment given the requirements of conditional expressions. The only exception is that the irregular symbol names containing "bottom" have been made consistent. For example, _border_btm_ has been renamed to _border_bottom_ as the former was needlessly different from the CSS symbol.

What

PowerCSS is a JavaScript library that create run-time CSS optimized for performance. Watch this presentation for an an overview of CSS double-buffering. PowerCSS is all-new code with many additional capabilities and optimizations.

The project is hosted on GitHub and is available as an npm package. It can be installed using npm install powercss. After installation, if you'd like to run the regression tests, enter the following into a Bash shell:

cd node_modules/powercss
npm install
npm test

How

This page is styled using PowerCSS. I know, dog-food much? Anyway, click at the top right to change the palette or cascade at any time. It looks good on a phone as well as a desktop. There are 5 examples discussed in the documentation. These include:

Why

Traditional CSS is created well before it is used, not when the application needs it. While preprocessors such as {less}, Stylus, or Sass can help reduce some of the tedium of creating styling variations, they complicate the tool chain and can hinder design iterations.

PowerCSS is designed and optimized for run-time creation and application of CSS. It can be responsive to the user's environment to a level not possible with preprocessors. Even better, there is no additional compile step to hinder design iteration. Styling can be infinitely adjust based on almost any real-time data available to an application such as ambient temperature, device orientation, ambient light, GPS location, heart rate, or time of day. Static CSS can't compete with this flexibility.

PowerCSS has not only achieved its primary goal, but it is often better than static CSS in many other respects as well. It provides a simple and familiar API where experienced CSS authors can use their existing skills to be up and running in minutes. When compressed, a PowerCSS solution can download and render faster, and it can speed up some CSS operations by 10x or more. What's not to like?

Older News

2016-03-25: v1.0 — First production release. We have a strong set of regression tests and has been used in a number of production and production-intent projects with good results. Expect per-cascade double-buffered stylesheets in the 1.2.x release.

2016-03-20: v0.7.1 — Rewrote the rule-map resolver. It now processes arbitrarily complex data structures. This allows mixin maps with any nesting of alternate-lists, concatenations, and symbol-lookups. The isolated code is found in test/resolve.js.

2016-03-09: v0.6.6 — Fixed bugs found from testing. Also added process events: _pcss_merged_, _pcss_prepared_, and _pcss_used_. The event object provides the ID of the cascade affected.

2016-03-07: v0.6.2 — Added automated regression tests. Production deployments underway.

2016-03-04: v0.5.20 — Added key benefits section .

2016-02-24: v0.5.16 — Completed 1.x API design. Also added double-buffering and theming demo to the home page.

2016-02-24: v0.5.0 — First beta announcment. PowerCss was nearly feature complete on this date and considered Beta. The API was overhauled, cutting the number of methods in half while adding many capabilities. Documentation and examples were expanded and updated. The cookbook section was added.

End