Copied to clipboard

Flag this post as spam?

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


  • Per Bolmstedt 82 posts 377 karma points
    Mar 08, 2022 @ 10:13
    Per Bolmstedt
    0

    Backoffice/admin CSS Smidge/NUglify error, breaking package styling

    When Umbraco admin/backoffice loads, it loads this CSS:

    /sb/umbraco-backoffice-css.css.v637823303400000000

    However, this URL returns a 500 because of the following error:

    System.InvalidOperationException: Expected expression, found '',Expected expression, found '' at Smidge.Nuglify.NuglifyCss.ProcessAsync(...) ... at Smidge.FileProcessors.CssImportProcessor.ProcessAsync

    In the development environment Smidge/NUglify doesn't seem to run, so we get one CSS for each package, and of all these work.

    So it seems the backoffice/admin Smidge/NUglify is broken because something in the installation, or a package, makes Smidge/NUglify try to import an empty file, or something similar.

    Clearing the App_Plugins folder and re-installing and re-deploying all packages does not help.

    As a workaround, is there a way to turn off backoffice/admin Smidge/NUglify to get the same behavior as in development? Removing the RuntimeMinification block from AppSettings doesn't seem to make a difference.

    Any other ideas what could be breaking this?

    The packages that load CSS files are:

    • Diplo GodMode
    • Translation Manager
    • Translation Manager Languagewire Connector
    • Umbraco Forms
    • uSync

    Removing each package one by one and testing is a bit tedious because it works in development. And when clearing the App_Plugins folder in production Umbraco still tries to load CSS/JS from those folders, so Smidge/NUglify breaks anyway. Not sure how Umbraco "remembers" what to load.

    EDIT: SimpleRedirects is missing from the package list above, and it seems to be causing the problem (see below).

  • Kevin Jump 2176 posts 13885 karma points MVP 6x c-trib
    Mar 08, 2022 @ 10:31
    Kevin Jump
    0

    Hi,

    when in production there is a 'version' number setting (which isn't there by default) that can be used to break the cache for minification.

    i think by default its related to the umbraco version - but you can se the value to any number and it will regenerate the cached files .

    from the docs :

    "Umbraco": {
      "CMS": {
        "RuntimeMinification": {
          "UseInMemoryCache": false,
          "CacheBuster": "Version",
          "Version": "1234"
        }
      }
    }
    

    In terms of the issue you having, i would take a look on development (which is probably running in debug mode?) and see if there are any files that are not loading in the browser (e.g 404 errors in the network tab in chrome) - if there are files missing then in debug Umbraco will still attempt to load them but silently fail.

  • Per Bolmstedt 82 posts 377 karma points
    Mar 08, 2022 @ 10:48
    Per Bolmstedt
    0

    Thank you.

    It's the minification itself that causes the 500 in production, not the cache; clearing all Smidge caches recreates the problem and the NUglify error. Is there any way to actually disable backoffice/admin minification in production?

    There are no 404s or other indications in development/debug that anything is missing. Umbraco itself and all packages load fine and have all CSS applied. Specifically, all CSS files configured in all package manifests (as far as we can see) exist on disk and are loaded in development/debug.

  • Kevin Jump 2176 posts 13885 karma points MVP 6x c-trib
    Mar 08, 2022 @ 11:00
    Kevin Jump
    0

    Hi Per,

    I don't think there is a way of disabling minification short of moving the whole site into debug :(

    I've just done a quick test on v9 with those packages and the CSS file does appear to still work when in production. it might be worth checking you are running the latest versions of the packages/umbraco ??

    from my quick test :

    <ItemGroup>
        <PackageReference Include="Diplo.GodMode" Version="9.2.1" />
        <PackageReference Include="Jumoo.TranslationManager" Version="9.0.6" />
        <PackageReference Include="Jumoo.TranslationManager.LanguageWire" Version="9.1.0" />
        <PackageReference Include="Umbraco.Cms" Version="9.3.0" />
        <PackageReference Include="Umbraco.Forms" Version="9.3.0" />
        <PackageReference Include="uSync" Version="9.2.0" />
    </ItemGroup>
    
  • Per Bolmstedt 82 posts 377 karma points
    Mar 08, 2022 @ 13:28
    Per Bolmstedt
    0

    Thank you.

    Could this be related to .NET 5 vs .NET 6? I know that we had problems with System.WebOptimizer that when upgrading to .NET 6 paths with wildcards stopped working, e.g. /assets/css/*.css. The solution is running on .NET 6.

    EDIT: This works on a different Umbraco .NET 6 installation, so likely not.

  • Arild Lindeflaten 2 posts 73 karma points
    Mar 17, 2022 @ 08:26
    Arild Lindeflaten
    1

    Hi Per,

    Did you find a solution for this? I'm having the exact same problem.

  • Per Bolmstedt 82 posts 377 karma points
    Jul 04, 2022 @ 19:55
    Per Bolmstedt
    0

    No. Did you? We've upgraded to 9.5.2 but the problem remains.

    Since it seems to work in a minimal reproduction our only plan at the moment is to recreate the web project and migrate all the code/settings. And we would probably do this when upgrading to Umbraco 10.

    If NuglifyCss could report which manifest or css file causes the error it would help. :)

  • Per Bolmstedt 82 posts 377 karma points
    Aug 10, 2022 @ 06:38
    Per Bolmstedt
    100

    Problem remains after upgrading to 10.1:

    System.InvalidOperationException: Expected expression, found '',Expected expression, found '' at Smidge.Nuglify.NuglifyCss.ProcessAsync(FileProcessContext fileProcessContext, PreProcessorDelegate next)

    Fresh deploy after upgrade. Still no idea which manifest or CSS causes the error. Haven't found any manifest files with empty/missing CSS references.

    EDIT: Turns out SimpleRedirects is causing the problem. If I replace the two CSS files in SimpleRedirects with empty/minimal/working CSS files, the backoffice CSS starts working. Unfortunately I missed that package when describing the problem, so it wasn't part of the minimal reproduction. So perhaps this is an actual incompatibility in the package in question.

  • Sue Taylor 14 posts 85 karma points
    Aug 10, 2022 @ 16:50
    Sue Taylor
    0

    I think I have found out what is causing this, at least in my case.

    There is an error logged which can be found in the log viewer:

    System.InvalidOperationException: Expected hex color, found '#ffff'
    

    at Smidge.Nuglify.NuglifyCss.ProcessAsync(FileProcessContext fileProcessContext, PreProcessorDelegate next) at Smidge.FileProcessors.PreProcessPipeline.ProcessNext(Queue`1 queue, FileProcessContext fileProcessContext) at Smidge.FileProcessors.PreProcessPipeline.<>cDisplayClass5_0.<0>d.MoveNext()

    So when I search the solution for this I found it in a custom plugin css file. So my suggestions would be to check the log and see if there are any css issues.

  • Per Bolmstedt 82 posts 377 karma points
    Aug 10, 2022 @ 19:24
    Per Bolmstedt
    0

    Thank you. In my case it was a plugin/package called SimpleRedirects, but this plugin/package is supposedly confirmed to work on 9/10 so there must be some special circumstance.

    Disabling the offending plugin's CSS manually is our current workaround.

    Either way, it's annoying that all plugin CSS stops working because of one offending CSS. Is there a way to tell Smidge to skip (or use as-is) plugin CSS/JS files that can't be processed?

  • Heather Floyd 582 posts 892 karma points MVP 4x c-trib
    Sep 28, 2022 @ 03:38
    Heather Floyd
    1

    I came across this issue today on a v10.2.1 site.

    My specific error logged is:

    System.InvalidOperationException: Expected identifier, found ' ',Expected selector, found '-',Expected comma or open brace, found '-',Expected identifier, found ' ',Expected selector, found '-',Expected comma or open brace, found '-'
       at Smidge.Nuglify.NuglifyCss.ProcessAsync(FileProcessContext fileProcessContext, PreProcessorDelegate next)
       at Smidge.FileProcessors.PreProcessPipeline.ProcessNext(Queue`1 queue, FileProcessContext fileProcessContext)
       at Smidge.FileProcessors.PreProcessPipeline.<>c__DisplayClass5_0.<<ProcessNext>b__0>d.MoveNext()
    --- End of stack trace from previous location ---
       at Smidge.FileProcessors.PreProcessPipeline.ProcessNext(Queue`1 queue, FileProcessContext fileProcessContext)
       at Smidge.FileProcessors.PreProcessPipeline.<>c__DisplayClass5_0.<<ProcessNext>b__0>d.MoveNext()
    --- End of stack trace from previous location ---
    

    I am still trying to solve this one for my own site...


    I agree that it would be ideal if:

    1. Smidge would include the problematic filename in the Error message.
    2. Umbraco had a way to disable Smidging the back-office assets.

    What I found which might help this issue in general (based on following clues here: https://github.com/umbraco/Umbraco-CMS/issues/11374) was checking the package.manifest files for all App_Plugins.

    Specifically, look at the "css" and/or "js" portions of the json. These things might cause issues:

    Empty array - ex: "css": [ ] (remove empty array properties)

    Inaccurate path - Make sure the paths start like "~/App_Plugins/..." (note the starting tilda (~) and correct capitalization.)

    Single quote marks instead of double-quote marks ex: '~/App_Plugins...' (change to double-quotes)

  • Per Bolmstedt 82 posts 377 karma points
    Sep 28, 2022 @ 09:25
    Per Bolmstedt
    0

    That's a nice summary.

    We have to remember to create issues when we find non-working plug-ins. I did this with the one that started this topic and it was swiftly fixed.

    Instead of just fixing any of the three issue-causers in your post (or other issue-causers) locally as I was very tempted to do.

  • Jeavon Leopold 3059 posts 13464 karma points MVP 9x admin c-trib
    Sep 28, 2022 @ 14:40
    Jeavon Leopold
    2

    Have you updated Smidge also? I updated Nuglify many versions in the v4.1.1 release to fix various issues simular to this, I should send Umbraco a PR to update the dependency version also.

    Update: have submitted a PR - https://github.com/umbraco/Umbraco-CMS/pull/13071

  • Per Bolmstedt 82 posts 377 karma points
    Sep 28, 2022 @ 17:20
    Per Bolmstedt
    0

    Smidge doesn't show up in "Manage NuGet Packages" (neither Solution nor Project) so I would never have thought to update it.

    I didn't even know Smidge was a package dependency.

    And I'm not even sure how I would go about updating Smidge in my Umbraco solution or project. Would I need to install Smidge manually in the web project? Maybe a general dotnet question, but still. :)

    EDIT: This is answered below

    Smidge is currently only listed as a dependency for

    Umbraco.Cms > Umbraco.Cms.Web.BackOffice > Umbraco.Cms.Web.Common > Smidge.Nuglify

    Even with the update to 4.1.1, what would have changed in my case? The issue was completely un-NUglify-able css in a plugin/addon, not a bug in NUglify.

  • Michael Latouche 504 posts 819 karma points MVP 2x c-trib
    Sep 28, 2022 @ 20:46
    Michael Latouche
    1

    Update: has been merged and will be available in v10.3.0 😉

  • Daniel Rogers 106 posts 592 karma points
    Sep 28, 2022 @ 21:41
    Daniel Rogers
    0

    When is this update going to be available.

    I have an issue that I cant prove if this will solve but I hope it will.

    I have seen a few people with the same issue but non seem to be getting any solutions.

    Refer to https://our.umbraco.com/forum/using-umbraco-and-getting-started/109430-umbraco9-live-backoffice-on-showing-any-content for details.

    But basically none of the backoffice is working on live plesk hosted server.

    I have 3 websites now with (one is just umbaco on additional plugins and all have the same issue. 1 of these sites is a blank umbraco sites to insure that it wasnt my plugins or the others I have. It still happens on the plank site.

    If this patch is going to solve my issue then I see this as a critical release that I required 6 weeks ago.

    If its not going to solve my issue and you have some solutions then please help me out.

  • Per Bolmstedt 82 posts 377 karma points
    Sep 28, 2022 @ 21:43
    Per Bolmstedt
    0

    Just to confirm; this has nothing to do with "Backoffice/admin CSS Smidge/NUglify error, breaking package styling", right?

  • Michael Latouche 504 posts 819 karma points MVP 2x c-trib
    Sep 28, 2022 @ 22:25
    Michael Latouche
    0

    Hi Daniel, I'm afraid I don't know if this will solve your issue unfortunately... The update is going to be available in v10..3.0. I'm not sure exactly when, but I think the first beta for 10.3.0 should be out in about a week or so.

  • Heather Floyd 582 posts 892 karma points MVP 4x c-trib
    Oct 04, 2022 @ 18:49
    Heather Floyd
    0

    According to release page: https://our.umbraco.com/download/releases/1030

    No date set yet.

  • Per Bolmstedt 82 posts 377 karma points
    Oct 06, 2022 @ 10:07
    Per Bolmstedt
    0

    There's a 10.3 release candidate now, if you want to test.

    But I still think this is unrelated to this thread. :)

  • Jeavon Leopold 3059 posts 13464 karma points MVP 9x admin c-trib
    Sep 29, 2022 @ 10:22
    Jeavon Leopold
    1

    You can install the latest Smidge directly into your project to find out if the Nuglify update fixes your issues even before the Umbraco dependency is updated.

    dotnet add package Smidge --version 4.1.1
    dotnet add package Smidge.InMemory --version 4.1.1
    dotnet add package Smidge.Nuglify --version 4.1.1
    
  • Heather Floyd 582 posts 892 karma points MVP 4x c-trib
    Oct 04, 2022 @ 19:55
    Heather Floyd
    1

    Updating the Smidge packages didn't resolve my back-office error.

    I ended up troubleshooting the CSS files for all App_Plugins using this tool:

    https://jigsaw.w3.org/css-validator/

    One of the files failed validation with issues on these lines:

            ...
            text-indent: -120px;
            margin-left: -7em;
            ...
    

    (A Safari-only CSS hack)

    After I removed that from the file, I was no longer getting the 500 error.

    As @Per Bolmstedt suggests, if you find a failed CSS validation problem in a package maintained by someone else, raising an issue or submitting a PR will make the experience better for everyone. (Luckily in my case, the package is one I created, so an easy fix.)

  • Per Bolmstedt 82 posts 377 karma points
    Oct 04, 2022 @ 20:15
    Per Bolmstedt
    0

    That's valid css when I run it through jigsaw. Can you show the error?

    And it's very strange that it would give these Nuglify errors you posted earlier:

    Expected identifier, found ' ',

    Expected selector, found '-',

    Expected comma or open brace, found '-',

    Expected identifier, found ' ',

    Expected selector, found '-',

    Expected comma or open brace, found '-'

    Are you sure there wasn't something else broken in the css around those lines?

  • Heather Floyd 582 posts 892 karma points MVP 4x c-trib
    Oct 04, 2022 @ 20:28
    Heather Floyd
    0

    The whole chunk I removed was this:

    @media not all and (min-resolution:.001dpcm) {
        @supports (-webkit-appearance:none) {
            text-indent: -120px;
            margin-left: -7em;
    
            #importfilepicker::file-selector-button {
                display: inline;
            }
        }
    }
    

    But the Validator specifically flagged those two lines I mentioned.

    Looking at this snippet, it seems to be missing a closing brace before the #importfilepicker line, and a proper selector for the text-indent, etc rules, though... which might be the REAL issue.

    I admit I copied this from somewhere, and don't have a mac/iphone, so I don't have an easy time testing Safari-only issues.

Please Sign in or register to post replies

Write your reply to:

Draft