Thread Starter
rysan
(@rysan)
I would like to have the ability to enqueue that CSS rather than keep it as embedded CSS.
Thread Starter
rysan
(@rysan)
I just found this article where, down the page, in comments, there are explanations about the reason for embedding CSS in the header,
https://poststatus.com/styles-plugin-css-customization/
Initially I was after another idea, and, that is, getting values from Customize page and converting them into SCSS. SCSS allows to play with variables for colors, background-colors, fonts etc., and that would be handy to get values from Customize page and convert them into SCSS variables. One of the possible formats for exporting values from Customizer would be JSON. If I got JSON format like this,
{
“selector-name”: {
“text”:”Helvetica, sans-serif”,
“color”: “#ccc”
},
“selector-name-2”: {
“text”:”Helvetica, sans-serif”,
“color”: “#000”
}
}
I could convert JSON to SASS with this, https://github.com/vigetlabs/sass-json-vars
and then paste converted SASS variables to WordPress using this plugin,
https://wordpress.org/plugins/wp-scss/
JSON to SASS conversion would be performed on my local machine, and that is a drawback. However, I would do this procedure only once in while, and it would be intended for production sites.
Hi rysan,
You can view the CSS that is being output with your browser developer tools. By right clicking and selecting “Inspect Element” in Chrome, you can open up your sites code. Then, look at the very end of <head> to find the CSS that is compressed and output by Styles.
You can copy this into a CSS file of your choosing, then deactivate Styles safely.
As for SCSS — Styles was originally written on a SCSS processor I was a contributor to. For various technical reasons and simplicity, the full processor was replaced with an object model for variable representation. This allows for more flexibility than most SCSS processors, which are built for a very specific purpose.
Right now, I think I’m storing data as either a PHP object model or a multidimensional array. (Can’t remember — I’ve done both and SCSS in different versions.) Ideally, it would output to JSON to allow for easy interchange between users.
I would love to work on this feature, but have lacked resources.
Developers: If you are interested in collaborating with me on this feature, please get in touch. I’m pdclark on Twitter and WordPress Slack.
Oh, one more note:
I know it seems counter-intuitive, but if you export to an independent CSS file, you’ll be making your site slightly slower than with the plugin.
I optimized with great care — Styles only loads CSS on the front end, and it does so without any additional database queries or HTTP requests. It’s also minified for optimal transfer.
In practical terms, the way most plugins output CSS takes 600ms (0.6 seconds) to process and download. Styles should output in less than 10ms (0.01 seconds). All overhead considered, it loads as fast or faster than the CSS would from a static file.
If you still want to export to CSS, append to a CSS file that is already being loaded, like your theme’s styles.css. That way, you won’t add any extra HTTP requests, keeping your site’s design loading quickly.
