Convert css nano to conditional include

[michealengland]

Does not have open issue, must be tested locally.

DESCRIPTION

This feature improves performance when using npm run start. By preventing css-nano from running in development, rebuild times are quicker due to less processing needed.

OTHER

• [NA] Is this issue accessible? (Section 508/WCAG 2.0AA)
• Does this issue pass all the linting? (PHPCS, ESLint, SassLint)
• [NA] Does this pass CBT?

STEPS TO VERIFY

1. Before checking out this branch take an inventory of build times when using npm run start on main. Set steps below for details on rebuild.
2. Next, checkout this feature/improve-build-tool-speed and run npm run start.
3. Once the script has built, edit an @apply css statement. Simply commenting out files may give false positives as these changes are incredibly fast regardless.
4. Verify that your build/style-index is unminified when using npm run start.
5. Verify that your build/style-index is minified when using npm run build.

DOCUMENTATION

No additional documentation is required.

[bradp]

This could be simplified to be:

module.exports = {
	plugins: [
		require("tailwindcss"),
		require("autoprefixer"),
		process.env.NODE_ENV === "production" ? cssnano({ preset: "default" }) : null,
	],
};

[michealengland]

This could be simplified to be:

module.exports = {
	plugins: [
		require("tailwindcss"),
		require("autoprefixer"),
		process.env.NODE_ENV === "production" ? cssnano({ preset: "default" }) : null,
	],
};

@bradp I like the simplification, but I also did some research on this and think we maybe should deviate slightly from what you have shown here.

Using process.env.NODE_ENV === "production" ? cssnano({ preset: "default" }) : null results in a null value left behind and using process.env.NODE_ENV && "production" ? cssnano({ preset: "default" }) results in a falsey value left behind. From what I'm seeing neither of these values should be passed into the Webpack plugins, see webpack/webpack#5493 (comment).

As an alternative, maybe we should follow the example seen here and fully remove false values from the plugins webpack/webpack#5493 (comment).

What are your thoughts? On a side note, I did a test and passing null did work as expected but it might be good to error on the side of caution.

[bradp]

I'd say 👍 to running it through the .filter(Boolean)

My main goal is to keep it more readable and in one place, so that works for me.

[coreymcollins]

Nice, this does bring about a nice little boost! On main, npm run start took about 20 seconds and in this branch it's around 15. It also dropped the compile time while running npm run start by about 1-1.5 seconds, fluctuating between the two.

Thanks!