Compiled block styles contain a lot of trash

[aristath]

Description

All block styles contain ~75 lines of comments which are not needed. For example you can take a look at https://github.com/WordPress/WordPress/blob/master/wp-includes/blocks/buttons/style.css
These comments get added to all non-minified stylesheets and they don't make any sense.

We should remove comments when these styles are getting compiled.
These files should not be minified, but all comments should still be getting removed.
I think we'll be able to do that by changing this function a bit...

gutenberg/tools/webpack/shared.js

Lines 73 to 94 in eb6b3ff

	const stylesTransform = ( content ) => {
	if ( mode === 'production' ) {
	return postcss( [
	require( 'cssnano' )( {
	preset: [
	'default',
	{
	discardComments: {
	removeAll: true,
	},
	},
	],
	} ),
	] )
	.process( content, {
	from: 'src/app.css',
	to: 'dest/app.css',
	} )
	.then( ( result ) => result.css );
	}
	return content;
	};

The result would be smaller styles in the WordPress package, and easier to read/debug source code in pages

[aristath]

From my testing this seems to work:

const stylesTransform = ( content ) => {
	return postcss( [
		require( 'cssnano' )( {
			preset: [
				'default',
				{
					discardComments: {
						removeAll: true,
					},
					normalizeWhitespace: mode === 'production',
				},
			],
		} ),
	] )
		.process( content, {
			from: 'src/app.css',
			to: 'dest/app.css',
		} )
		.then( ( result ) => result.css );
};

What do you think @gziolo ?

[Mamaduka]

This is odd. In plugin I see the stylesheets correctly compiled in the build/block-library directory.

Maybe this is an issue with core side transformations.

[aristath]

This is odd. In plugin I see the stylesheets correctly compiled in the build/block-library directory.

Maybe this is an issue with core side transformations.

When running npm run build they get minified, yes. But when running npm run dev, they have the extra comments - and all those somehow get ported to Core 🤷

[gziolo]

Does it mean that we run CSS processing for usage with WordPress packages in development mode?

I don't know that part of the workflow that well so whatever you figure out to fix the issue in core is fine.

[Mamaduka]

I think we should set discardComments config here - https://github.com/WordPress/wordpress-develop/blob/trunk/tools/webpack/shared.js#L62-L64

[gziolo]

For some styles, we should keep the comments with licenses when code was copied from other projects. Example:

gutenberg/packages/components/src/date-time/date/datepicker.scss

Lines 1 to 28 in c416bf8

	/**
	* Parts of this source were derived and modified from react-dates,
	* released under the MIT license.
	*
	* https://github.com/airbnb/react-dates
	*
	* The MIT License (MIT)
	*
	* Copyright (c) 2016 Airbnb
	*
	* Permission is hereby granted, free of charge, to any person obtaining a copy
	* of this software and associated documentation files (the "Software"), to deal
	* in the Software without restriction, including without limitation the rights
	* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	* copies of the Software, and to permit persons to whom the Software is
	* furnished to do so, subject to the following conditions:
	*
	* The above copyright notice and this permission notice shall be included in all
	* copies or substantial portions of the Software.
	*
	* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
	* SOFTWARE.
	*/

[Mamaduka]

We can use ! marker for those comments - https://cssnano.co/docs/optimisations/discardcomments/.

[aristath]

Thank you both for the feedback!
I opened https://core.trac.wordpress.org/ticket/56388 and added a patch there 👍

[Mamaduka]

I'm going to close this in favor of the core ticket.

[aristath]

Reopening this one. The Gutenberg PR on #43177 needs to be merged in order for the tests to stop failing in the Core PR 😅