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

Scopes CSS variables in Custom Elements #73

Closed
ben-girardet opened this Issue May 31, 2017 · 1 comment

Comments

Projects
None yet
2 participants
@ben-girardet

ben-girardet commented May 31, 2017

I'm submitting a feature request

  • Library Version:
    0.1.19

Please tell us about your environment:

  • Operating System:
    OSX 10.x

  • Node Version:
    6.2.2

  • NPM Version:
    3.9.5
  • JSPM OR Webpack AND Version
    Aurelia CLI 0.29.0
  • Browser:
    all

  • Language:
    ESNext

Current behavior:
Aurelia UX StyleEngine is only available for AureliaUX official components (buttons, ...) and not usable for Custom Element that reside in the Aurelia application

Expected/desired behavior:

I'm trying to use AureliaUX variables in CSS files of Aurelia CustomElement. It works well if each instances have the same value for the variables used in CSS, but I can't make it work with different value for each use of the Custom Elements.

Example of a Custom Element:

// View Model
// box.js
import {inject, bindable} from 'aurelia-framework';
import {AureliaUX} from 'aurelia-ux';

@inject(AureliaUX)
export class Box {
  @bindable color = '#ff0000';

  constructor(ux) {
    this.ux = ux;
  }

  bind() {
    this.setProperty();
  }

  colorChanged() {
    this.setProperty();
  }

  setProperty() {
    this.ux.design.boxColor = this.color;
  }
}
<!-- View -->
<!-- box.html -->
<template styles.box>
  <require from="./box.css#ux"></require>
  <div>
    <slot></slot>
  </div>
</template>
/* CSS UX File */
/* box.css */
styles.box > div {
  background-color: ${$design.boxColor};
}

In my app I then use the Custom Element like this:

<template>
    <require from=".../box">
    <box>This box should be red</box>
    <box color="#00ff00">This box should be green</box>
    <box color="#0000ff">This box should be blue</box>
</template>
  • What is the expected behavior?

The expected result is to have different color for each box. The current result is that each box get the color of the last defined color property, in this case every boxes are blue.

It would be fantastic to be able to use the power of AureliaUX in Aurelia Custom Elements. For exemple:

// in the ViewModel
export class Box {
  @bindable color = '#ff0000';
}
<!-- in CSS file -->
styles.box {
  background-color:${color}; <!-- with data binding to the View Model properties like in HTML templates -->
}
  • What is the motivation / use case for changing the behavior?

The power of using variables and javascript expressions in CSS is fantastic. It's great to even be able to do math expressions such as width: ${boxWidth / 2}px for exemple. I've been able to try this mechanism using properties placed inside $design (exemple: width: ${$design.boxWidth / 2}px) but everything in $design is scoped to the entire application. It would so powerful to be able to do the same but scoped to each instance of the View Models.

@ZHollingshead ZHollingshead self-assigned this May 31, 2017

@ZHollingshead

This comment has been minimized.

Show comment
Hide comment
@ZHollingshead

ZHollingshead May 31, 2017

Member

This should be accomplished by exposing the style engine.

Member

ZHollingshead commented May 31, 2017

This should be accomplished by exposing the style engine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment