Preprocessor enhancements

[jacojoubert]

Animations

When we create keyframes we currently do

.some-rule {
  animation: ui-input--default--error-highlight 0.2s 1;
}

@at-root {
    /* Focus Glow */
    @keyframes ui-input--default--focus-highlight {
      ...
    }
}

This hard codes the animation name and property value. This doesn't allow us to customize the value of an animation when creating scss only kinds. We need a way to write the component name into keyframe names and animation properties.

Contextual components

When creating a theme the child components don't get prepended with the theme name. For example, in the tomato theme creating a new ui-tooltip--default.scss file and registering it still outputs the following html:

<div class="tomato--ui-tooltip--default ui-font-size--medium ">
  <span class="ui-tooltip--default-target">
    <div class="form-name--tooltip--target">?</div>
  </span>
</div>

I would expect ui-tooltip--default-target to instead be tomato--ui-tooltip--default-target.

Ember helper classes

We currently use Ember helpers like input and textarea and assign them classes:

{{input class=(concat "ui-input--default--input "
                      (ui-state states 'disabled' 'error' el='ui-input--default--input'))}}

This hard-codes the component name into the template and does not get rewritten. This prevents us from styling the component when creating scss only kinds.

[HeroicEric]

@jacojoubert would making the helper el dynamic get around the "helper classes" for now? You could rewrite that to look like:

(ui-state states 'disabled' 'error' el=(concat uiPrefix '--input')))}}

The uiPrefix should be whatever the name of the component is.

[HeroicEric]

It also seems that @at-root isn't needed with SASS 3.4+. @keyframes is automatically put at the root.

[HeroicEric]

@jacojoubert I'm not sure if it is valid to use a period in front of the identifier for the @keyframes but it seems to at least work in Chrome. Not sure where to find if it is valid or not but:

.some-rule {
  animation: #{&}--focus-highlight 0.2s 1;
}

@at-root {
    /* Focus Glow */
    @keyframes #{&}--focus-highlight {
      ...
    }
}

[HeroicEric]

Nevermind. The identifier with a period doesn't work in Firefox

[jacojoubert]

Added the contextual component problem to the issue.