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

Bubble @screen at-rules when adding styles through plugins #941

Merged
merged 1 commit into from May 27, 2019
Merged

Bubble @screen at-rules when adding styles through plugins #941

merged 1 commit into from May 27, 2019

Conversation

benface
Copy link
Contributor

@benface benface commented May 27, 2019

I noticed that the following code in a plugin:

addComponents({
  '.test': {
    display: 'block',
    '@screen sm': {
      display: 'none',
    },
  },
});

generates the following CSS:

.test {
  display: block;
  @media (min-width: 640px) {
    display: none;
  }
}

which isn't valid. It should be:

.test {
  display: block;
}

@media (min-width: 640px) {
  .test {
    display: none;
  }
}

This change fixes that, thanks to postcss-nested's bubble option. By default, postcss-nested bubbles @media at-rules, so I think it should do it for @screen as well.

@adamwathan adamwathan merged commit 6ce2cfe into tailwindlabs:master May 27, 2019
@adamwathan
Copy link
Member

Thanks!

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

Successfully merging this pull request may close these issues.

None yet

2 participants