Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jan Brinker 77 posts 103 karma points
    Jul 12, 2013 @ 12:40
    Jan Brinker
    0

    Optimus 1.0 Package improvement suggestions

    Ahoy,

    now first of all, thanks for creating that package!

    Still, I encountered two things that would be awesome to have a fix to.

    Firstly, when building a bundle and selecting with (eg) styles I want to have inside of it, the styles break: http://outcome.is/umbracobugs/fixstyles.png
    Secondly, if would be cool if there was maybe a second button in the template editor to insert a bundle that has already been made.

    The rest is awesome for me :)

    Thanks again!

  • Jan Brinker 77 posts 103 karma points
    Jul 12, 2013 @ 12:54
    Jan Brinker
    0

    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)

  • Tim Geyssens 6419 posts 15052 karma points MVP 2x c-trib
    Jul 12, 2013 @ 13:54
    Tim Geyssens
    0

    Hi Jan,

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

  • Tim Geyssens 6419 posts 15052 karma points MVP 2x c-trib
    Jul 12, 2013 @ 14:04
    Tim Geyssens
    0

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

  • Jan Brinker 77 posts 103 karma points
    Jul 13, 2013 @ 18:06
    Jan Brinker
    0

    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% {
      ...
  • Jan Brinker 77 posts 103 karma points
    Jul 13, 2013 @ 18:28
    Jan Brinker
    0

    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

  • Jan Brinker 77 posts 103 karma points
    Jul 15, 2013 @ 11:13
    Jan Brinker
    0

    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%.

  • Tim Geyssens 6419 posts 15052 karma points MVP 2x c-trib
    Jul 15, 2013 @ 11:15
    Tim Geyssens
    1

    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

  • Tim Geyssens 6419 posts 15052 karma points MVP 2x c-trib
    Jul 15, 2013 @ 11:16
    Tim Geyssens
    0

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

  • Tim Geyssens 6419 posts 15052 karma points MVP 2x c-trib
    Jul 15, 2013 @ 11:24
    Tim Geyssens
    0

    And woot on the 55% :)

  • Jan Brinker 77 posts 103 karma points
    Jul 15, 2013 @ 11:28
    Jan Brinker
    0

    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.

  • Tim Geyssens 6419 posts 15052 karma points MVP 2x c-trib
    Jul 15, 2013 @ 11:43
    Tim Geyssens
    0

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

  • Janae Cram 52 posts 379 karma points MVP 3x c-trib
    Jul 30, 2013 @ 23:27
    Janae Cram
    0

    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! :)

  • Tim Geyssens 6419 posts 15052 karma points MVP 2x c-trib
    Jul 31, 2013 @ 13:51
    Tim Geyssens
    0

    Ok thanks for the suggested Janea :)

  • Jan Brinker 77 posts 103 karma points
    Aug 01, 2013 @ 10:32
    Jan Brinker
    0

    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)

  • Tim Geyssens 6419 posts 15052 karma points MVP 2x c-trib
    Aug 01, 2013 @ 10:33
    Tim Geyssens
    0

    @Jan yeah good suggestion :)

  • Tim Geyssens 6419 posts 15052 karma points MVP 2x c-trib
    Aug 01, 2013 @ 10:34
    Tim Geyssens
    0

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

    https://github.com/TimGeyssens/BundlingAndMinificationForTheMasses

  • Jeavon Leopold 3000 posts 13163 karma points MVP 6x admin c-trib
    Aug 07, 2013 @ 14:09
    Jeavon Leopold
    0

    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.

  • Jeavon Leopold 3000 posts 13163 karma points MVP 6x admin c-trib
    Aug 07, 2013 @ 14:12
    Jeavon Leopold
    0

    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="" />
    
  • Jan Brinker 77 posts 103 karma points
    Aug 15, 2013 @ 18:02
    Jan Brinker
    1

    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

  • Tim Geyssens 6419 posts 15052 karma points MVP 2x c-trib
    Aug 15, 2013 @ 18:30
    Tim Geyssens
    0

    @Jan yeah async saving would be nice :)

Please Sign in or register to post replies

Write your reply to:

Draft