How to compress CSS in Resources?

Hi,

I turned my CSS files as resources using this method http://stackoverflow.com/questions/11027526/can-i-manage-my-css-as-modx-resources

What is the best way to minify CSS by using this method?


I've tried MinifyX -plugin:

This isn't working.

I also read that Manager is using Google Minify to automatically compress CSS and JS files.(http://rtfm.modx.com/revolution/2.x/administering-your-site/upgrading-modx/upgrading-to-2.2.x#Upgradingto2.2.x-MinifyintheManager)
While using "CSS as a resource" -method, it doesn't seem to work. CSS files still remains uncompressed? [ed. note: wintertribe last edited this post 12 years, 6 months ago.]

You might want to look at this http://www.sepiariver.ca/blog/modx-web/manage-your-css-in-modx-with-csssweet

It uses a chunk for the CSS, and writes it to a minified .css file.

The automatic CSS and JS compression that you linked to in the rtfm is for the manager, not for the front-end.

I've modified this workflow somewhat, using resources in a separate context for my CSS blocks, and a pdoResources (or getResources) snippet in the cssSweet chunk.

My cssChunkTpl is just a very simple

The resources in the "stylesheet" context each contain blocks of CSS, such as for the main menu, the footer, and other discrete sections of CSS. It's also good for having one huge directive in one place, like an element with rounded corners, box shadows and a background gradient.

The cssSweet plugin now parses the chunk, minifies the parsed chunk's content, and writes it to my .css file.

I also suggested an improvement to the minification that cssSweet does https://github.com/sepiariver/cssSweet/issues/2

Thanks for the tip! I've tested it briefly.

I find it a bit inconvenient when you have to clear site cache everytime you want to update css-file? Slows down development process.

I'm trying your method with getResources...no success (yet). What resource type should be used in stylesheet -context resources?

Here's getResource call in cssSweet chunk:

It doesn't matter; the getResources call will gather up all of the resources' content.

The advantage to having something somewhere write to a file is that it's a lot faster for the web server to simply go find and serve a .css file, while if it's a resource it has to not find a file, realize from the .htaccess rules that it needs to load the index.php into the php interpreter, MODX gets run, figures out which resource to get, determines whether or not the resource is cached, returns the final page to the web server, which now (finally!) sends it back to your browser.

Here's exactly what I did:

1. Create a context "stylesheet".
2. Create resources for your CSS directives - make sure they're published, or else configure getResources to fetch unpublished resources.
3. Create the tpl chunk for getResources, with the [[+content]] placeholder in it.
4. Put the getResources snippet in the cssSweet chunk.
5. Check the plugin's properties to turn on the minification.
6. In my template, set the css link tag to the .css file that cssSweet writes to (by default, assets/components/csssweet/css-custom.css).

The SmartOptimizer extra is worth a look, makes it very easy to combine and minify. TBH this should really be done locally as part of your sass workflow.

Okay now i got it working...few basic errors. Good night sleep makes wonders

sottwell: I still find it difficult when you have to clear cache after every change in css resource.
What is your workflow while developing css with this method?

eightday: I'm looking a way to avoid css preprocessors. I don't want to install more stuff between me and css. Maybe the real reason is that i'm too lazy to learn new stuff Modx gives me enough challenges.

My sentiments exactly. Getting all the SCSS/Compass/Grunt and what-have-you installed is a pain, not to mention learning how to use all that stuff.

I don't have a problem with one or two extra mouse clicks after I've done some work on the CSS resources. However, the plugin works on the site-refresh event. I would think you could change that to work on a doc save event instead, checking to make sure it's a doc in your stylesheet context before going into action. Could even use the plugin's properties to set the context. Or use a unique template for these resources, and use the template ID - this doesn't have to be done in a context.

I also make a few context settings to simplify things, like disabling the RTE and having search disabled and published enabled by default. And getResources can be configured to skip "category" resources if you want to use the tree structure to further organize the CSS blocks.

I have a next problem

I'm trying to get TV value on css resource. For some reason Resource's input value (Text TV) doesn't override TV:s Default value? Is it because different context?

I've tested same TV on web-context and it did override Default value?