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.

Sign up for GitHub

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

Skip CSS minification via PHP #29624

Merged
merged 1 commit into from
Mar 8, 2021
Merged

Skip CSS minification via PHP #29624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 2 additions & 29 deletions lib/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,22 +222,10 @@ function gutenberg_maybe_inline_styles() {
// Build an array of styles that have a path defined.
foreach ( $wp_styles->queue as $handle ) {
if ( wp_styles()->get_data( $handle, 'path' ) && file_exists( $wp_styles->registered[ $handle ]->extra['path'] ) ) {
$block_styles = false;
$styles_size = filesize( $wp_styles->registered[ $handle ]->extra['path'] );

// Minify styles and get their minified size if SCRIPT_DEBUG is not enabled.
if ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) {
// Get the styles and minify them by removing comments & whitespace.
$block_styles = gutenberg_get_minified_styles( file_get_contents( $wp_styles->registered[ $handle ]->extra['path'] ) );
// Get the styles size.
$styles_size = strlen( $block_styles );
}

$styles[] = array(
'handle' => $handle,
'path' => $wp_styles->registered[ $handle ]->extra['path'],
'size' => $styles_size,
'css' => $block_styles,
'size' => filesize( $wp_styles->registered[ $handle ]->extra['path'] ),
);
}
}
Expand Down Expand Up @@ -268,7 +256,7 @@ function( $a, $b ) {
}

// Get the styles if we don't already have them.
$style['css'] = $style['css'] ? $style['css'] : file_get_contents( $style['path'] );
$style['css'] = file_get_contents( $style['path'] );

// Set `src` to `false` and add styles inline.
$wp_styles->registered[ $style['handle'] ]->src = false;
Expand All @@ -281,21 +269,6 @@ function( $a, $b ) {
}
add_action( 'wp_head', 'gutenberg_maybe_inline_styles', 1 );

/**
* Minify styles.
*
* Removes inline comments and whitespace.
*
* @param string $styles The styles to be minified.
* @return string
*/
function gutenberg_get_minified_styles( $styles ) {
$re1 = '(?sx)("(?:[^"\\\\]++|\\\\.)*+"|\'(?:[^\'\\\\]++|\\\\.)*+\')|/\\* (?> .*? \\*/ )';
$re2 = '(?six)("(?:[^"\\\\]++|\\\\.)*+"|\'(?:[^\'\\\\]++|\\\\.)*+\')|\\s*+ ; \\s*+ ( } ) \\s*+|\\s*+ ( [*$~^|]?+= | [{};,>~] | !important\\b ) \\s*+|\\s*([+-])\\s*(?=[^}]*{)|( [[(:] ) \\s++|\\s++ ( [])] )|\\s+(:)(?![^\\}]*\\{)|^ \\s++ | \\s++ \\z|(\\s)\\s+';

return preg_replace( array( "%{$re1}%", "%{$re2}%" ), array( '$1', '$1$2$3$4$5$6$7$8' ), $styles );
}

/**
* Complements the implementation of block type `core/social-icon`, whether it
* be provided by core or the plugin, with derived block types for each
Expand Down
51 changes: 0 additions & 51 deletions phpunit/class-gutenberg-utils-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,55 +127,4 @@ public function test_invalid_parameters_set() {
array( 'a' => 2 )
);
}

/**
* Test gutenberg_get_minified_styles().
*/
public function test_gutenberg_get_minified_styles() {
$cases = array(
array(
'in' => '
/**
* Comment
*/
.foo {
bar: 1;
}
',
'out' => '.foo{bar:1}',
),
array(
'in' => '/* Comment */#foo{content:" "; bar: 0;
}',
'out' => '#foo{content:" ";bar:0}',
),
array(
'in' => '.foo { width: calc(50% - .625em) }',
'out' => '.foo{width:calc(50% - .625em)}', // Preserve spaces inside calc().
),
array(
'in' => '@supports (-webkit-overflow-scrolling: touch) { .foo { background-attachment: scroll; } }',
'out' => '@supports (-webkit-overflow-scrolling:touch){.foo{background-attachment:scroll}}',
),
array(
'in' => '@media (prefers-reduced-motion: reduce) { .foo { background: linear-gradient(-135deg, #7adcb4 0%, #00d082 100%); background-attachment: scroll; animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s; } }',
'out' => '@media (prefers-reduced-motion:reduce){.foo{background:linear-gradient(-135deg,#7adcb4 0%,#00d082 100%);background-attachment:scroll;animation:components-animate__appear-animation 0.1s cubic-bezier(0,0,0.2,1) 0s}}',
),
array(
'in' => '@keyframes components-animate__appear-animation { from { transform: translateY(-2em) scaleY(0) scaleX(0); } to { transform: translateY(0%) scaleY(1) scaleX(1); } }',
'out' => '@keyframes components-animate__appear-animation{from{transform:translateY(-2em) scaleY(0) scaleX(0)}to{transform:translateY(0%) scaleY(1) scaleX(1)}}',
),
array(
'in' => '.selector { --foo: calc( var(--bar, calc(1em - 10px ) ); }',
'out' => '.selector{--foo:calc(var(--bar,calc(1em - 10px))}',
),
);

foreach ( $cases as $case ) {
$this->assertSame(
gutenberg_get_minified_styles( $case['in'] ),
$case['out']
);
}
}
}