Minify styles

[adekbadek]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Adds CSS minification to the created stylesheets.

Also fixes a warning triggered by Sass about rule nesting. Nested rules should be placed after other rules.

How to test the changes in this Pull Request:

1. Run npm run build and observe the <theme-slug>/style.css files are minified
2. Smoke-check the front-end to see if it looks as expected

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[dkoo]

This is working as described, but while testing I noticed a warning in the SASS CLI output:

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

Looking at the migration documentation and the replacement compile function, it seems that Dart SASS now supports compressed/minified output natively. Would it be preferable to migrate to the new API and avoid having to add the cssnano dependency?

[adekbadek]

@dkoo – I've tried upgrading to compile, but ran into errors. I've decided that since it works as it is, it's not worth investing more time into.

[dkoo]

Ok, we can re-cross that bridge when sass introduces a new major version.

[matticbot]

🎉 This PR is included in version 2.1.1-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 2.1.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀