Scoped CSS

[monokee]

trafficstars

Comma separated selectors (BUG)

$ref .selector, $ref .another-selector {
  font-size: 12px;
}

incorrectly rewritten to:

component-name .selector, .another-selector {
  font-size: 12px;
}

(The selector after the comma is not scoped)

Media Queries require !important (ENHANCEMENT)

Rules in media queries that are overriding previously declared rules need to be suffixed with !important or the rules are ignored. This is expected and standard CSS behaviour because stylesheets are parsed top to bottom. Media queries do not introduce higher selector specificity so it would be a nice enhancement if Cue could bundle the media queries internally and append them to the bottom of the stylesheet.

Compile time optimisations (ENHANCEMENT)

Consider compile time parsing -> bundling, auto-prefixing and minification. Remove the CSS template strings from cue javascript components entirely and write them into a distributable CSS package which can be autoprefixed and minified, further reducing initial page load times because both reduced bundle size and reduced cycles now spent on parsing the CSS on a per-component level.

[monokee]

As of Beta 4.2:

• comma separated selectors behave as expected
• @media and @supports queries are now written to the end of each components style declaration

Additional Enhancements: Style rules can now escape component scoping by prefixing the selector with :root.

:root body.my-class $self {
  background-color: red;
}

would be re-written to:

body.my-class my-component {
  background-color: red;
}

This allows us to use the native cascade and style components based on css attributes in any ancestor scope.

[monokee]

Enhancements continued in #14