CSS-first development experience

[lolmaus]

I've noticed a difference between the approaches of ember-fill-up and my old ember-element-query.

---

In ember-fill-up you need to define breakpoint values in px on HBS or JS level:

  <FillUp
    @breakpoints={{hash
      small=(fill-up-lte 500)
      large=(fill-up-gt 500)
    }}
  ></FillUp>

    breakpoints: {
      small: lte(400),
      large: gt(400),
    }

You then use semantic names for breakpoint ranges in CSS:

.my-element[fill-up-small] {}
.my-element[fill-up-large] {}

This works, but what I don't like about this approach is that presentational concerns leak into HBS/JS realm where they don't belong.

Note that HBS/JS not only has to know breakpoint px values, but also be aware exactly which breakpoint ranges the CSS is gonna utilize.

---

In ember-element-query you were able to use px breakpoint values directly on CSS level:

.my-element[data-eq-to~=400px] {}
.my-element[data-eq-from~=401px] {}

Or with Sass:

.my-element {
  $bp: 400px;
  @include eq-from($bp) {};
  @include eq-to($bp) {};
}

The benefits are that you don't need to come up with semantic names for breakpoints, keep them in sync between CSS and HBS/JS; and the styling concerns do not leak into HBS/JS.

The addon would parse resulting CSS for data-eq-* selectors at build time and expose them to the app as an importable JS module as a map of HTML classes to breakpoints. Element query components would then look up their breakpoints in the mapping and apply them automatically.

The approach I used to make that possible is quite questionable. It makes builds a bit slower and requires the mapping to be read with a separate HTTP request (because I failed to find a way to include it into the build -- when compiled CSS becomes available for parsing, JS is also compiled already).

Thus, I do not want to see it in any of my current projects. It felt quite appropriate in Ember Classic era, but it violates Octane and Embroider spirit.

But I find the goal to be quite noble and I wonder if there are Octane/Embroider-friendly ways of achieving it.

@chadian Please tell if you recognize the problem and if yes, share your thoughts.

[lolmaus]

ember-css-modules is doing something very similar.