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

Enable Sass comments and run prefixing before minification #2078

Merged
merged 3 commits into from Jun 11, 2018

Conversation

Projects
None yet
2 participants
@knowler
Copy link
Member

commented Jun 9, 2018

I was looking into a fix for #2077 and here’s what I discovered:

  • cssnano was not the issue with the above mentioned issue the desired functionality works perfectly when using normal CSS instead of Sass.
  • Sass removes the source comments by default.
    • So even disabling cssnano completely still resulted with the same issue.
  • Autoprefixer requires /*! autoprefixer: off */ in Sass and Less.

The problem:

  • When processing Sass, comments are removed before the PostCSS plugins are processed.
    • PostCSS plugins (i.e. Autoprefixer, Purgecss) often use comments for processing so we need them to be there when that processing takes place.
    • We still want cssnano’s discardComments set to removeAll: true since we don’t want any comments in the production built code.

This pull request:

  • Enables the source comments in Sass.
    • This is temporary since they will be removed by minification.
  • Moves the autoprefixing task before minification.
    • I do not know the side effects of doing this. I am actively testing for anything undesirable. Everything seems to run fine from my tests. I do know that cssnano doesn’t remove prefixes as of 4.0.0-rc.0, so there should be no issues there.

Examples

Before as described in #2077

Input:

image {
  /* autoprefixer: off */
  clip-path: url(#imagemask);
}

Output:

image{-webkit-clip-path:url(#imagemask);clip-path:url(#imagemask)}

With the important comment and discardComments removed

Input:

image {
  /*! autoprefixer: off */
  clip-path: url(#imagemask);
}

Output:

image{
  /*! autoprefixer: off */clip-path:url(#imagemask)}

This works but we don’t want the comment in there.

With this PR

Input:

image {
  /*! autoprefixer: off */
  clip-path: url(#imagemask);
}

Output:

image{clip-path:url(#imagemask)}

Perfect!

Related

@knowler knowler referenced this pull request Jun 9, 2018

Closed

Postcss's control comments not working on production #2077

5 of 6 tasks complete

@retlehs retlehs merged commit 093b5a6 into roots:master Jun 11, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@retlehs

This comment has been minimized.

Copy link
Member

commented Jun 11, 2018

thank you!

@knowler knowler deleted the knowler:enable-sass-comments branch Jun 13, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.