Conditionals and window resizing break

[Frexuz]

Very simple example:

.box {
  height: == 500;
  @if ::window[width] < 800 {
    width: <= 100;
  }
  @else {
    width: <= 200;    
  }
}

The "media query" stops to work after resizing the window over the breakpoint a few times.

http://codepen.io/frexuz/pen/raOEjq?editors=100

[paulyoung]

@Frexuz I expect you will get better results with the latest release candidate.

Could you try that and see how it performs?

[Frexuz]

Hi. Sorry for the late response. I can't get it to work at all. The box isn't rendered (same example, with new .js files, on my local dev machine)

The gss.js says:

/* gss-engine - version 1.0.4-beta (2014-10-08) - http://gridstylesheets.org */

Is it just forgotten, or is it actually wrong?

[Inviz]

Hey Frexuz!

We still didnt merge rc to master yet, but we're on track to do it very soon. Here's your updated code with rc http://codepen.io/anon/pen/zxqxKg

2 issues to look for:

1) GSS config is deprecated, the best way is to start gss yourself via "new GSS(document)". You can assign that to the variable of your choice to inspect the state of the engine. It'll listen for domready and reflow if you use webfonts or images. 2) RC had a known bug when window dimensions didnt update properly when used only in condition. I added one rule that binds window width to the body width and that makes it work. Sorry for that, the bug is already fixed in the newer versions we're releasing soon.

Good luck!

[paulyoung]

The version number in the comment is driven by the version attribute in package.json, so it could be that just wasn't updated before running grunt build.

[paulyoung]

Just confirming that we did merge to master recently.

[Frexuz]

@Inviz thanks for the updated pen and the clarifications :)

[paulyoung]

I think to prevent any confusion in the next release we should:

1. Update the version number in package.json
2. Run grunt build
3. Tag the release

[NSBrianWard]

I notice that media queries and if conditionals that are supposed to match up don't necessarily fire at the same time if scrollbars are displayed onscreen. (http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/) Is this a known issue and can I just use straight up media queries in my GSS to get around it?

[Inviz]

Well, it's a "feature" so things that want to be full width wouldnt cause horizontal scrollbar when vertical is there. It usually works good as a default, but not in this case.

I tried to so separate window width from document width, but it turned out be tiresome, as there's kind of cyclic dependency in the logic.

We're rewriting our parser now, so we'll probably have media query support in gss, but it's not there yet.