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

media query followed by a non-media query causes incorrect parsing #12

Open
saurabhnanda opened this issue Oct 10, 2017 · 1 comment
Open

Comments

@saurabhnanda
Copy link

Test case:

.wrapper {
  width: 100%; }

@media only screen {
  html {
    min-height: 100%;
    background: #f3f3f3; } }

table.body {
  background: #f3f3f3;
  height: 100%;
  width: 100%; }

Incorrect parse result:

[LeafBlock (".wrapper",[("width","100%")])]
@davezuch
Copy link

I'm seeing the same thing. I have a large CSS file with about 25k lines of valid, generated CSS. The first few declarations look like:

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 576px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 992px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

.list-reset {
  list-style: none;
  padding: 0;
}

.appearance-none {
  appearance: none;
}

...

If I run parseNestedBlocks on my entire file, I get the following output:

Right
  [ LeafBlock (".container", [("width", "100%")])
  , NestedBlock
    "@media (min-width: 576px)"
    [ LeafBlock (".container", [("max-width", "576px")]) ]
  ...
  , NestedBlock
    "@media (min-width: 1200px)"
    [ LeafBlock (".container", [("max-width", "1200px")])
    , LeafBlock ("}\n\n.list-reset", [("list-style", "none"), ("padding", "0")])
    , LeafBlock (".appearance-none", [("appearance", "none")])
  ...
  ]

As you can see in the second to last LeafBlock, it's failing to parse the closing @media query and instead counting "}\n\n.list-reset" as a valid selector.

Interesting enough, if I trim my CSS file down to just the above and parse that, I get:

Right
  [ LeafBlock (".container", [("width", "100%")])
  , NestedBlock
    "@media (min-width: 576px)"
    [ LeafBlock (".container", [("max-width", "576px")]) ]
  , NestedBlock
    "@media (min-width: 768px)"
    [ LeafBlock (".container", [("max-width", "768px")])
  , NestedBlock
    "@media (min-width: 992px)"
    [ LeafBlock (".container", [("max-width", "992px")])
  ]

It just leaves out everything after the third @media query.

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

No branches or pull requests

2 participants