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.

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

Generating pixel fallbacks for rem units works fine when not loading the minified css version #1

Open
nielsverwaal opened this issue Sep 11, 2018 · 1 comment

Comments

@nielsverwaal
Copy link

nielsverwaal commented Sep 11, 2018

Generating pixel fallbacks for rem units works fine when I don’t load the minified css version, but when I add:
add_filter( ‘stylesheet_uri’, ‘genesis_sample_stylesheet_uri’, 10, 2 );
/**

Loads minified version of style.css.

@param string $stylesheet_uri Original stylesheet URI.
@param string $stylesheet_dir_uri Stylesheet directory.
@return string (Maybe modified) stylesheet URI.
*/
function genesis_sample_stylesheet_uri( $stylesheet_uri, $stylesheet_dir_uri ) {

return trailingslashit( $stylesheet_dir_uri ) . ‘style.min.css’;

}
It does it all but generating pixel fallbacks for rem units, at least. I don’t know if it also merges the media queries or what else. I only kow that when I leave the filter out, it will load the non-minified version and does all the things it says it does in your repo description. What could be going wrong there?

My guess is that all doubles get merged by clean-css. Found a thread that looks alike: clean-css/clean-css#233

Logics:
The clean-css command in gulp.js is merging similar rules into one when minified. So, when using the minified css the pxtorem will be lost.
I found out changing it to:
// Combine similar rules.
.pipe(
cleancss({

			level: {
1: {
  all: false, // set all values to `false`
  tidySelectors: true // turns on optimizing selectors
}

}
})
)
// This will prevent it from merging, leaving the pxtorem intact amoung other rules. Thus making the minified css somewhat bigger in filesize, but at least leaving the pixel fallbacks for non-modern browsers intact.

@nielsverwaal
Copy link
Author

Better yet:

Turn it into this from line 119 in gulp.js:

	// Combine similar rules.
	.pipe(
		cleancss({
          
			level: {
2: {
  mergeAdjacentRules: true, // controls adjacent rules merging; defaults to true
  mergeIntoShorthands: true, // controls merging properties into shorthands; defaults to true
  mergeMedia: true, // controls `@media` merging; defaults to true
  mergeNonAdjacentRules: true, // controls non-adjacent rule merging; defaults to true
  mergeSemantically: false, // controls semantic merging; defaults to false
  overrideProperties: true, // controls property overriding based on understandability; defaults to true
  removeEmpty: true, // controls removing empty rules and nested blocks; defaults to `true`
  reduceNonAdjacentRules: true, // controls non-adjacent rule reducing; defaults to true
  removeDuplicateFontRules: true, // controls duplicate `@font-face` removing; defaults to true
  removeDuplicateMediaBlocks: true, // controls duplicate `@media` removing; defaults to true
  removeDuplicateRules: true, // controls duplicate rules removing; defaults to true
  removeUnusedAtRules: false, // controls unused at rule removing; defaults to false (available since 4.1.0)
  restructureRules: false, // controls rule restructuring; defaults to false
  skipProperties: ['font-size'] // controls which properties won't be optimized, defaults to `[]` which means all will be optimized (since 4.1.0)
}

}
})
)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant