search

tomhodgins / element-queries-spec

A spec for a Container-Style Element Query Syntax
https://tomhodgins.github.io/element-queries-spec/element-queries.html
367 stars 14 forks source link

Moving eval into separate proposal level? #3

Closed b-strauss closed 7 years ago

b-strauss commented 7 years ago

I really like the proposal, it's incredible! But maybe it would be good to move the eval stuff into a separate proposal? I can imagine evaluating js inside css might be a bit controversial.

tomhodgins commented 7 years ago

Hi @b-strauss!

I definitely agree that it's the wildest and scariest of all the ideas in the proposal, but if you were to separate eval("") from scoped styles it would have no reference point through which to evaluate.

When you do:

@element 'div' {
  eval("console.log('offsetWidth')")
}

The JS console see's the div's offsetWidth, it's evaluating the JS from the context of the scoped element. If you remove this from this scoped styles and element query spec, having an independent eval("") spec for CSS doesn't make any sense since it only works inside @element queries.

What could be done is to separate eval("") into a new level of the Element Queries spec, like to divide the features currently described and say "there are Element Queries Level 1 and these are Level 2". It would be a tremendous loss to scoped styles if they were implemented in a way that didn't (ever) share the context of the query between CSS and JavaScript!

While this spec is being drafted up, I've already been experimenting with this feature using a plugin for almost 2 years and there are many demos on Codepen you're able to check out to see how eval("") can be used.

I've also responded to another issue recently, outlining the uses for eval("") with plenty of examples of how it comes in handy :D

b-strauss commented 7 years ago

I think having a new spec level for eval would be the best solution.

tomhodgins commented 7 years ago

Exciting news is happening relating to the spec - I've sent a PR to the ResponsiveImagesCG/container-queries#6 repository with the content from our spec so hopefully the improvements made will be at that location in the future :D