Type: Bug

Description

I'm trying to integrate with a third-party library (Tether), which adds dynamic classes to a container component. These classes can be added and removed at any time, based on its position adapting to window size.

I'd like to style a component (entirely within the Tether container) based on the container's current classes. This doesn't seem to be possible with Fela.

The docs say:

While we only support the above selectors for a reason, we also understand that there might be some edge cases (mostly with third-party libraries) where you want to use other selectors as well. Therefore we provide the &-prefix for nested selectors.

From what I can tell, & only works when it's at the start of the selector (hence calling it "&-prefix"). But I need to use it after the Tether class, like .tether-element-attached-top &. This works in tools such as Sass and Styled Components.

This is not just a problem when using Tether, but affects integration with any library that adds CSS classes to the body element as part of its API (e.g. font preloading scripts which add a fonts-loaded class to body for conditional styling).

As a simplified example, I have a component with these basic styles:

{
  background: 'red',
  '.tether-element-attached-top &': {
    background: 'green',
  },
  '.tether-element-attached-bottom &': {
    background: 'blue',
  },
}

On its own the component should have a red background. If used within a Tether element, it should be either blue or green, depending on Tether's positioning calculations. When used within Tether, the markup is effectively this:

<div class="tether-enabled tether-element-attached-right tether-target-attached-right tether-element-attached-bottom tether-target-attached-top">
  <div class="a">This is my component element</div>
</div>

However when I do this, the element is always red, and Fela adds the following warning in the console:
The object key ".tether-element-attached-top &" is not a valid nested key in Fela.