OK and there is another problem, one that I didn't expect. My HTML output does say "<linkhref="/bundles/styles" rel="stylesheet"/>" but there is nothing at /bundles/styles except a 404 page waiting. Ergo my page is rendered unstyled. :(

(I installed the SASS provider too, the page is running locally on WebMatrix and is Umbraco 6.1.2)

Hi Jan,

Yeah think you are using a prerelease :) just uploading the final one now

Probably the package actions that didn't perform the correct updates, will post you a file with the necessary updates

I got the package to run on my private site, I removed the empty attributes after install and the style-bundle is created and correctly linked. Will have to wait until monday to check if that was causing the error on the other page at work.

However the minification fails on quite a number of keywords in the CSS files. For debugging, here is what I get in the output:

/* Minification failed. Returning unminified contents.
(662,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
(823,1): run-time error CSS1019: Unexpected token, found '@import'
(823,9): run-time error CSS1019: Unexpected token, found 'url(http://fonts.googleapis.com/css?family=Raleway:300)'
(823,64): run-time error CSS1019: Unexpected token, found ';'
(867,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(869,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(894,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(896,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(1422,1): run-time error CSS1019: Unexpected token, found '@import'
(1422,9): run-time error CSS1019: Unexpected token, found 'url('/css/ilightbox/dark-skin/skin.css')'
(1422,49): run-time error CSS1019: Unexpected token, found ';'
(1423,1): run-time error CSS1019: Unexpected token, found '@import'
(1423,9): run-time error CSS1019: Unexpected token, found 'url('/css/ilightbox/light-skin/skin.css')'
(1423,50): run-time error CSS1019: Unexpected token, found ';'
(1424,1): run-time error CSS1019: Unexpected token, found '@import'
(1424,9): run-time error CSS1019: Unexpected token, found 'url('/css/ilightbox/parade-skin/skin.css')'
(1424,51): run-time error CSS1019: Unexpected token, found ';'
(1425,1): run-time error CSS1019: Unexpected token, found '@import'
(1425,9): run-time error CSS1019: Unexpected token, found 'url('/css/ilightbox/metro-black-skin/skin.css')'
(1425,56): run-time error CSS1019: Unexpected token, found ';'
(1426,1): run-time error CSS1019: Unexpected token, found '@import'
(1426,9): run-time error CSS1019: Unexpected token, found 'url('/css/ilightbox/metro-white-skin/skin.css')'
(1426,56): run-time error CSS1019: Unexpected token, found ';'
(1427,1): run-time error CSS1019: Unexpected token, found '@import'
(1427,9): run-time error CSS1019: Unexpected token, found 'url('/css/ilightbox/mac-skin/skin.css')'
(1427,48): run-time error CSS1019: Unexpected token, found ';'
(1428,1): run-time error CSS1019: Unexpected token, found '@import'
(1428,9): run-time error CSS1019: Unexpected token, found 'url('/css/ilightbox/smooth-skin/skin.css')'
(1428,51): run-time error CSS1019: Unexpected token, found ';'
 */

So judging from that, the current minification algorithm doesn't like @import, @keyframes, @-webkit-keyframes and url

From looking through the following CSS, I can also track the other errors down, that have no explanation by themselves:

1. Error at (662,9) is caused by the colon in "clip: rect(0 0 0 0);"
2. Errors at (869,2) and (896,2) are caused by the contents of the @keyframe and @-webkit-keyframe:

   @keyframes jobKey
   {
    0%, 100% {
   ...

Interesting though, that ALL errors disappear, when I break the bundle up into several ones.

As I am using the HTML 5 boilerplate, I tried putting the normalize.css and boilerplate.css (unmodified) into the same bundle. It through the error about the "clip:". As soon as I made one package for normalize.css and one for the boilerplate.css the error went away.

:edit:

And renaming .sass files does not work

I feel bad for reporting yet another bug..

Well it's not completely strictly speaking a bug, the behaviour was kind of expected, but it would be nice if it could be changed.

When creating a dynamic stylesheet (I'm currently only using the SASS one, but I'm pretty sure the same problem will occur with the LESS one): One can't set editor properties. This is only possible in the compiled css file, which is overwritten on each compile. The only way to get the editor properties back in would be navigating to the compiled css file in the back end and just saving it, so the re-insertion of the editor properties is triggered.

It's a minor thing, but can be quite annoying after a while.

But even if I keep on finding bugs, this package is awesome! On my framework testsite google page speed analytics told me that it improved loading speeds by 55%.

Don't feel bad, I'm glad to hear to feedback :)

Yeah the editor properties is something that isn't supported atm but will look into making it possible

And will also look into the minimize thing, maybe making it possible to switch out the minimizer can help solve this one

And woot on the 55% :)

In that case it would be nice to have a feedback from the minimizer when the bundle is created, so one directly knows that something is not completely right and one should take a look at it. I just found this out because I wanted to take a look how the minified styles look.

And to the editor properties.. I was thinking, if navigating to the style editor and saving ends up in re-inserting those entries, how about just letting the compiler trigger a save in post-build events? I have no clue if the internals of Umbraco or the provider model works like that, it just seems like a quick solution for me.

@Jan yup that was also what I was thinking, just trigger the stylesheet save :)

I am loving playing with this package... it's allowing me to explore SASS, which is great fun. For which I have a suggestion!

I would love it if the SASS provider would allow selectable output styles in the settings so that we can select if we want our CSS file to be nested, expanded, compact, or compressed. It would be so awesome to have that extra level of control over the end result.

Thanks for making such an awesome plugin! :)

Ok thanks for the suggested Janea :)

I had another Idea again, too. When you create a dynamic stylesheet, it would be cool if it checks if there is a static one already there with the same name and warns you about it. Otherwise the static one would be overwritten by the compilation result, which COULD be an unwanted accident.. (admittedly I'm talking experience now.. and Firefox didn't have the old css file in the cache anymore xD)

@Jan yeah good suggestion :)

If anyone is up for the challenge the code is available and you can submit pull requests of course :)

https://github.com/TimGeyssens/BundlingAndMinificationForTheMasses

Would like to add two new settings:

<setting key="compileDynamicStyleSheetsToCss" value="True" />
<setting key="compileDynamicJavaScriptToJs" value="True" />

When set to false, Optimus won't create the .css or .js compiled files on save, this is useful when using direct bundling of Sass files rather than compiled Css for example as the compiled files can easily become stale as the scss file was edited in a third party tool.

When adding a provider such as sass to Optimus, the bundle transformer http handler should be added to web.config so that when compilation debug is set to true, the scss requests can be rendered, e.g.

<add name="ScssAssetHandler" path="*.scss" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" resourceType="File" preCondition="" />

New idea: don't let the editor jump up to the first row when saving a dynamic style sheet. So make the behaviour similar to the "normal" CSS editor. It's always a bit annoying if one has to scroll down a lot to a certain position when hitting save.

Jan

@Jan yeah async saving would be nice :)

is working on a reply...