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

feat: Minify CSS output #790

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

delucis
Copy link

@delucis delucis commented Apr 30, 2020

This adds cssnano at the end of the PostCSS pipeline to minify CSS output.

cssnano is used without any options and will use its default preset:

with the default preset, we offer safe transforms only (Source)

Closes #782

@brandonweiss
Copy link
Owner

This looks pretty good!

I think maybe the minification should only happen in production (when building) and not in development (when serving)? 🤔 What do you think?

@delucis
Copy link
Author

delucis commented Apr 30, 2020

maybe the minification should only happen in production (when building) and not in development

I thought that too, but the environment flag didn’t seem to be passed to the CSS builder and none of the other tasks seemed to be making that distinction (HTML is minified on serve for example), so just settled for the easy route 😄 .

If you can point me to the best way to disable in development, I’m happy to make the required changes.

@delucis
Copy link
Author

delucis commented Apr 30, 2020

Figured it out and updated the PR! :-)

@delucis
Copy link
Author

delucis commented May 29, 2020

Hi — checking in to see if you think this needs any additional changes?

@brandonweiss
Copy link
Owner

I’m so sorry—I completely blanked on this.

This is great! Just one more thing—and sorry, I should have pointed this out in advance. Because we’re conditionally minifying depending on the environment, we should have a test for that. So a test that when building for production it minifies the output of a CSS file.

The reason you had to update the snapshots is because the environment argument to the build function defaults to production and we weren’t previously setting the environment in the filesystem helper, so all the tests were assuming the environment is production.

export const buildAndSnapshotFilesystem = async (t, setup) => {
await setup()
await build({
source: sourceDirectory,
target: targetDirectory,
})
snapshotFilesystem(t)
}

I think we’ll probably want to tweak the helper. It probably makes sense to explicitly set the environment to “development”, and then the helper can take an optional third argument that’s an object that gets spread into the build function, that way arguments like environment can be overridden in some tests:

await buildAndSnapshotFilesystem(t, async () => {
  // ...
}, { environment: "production" })

That should keep the existing snapshots more readable and make it possible to add a test for the CSS minification. Let me know if that doesn’t make any sense or the code is confusing!

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.

Minify CSS build output
2 participants