The SXA CLI is a great tool for working with themes in Sitecore instances that use SXA. This tool was introduced in version 9.3 and has simplified and streamlined a lot of the tasks related to theme development!
The Problem
I’m not entirely sure when this issue was introduced. I think I remember some of these symptoms in a 9.3 instance, but can’t verify that. However, when working with an upgraded 10.1 instance (existing themes were recreated during the upgrade, btw) we saw an issue where the CSS in the pre-optimized-min.css file was being doubled up. It didn’t always happen, but it happened enough that we needed to track it down.
After a bunch of troubleshooting, we found that it only happened when using the sxa watch * commands from the CLI. It didn’t happen when using any of the sxa build or sxa rebuild command variants. Ultimately, what’s happening is that the sxa watch commands, in addition to creating all the individual css files from the varioius scss files, it creates a styles.css file that is the concatenation of all the individual css files. Then, when the optimizer runs to create the minized file, it runs against styles/*.css. So, not only does it minify all the individual css files, it also minifies the styles.css file. When comparing the output in Beyone Compare, it’s quite obvious.
It’s also apparent in the file size of pre-optimized-min.css:
The top file is one built with sxa build *, and the bottom was built with sxa watch *. So 98k vs 195k.
TL;DR;
Enough already, what’s the solution?
Again, we saw that ALL css files in the styles/ folder of the theme were being included for minification. So, the obvious question is, “Can we exclude that file??”
Why yes, you can! In the <theme>/gulp/config.js file, look for the css: section and add !styles/styles.css to the minificationPath parameter.
That’s it! Now, when running the sxa watch * commands, the pre-optimized-min.css file is built appropriately!
Hope this helps!
Happy Sitecore trails, my friend!
CitizenSitecore 
Hey Jason,
I believe you may have a misconfiguration of your gulp settings.
The styles.css file is a concatenation of a few Sass files that do not get pulled in via a component directly and otherwise need a representative in the /css folder to be added to the final minfiied pre-optimized-min.css file.
These are some examples of those styles:
sass/styles/common/*.scss
sass/styles/content-alignment/*.scss
sass/styles/layout/*.scss
These files can also be configured in your gulp configuration under the “sass” object.
Here is a screenshot of our configuration: https://i.imgur.com/VDl2c34.png
Your implementation may work as well, but I would double-check that you are not actually missing these generic styles in your output.
LikeLiked by 2 people
Ah, I see what you’re talking about now and now that `sass/styles` config section makes sense! In our custom themes, all of our custom sass files are at a single level and all base/dependent sass files are pulled in by other sass files.
Here is our relevant config section:
“`
styles: {
sassPath: [
‘sass/*.scss’
],
stylePath: ‘styles’,
concatName: ‘styles.css’
},
“`
And now it makes sense why we’re getting the output we’re getting. This is probably worth some clarification in my post.
Thanks for pointing this out!
LikeLiked by 1 person