Umbraco 8.7.0 css not working wen debug false

[thomashdk]

Have an issue with css not loading when debug = true..

webconfig: <clientDependency configSource="config\ClientDependency.config" />

client: <clientDependency version="1" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.CdfLogger, Umbraco.Web">

Cleared the client dependency folder in app_data..

in cshtml: <link href="/DependencyHandler.axd?s=L2Fzc2V0cy9jc3MvdGhlbWUtbmFlc3R2ZWQuY3NzOy9BcHBfUGx1Z2lucy9DYWJhbmEuSWNvbnBpY2tlci9jc3MvaWNvbnMuY3NzOy9hc3NldHMvY3NzL3ByaW50LmNzczs&amp;t=Css&amp;cdv=1" rel="stylesheet">

and can open the style file...

Still works when debug = false..

Umbraco 8.7.0

[thomashdk]

Haveing this @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i&display=swap');@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");

In the begin of the css file makes it now load the css ?

If I remove it then it works.

[thomashdk]

It's this url that breaks it.. @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"); directly from google fonts

It looks like it's the new url from google font that breaks it?

Google fonts works: https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800&display=swap

New url font: same font Google font don't: https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap

[Shazwazza]

there was a similar report recently but I can't seem to find it but i think it had to do with single quotes vs double quotes in the url( statement.

There's some tests for these things here https://github.com/Shazwazza/ClientDependency/blob/master/src/ClientDependency.UnitTests/CssImportStatementsTest.cs and https://github.com/Shazwazza/ClientDependency/blob/master/src/ClientDependency.UnitTests/CssMinTest.cs

Would you be able to submit a test that fails to show the issue? Then it should be easy to resolve, it's probably a regex thing.

[garrybain]

Was there a resolution to this issue? I've just ran into it myself, the @import statement in my CSS is breaking due to the new syntax used in importing Google fonts.

[Shazwazza]

@garrybain are you using the latest CDF release, if so, steps to replicate?

[garrybain]

I'm using 1.9.9.

I have a style.css file that starts as follows:

Once enableCssMinify="true" - it compiles and minifies as so - thus not being recognise as proper CSS so it fails to style my page:

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300; @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300; @import "https://use.fontawesome.com/releases/v5.0.6/css/all.css"; @charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700;1,900&display=swap");@import url("https://fonts.googleapis.com/css2

It seems to insert the Google font import above the @chartset and then breaks at the semi colons.

Thanks

[garrybain]

Sorry I seem to have solved this and I'm not sure how, I upgraded to 1.9.9 which then threw an error as it was being used with UmbracoCMS nuget package - so I rolled back and it seems to work ok. Sorry I can't give more a technically precise answer but - if anyone has the issue in future all I can suggest is changing the semi colons in the google fonts import statement to "%3b" instead of ";" and mine has worked.

Thanks