CSS engine needs work

[monokee]

trafficstars

Complex selection is not working as expected. For example:

self:hover refName {
  color: red;
}

is not converted to

my-component:hover [ref="refName"] {
  color: red;
}

and there are likely more bugs and quirks.

[monokee]

by using shorthand selectors for refs we might introduce a lot of overhead for the parser because we need to keep track of all existing refs and internally compare them against other tagNames to prevent name clashes. How should we handle:

<canvas ref="canvas"></canvas>

Does "canvas" in our component css refer to the ref or the tag?

canvas {
  position: absolute;
}

ie should this be rewritten to

my-component canvas {
  position: absolute;
}

or

my-component [ref="canvas"] {
  position: absolute;
}

[monokee]

We should probably just favor the ref attribute. It will just work and we don't have to do any comparisons and keep track of tagNames.

[monokee]

Fixed

[monokee]

@keyframes still behave weirdly in current version and probably need a separate handler in the rewrite engine. Can/should keyframes (Animation-names) be scoped? Investigate ->

[monokee]

Since v1.02-beta CSS Engin supports:

• keyframe(s) animations
• scoped media queries
• scoped support queries

[monokee]

Added more fixes for bugs related to scoped naming conflicts. There are still a number of edge cases that are causing bugs:

• comma separated selectors are not properly scoped
• some properties are never added to the stylesheet. this behaviour seems unpredictable and needs more investigation

[monokee]

The bugs were all related to naive rewrite rules in the css engine. We're now rewriting refs with proper word boundaries to avoid any overlap with words that contain the same sequence of letters.

Everything should be working as expected since v1.08