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.

Sign up for GitHub

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

Jump to bottom

Using @support inside @media discards a closing curly brace #370

Closed
matt-hernandez opened this issue Dec 19, 2017 · 9 comments
Closed

Using @support inside @media discards a closing curly brace #370

matt-hernandez opened this issue Dec 19, 2017 · 9 comments
Labels
bug

Comments

@matt-hernandez
Copy link

I have this chunk of code in one of my components

<style jsx global>{`
  @media (max-width: 64em) {
    .halves-3uXAK.clearBottom-1bMlY ul {
      margin-bottom: -4.34783%;
    }
    @supports (-moz-appearance: none) and (display: contents) {
      .halves-3uXAK.clearBottom-1bMlY ul {
        margin-bottom: -2rem;
      }
    }
  }
`}</style>

The resulting CSS in the <head> comes out like this:

@media (max-width:64em) {
  .halves-3uXAK.clearBottom-1bMlY ul {
    margin-bottom: -4.34783%;
  }
  @supports (-moz-appearance:none) and (display:contents) {
    .halves-3uXAK.clearBottom-1bMlY ul {
      margin-bottom: -2rem;
    }
  }

/* ^^^ There is a missing closing curly brace above */
@matt-hernandez
Copy link
Author

I noticed something. This bug only occurs when @supports is the last block in @media. If another css rule comes after it, the transpilation occurs without error.

Example:

<style jsx global>{`
  @media (max-width: 64em) {
    .halves-3uXAK.clearBottom-1bMlY ul {
      margin-bottom: -4.34783%;
    }
    @supports (-moz-appearance: none) and (display: contents) {
      .halves-3uXAK.clearBottom-1bMlY ul {
        margin-bottom: -2rem;
      }
    }
    .oneMoreRule {
      width: 0;
    }
  }
`}</style>

Turns into this

@media (max-width:64em) {
  .halves-3uXAK.clearBottom-1bMlY ul {
    margin-bottom: -4.34783%;
  }
  @supports (-moz-appearance:none) and (display:contents) {
    .halves-3uXAK.clearBottom-1bMlY ul {
      margin-bottom: -2rem;
    }
  }
  .oneMoreRule {
    width: 0;
  }
}

/* Everything looks good! */

@giuseppeg
Copy link
Collaborator

@thysultan can this be a bug in Stylis?

@giuseppeg giuseppeg added the bug label Dec 21, 2017
@thysultan
Copy link
Contributor

@giuseppeg I get the following(minus whitespace) with stylis(inc the different configs)

@media (max-width:64em){
	.halves-3uXAK.clearBottom-1bMlY ul{
		margin-bottom:-4.34783%
	}
	@supports (-moz-appearance:none) and (display:contents){
		.halves-3uXAK.clearBottom-1bMlY ul{
			margin-bottom:-2rem
		}
	}
}

So it doesn't look it is from stylis.

@giuseppeg
Copy link
Collaborator

@thysultan thanks for checking!
@matt-hernandez do you get this bug in development or production?

@matt-hernandez
Copy link
Author

@giuseppeg Getting this in both production and development.

@giuseppeg
Copy link
Collaborator

@matt-hernandez can you put together a sample repo (maybe a Next.js app) to reproduce? Or even better submit a pull request with a failing test?

@giuseppeg
Copy link
Collaborator

@thysultan I can reproduce the bug. It happens when using stylis-rule-sheet

@thysultan
Copy link
Contributor

@giuseppeg Can you open a issue at stylis with the repro.

@giuseppeg giuseppeg mentioned this issue Feb 9, 2018
Closed
@giuseppeg
Copy link
Collaborator

@thysultan thysultan/stylis#93

@giuseppeg giuseppeg mentioned this issue Feb 16, 2018
Merged
@thysultan thysultan mentioned this issue Feb 18, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@giuseppeg @thysultan @matt-hernandez and others