Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Manage style sheets in native render engines #14

Open
Hanks10100 opened this issue Dec 18, 2017 · 1 comment

Comments

@Hanks10100
Copy link
Owner

commented Dec 18, 2017

<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

This comment has been minimized.

Copy link
Owner Author

commented Dec 29, 2017

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]
}])
  1. 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']
  }
}
  1. 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.

  1. 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.

  1. Rules in the behind style sheet will overwrite rules in previous style sheets.
Hanks10100 added a commit to Hanks10100/vue that referenced this issue Jan 4, 2018
feat(weex): support sending stylesheets and class names to native
Hanks10100/weex-native-directive#14

No longer manage stylesheets and class names in vue and weex-js-runtime.
Hanks10100 added a commit to Hanks10100/vue that referenced this issue Jan 4, 2018
feat(weex): support sending stylesheets and class names to native
Hanks10100/weex-native-directive#14

No longer manage stylesheets and class names in vue and weex-js-runtime.
Hanks10100 added a commit to Hanks10100/vue that referenced this issue Jan 25, 2018
feat(weex): support sending style sheets and class list to native
No longer manage style sheets and class list in vue and weex-js-runtime.

Refer to Hanks10100/weex-native-directive#14

@Hanks10100 Hanks10100 added the WIP label Jan 31, 2018

yyx990803 added a commit to vuejs/vue that referenced this issue Mar 5, 2018
feat(weex): support sending style sheets and class list to native (#…
…7530)

No longer manage style sheets and class list in vue and weex-js-runtime.

Refer to Hanks10100/weex-native-directive#14

@Hanks10100 Hanks10100 changed the title Manage class list in native render engines Manage style sheets in native render engines Apr 26, 2018

Hanks10100 added a commit to Hanks10100/vue that referenced this issue Jul 16, 2018
feat(weex): support sending stylesheets and class names to native
Hanks10100/weex-native-directive#14

No longer manage stylesheets and class names in vue and weex-js-runtime.
f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
feat(weex): support sending style sheets and class list to native (v…
…uejs#7530)

No longer manage style sheets and class list in vue and weex-js-runtime.

Refer to Hanks10100/weex-native-directive#14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.