Imply $this in rules

[Matthew]

is it at all possible that $this (or eq_this) could be implied in the CSS if you add styles rules directly in the element query. for example:

@element div {
    width: eval('innerWidth / 2')px;
    height: calc(100ew / 2);
}

can surely be implied to mean

@element div {
  $this {
    width: eval('innerWidth / 2')px;
    height: calc(100ew / 2);
  }
}

or is that not an option because of a CSS/JS issue?

[Tommy Hodgins]

Hey @matthewjumpsoffbuildings, the eval('') function is a little unique in that no matter where in the CSS is appears, it always runs from the context of the scoped element, the same element which $this selects.

Keeping in mind that when EQCSS processes the CSS and outputs it, all of the eval('') statements themselves are replaced with the output from running them, we can write the equivalent of:

@element div {
  $this {
    width: eval('innerWidth / 2')px;
    height: calc(100ew / 2);
  }
}

As something purely in JS, without outputting any CSS like this:

@element div {
  eval('style.width = innerWidth / 2 + "px"')
  eval('style.height = offsetWidth / 2 + "px"')
}

Which would apply it to the div element using JavaScript, instead of as CSS, and you would see the same the result. The downside of applying styles via JS is that you lose the flexibility of the cascading part of CSS.

However, in the example of:

@element div {
  width: eval('innerWidth / 2')px;
  height: calc(100ew / 2);
}

If your browser width was 500px wide at the time and the div was as well, then EQCSS will be outputting the following CSS to the page:

width: 250px;
height: calc(500px / 2);

And just those two lines of CSS like that, without any selector or without being part of any rule would have no way to find and to apply to any element on the page. The browser will just discard these rules. When you use $this EQCSS is outputting a CSS selector unique to the elements it has observed on the page.

For more on the technical side of how the EQCSS plugin parses and applies styles check out:

• Writing Element Queries Today Using EQCSS
• EQCSS 1.0.0 ~ Technical documentation

[Matthew]

Ah ok thanks, that makes sense