yesodweb / css-text

CSS parser and renderer.
MIT License
16 stars 8 forks source link

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

Open saurabhnanda opened 6 years ago

saurabhnanda commented 6 years ago

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 commented 6 years ago

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.