Manage style sheets in native render engines

[Hanks10100]

<div :class="box.classList"></div>

Will be compiled to:

{
  type: 'div',
  attrs: {
    class: {
      '@binding': 'box.classList'
    }
  }
}

Currently, class names and the stylesheet are managed in front-end frameworks and weex-js-runtime. However, in this case, the result of box.classList couldn't be got in front-end frameworks.

The stylesheet should be managed in native render engines.

[Hanks10100]

To achieve it, the scoped style sheets should be sent to native render engines before render. And the front-end frameworks no longer calculate the css rules referenced in class list.

Implementations

All the following packages should be adjusted:

• weex-vue-loader
• weex-js-runtime
• weex-vue-framework
• Weex native render engines

weex-vue-loader

Generate scopeId for each style sheet, and inject a code snippet to process them at the definition of each component.

if (typeof weex === 'object' && weex && weex.document) {
  // process style sheets here
  try {
    weex.document.registerStyleSheets(scopeId, styleSheets)
  } catch (e) {}
}

Weex JS Runtime

1. Support sending style sheets to native before render.

In practice, the weex.document should implement this API:

weex.document.registerStyleSheets(scopeId: string, styleSheets: Array<StyleSheet>)

It will send a render directive like this:

callNative(instanceId, [{
  module: 'dom',
  method: 'registerStyleSheets',
  args: [scopeId, styleSheets]
}])

2. Support sending classList to native instead of classStyles.

Add a classList attribute on the Weex Element, and no longer calculate the class styles in it.

Weex Vue Framework

1. Add @styleScope attribute on each element which value equals the scopeId.

The scopeId will be generated by weex-vue-loader and passed to Vue component through options.

<div class="btn btn-large"></div>

{
  type: 'div',
  classList: ['btn', 'btn-large'],
  attr: {
    '@styleScope': ['data-v-b3b891b6']
  }
}

2. Set class attribute directly.

In particular, Do not get styles from classList and call el.setStyles(styles) any more, use el.setAttr('class', classList) instead.

Native Render Engines

1. Store and manage scoped style sheets.
2. Correctly calculate styles from sheets according to the @styleScope and classList.

Style Priority

It's not the specificity of CSS selectors.

Even Weex doesn't support complex selectors, the priority of styles should also be considered.

Inline Style > Classes

If an element contains both style and classList, the CSS rules in style will override those calculated from classList.

Precedence (Order) of CSS Attributes

See this example:

<template>
  <div class="foo vee bar"></div>
</template>
<style scoped>
  .foo {
    font-size: 50px;
  }
  .bar {
    font-size: 100px;
    color: green;
  }
  .vee {
    color: blue;
  }
</style>

The calculated style of <div> should be:

div {
  font-size: 100px;
  color: blue;
}

1. The rule behind will overwrite the previous rule.

The font-size in .bar override the font-size in .foo.

2. order in styleSheet > order in classList.

The color in .vee override the color in .bar, even the bar in written after the vee in the class name.

3. Rules in the behind style sheet will overwrite rules in previous style sheets.