Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edge case: rules not applied in the right order #69

Open
ZeeCoder opened this issue Jan 4, 2018 · 1 comment
Open

Edge case: rules not applied in the right order #69

ZeeCoder opened this issue Jan 4, 2018 · 1 comment
Labels

Comments

@ZeeCoder
Copy link
Owner

ZeeCoder commented Jan 4, 2018

Consider the following CSS:

.Block {
  background: black;

  @condition (width >= 100px) {
    background: green;
  }

  &--blue {
    @condition (width >= 100px) {
      background: blue;
    }
  }
}

Assuming there's a .Block and .Block .Block--blue element, both buttons will switch to green if wider than 100px.
This is because as the algorithm resolves the styles, it get's to the following query in the JSON:

{
    "selector": ".Block",
    "queries": [{
        "conditions": [
            [
                ["width", ">=", 100]
            ]
        ],
        "elements": [{
            "selector": ".Block",
            "styles": {
                "background": "green"
            }
        }]
    }{
        "conditions": [
            [
                ["width", ">=", 100]
            ]
        ],
        "elements": [{
            "selector": ".Block--blue",
            "styles": {
                "background": "blue"
            }
        }]
    }]
}

Since the algorithm resolves from back-to-front, it'll first apply .Block--blue's, then .Block's styles.

That's how the green background gets applied last.

@ZeeCoder ZeeCoder assigned ZeeCoder and unassigned ZeeCoder Jan 4, 2018
@ZeeCoder ZeeCoder added the bug label Jan 4, 2018
@ZeeCoder
Copy link
Owner Author

ZeeCoder commented Jan 4, 2018

It would also be beneficial if such conditions got grouped, instead of let separated like in the example.
(Won't solve this issue, but at least saves some bytes.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant