Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Style canvas renders using CSS
JavaScript CSS
tree: b43ce608f6

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
test
.gitignore
.npmignore
History.md
Makefile
Readme.md
component.json
index.js
npm-debug.log
package.json

Readme.md

Style

Style Canvas renders using CSS.

Installation

$ component install component/style

Example

body {
  font-size: 18px;
}
.progress {
  background: #fff;
}
.progress .percentage {
  color: #ddd;
}
style('.progress', 'background-color');
// => 'rgb(255, 255, 255)'

style('.progress .percentage', 'color');
// => 'rgb(221, 221, 221)'

style('.progress .percent', 'font-size');
// => '18px'

About

This component exists so that you can influence aspects of your Canvas renders using CSS, where style decisions belong. For details view this blog post.

Performance

Generating and computing styles for ~2000 unique selectors in chrome takes ~300ms, so be careful if you plan on using this for many unique selectors. Values are otherwise cached in an object and can easily operate above 300,000 ops/s.

License

MIT

Something went wrong with that request. Please try again.