search

dotnet / aspnetcore

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.
https://asp.net
MIT License
35.38k stars 10k forks source link

CSS isolation error when Blazor component Nuget packaged #26292

Closed majorimi closed 4 years ago

majorimi commented 4 years ago

@mkArtakMSFT I'm facing one more issue related to CSS. The above mentioned isolated CSS was working with WebAssembly projects when Razor Class Library project was referenced directly. But when it is packaged to Nuget and used via Nuget package not directly from project reference. Got this error:

Severity    Code    Description Project File    Line    Suppression State
Error       The scoped css file 'C:\Users\Major\.nuget\packages\majorsoft.blazor.components.loading\0.9.1-rc.1.20452.10\contentFiles\any\net5.0\LoadingPage.razor.css' was defined but no associated razor component was found for it.  Blazor.Components.TestApp (Samples\Blazor.Components.TestApp)   C:\Program Files\dotnet\sdk\5.0.100-rc.1.20452.10\Sdks\Microsoft.NET.Sdk.Razor\build\netstandard2.0\Microsoft.NET.Sdk.Razor.ScopedCss.targets   97

Originally posted by @majorimi in https://github.com/dotnet/aspnetcore/issues/26144#issuecomment-697930110

pranavkm commented 4 years ago

Thanks @majorimi this looks like a bug in our SDK.

majorimi commented 4 years ago

Probably. But it is still RC so have time to fix... Thanks.

Please also check is "Scoped CSS merge" works or not? What I mean by that what if a Blazor project uses an internal Component Library (e.g. project reference) with Scoped CSS. And also references some external 3rd party (e.g. Nuget packages) also with Scoped CSS.

In that case will the 2 different CSS merged into one file "_framework/scoped.styles.css"? Or one will override the other?

captainsafia commented 4 years ago

@majorimi Can you share a repro project?

majorimi commented 4 years ago

@captainsafia Sure here it is.

I'm developing a set of Blazor components and for testing I have 2 TestApps (one WebAssembly and one Server hosted). These are referencing the Razor Class Libraries as project ref. So I can test any changes by running the apps locally.

The issue is happening in the demo/Blazor.Components.DemoApp. This app is deployed here to show the usage of my components. And it is intended to use the components from Nuget. But it has a build error with scoped CSS from Nuget package.

Thanks for your help.

javiercn commented 4 years ago

In that case will the 2 different CSS merged into one file "_framework/scoped.styles.css"? Or one will override the other?

The two files will be concatenated together (the one from the referenced project and the one from the NuGet package). We have however, changed this in RC2 and the files will be brought in directly via an import directive relative to the application path bundle.

javiercn commented 4 years ago

I'm not able to reproduce the issue with the repro you provided, I've looked at the msbuild binlog and it works as expected. I would suggest you check your environment to ensure you are using the RC1 SDK, clean the bin and obj folders on the projects and perform a clean build.

If your issue still persists, then please try to come up with a minimal repro project that showcases the issue and detailed instructions on how to reproduce it. It's easy for us to do things differently and don't trigger the issue you are seeing.

majorimi commented 4 years ago

Thanks for checking it. Have you built the specified branch: dev/update-demo-app-to-nuget? I have separated out the non building code to a new branch since it would make CI/CD pipeline fail. master branch works. I have the DemoApp as well but it is referencing Razor Class Libraries as project ref.

Still got the same build error. I also have CI pipeline in Azure Devops which runs on a clean machine. Added a step to install version: '5.0.100-rc.1.20452.10'. And build fails there too. Very weird issue...

/opt/hostedtoolcache/dotnet/sdk/5.0.100-rc.1.20452.10/Sdks/Microsoft.NET.Sdk.Razor/build/netstandard2.0/Microsoft.NET.Sdk.Razor.ScopedCss.targets(97,3): error : The scoped css file '/home/vsts/.nuget/packages/majorsoft.blazor.components.loading/0.9.30-rc.1.20452.10/contentFiles/any/net5.0/LoadingPage.razor.css' was defined but no associated razor component was found for it. [/home/vsts/work/1/s/demo/Blazor.Components.DemoApp/Blazor.Components.DemoApp.csproj]

[error]Error: The process '/opt/hostedtoolcache/dotnet/dotnet' failed with exit code 1**

image

Ok I will try to create a simpler example or recreate the whole project.

majorimi commented 4 years ago

Immediately got the same build error. Is it possible that the Nuget package is broken?

Here is the .csproj file:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Majorsoft.Blazor.Components.Loading" Version="0.9.30-rc.1.20452.10" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0-rc.1.20451.17" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0-rc.1.20451.17" PrivateAssets="all" />
    <PackageReference Include="System.Net.Http.Json" Version="5.0.0-rc.1.20451.14" />
  </ItemGroup>
</Project>

Even added the packaged component to the Index.razor: image

javiercn commented 4 years ago

@majorimi ah, I think I know what it's happening.

It looks like somehow the file got added as part of the nuget package as content and that's causing the issue.

majorimi commented 4 years ago

Hmm I was using the standard .Net Packaging form on the project's properties window. But don't really understand the problem. CSS and JS resources should be packaged anyway. Otherwise how you can distribute these resources in case of your component Nuget packaged?

javiercn commented 4 years ago

@majorimi they are scoped css files, so the original css sources are not packaged, only the generated assets.

majorimi commented 4 years ago

Ok. Please check my .csproj file: https://github.com/majorimi/blazor-components/blob/master/src/Blazor.Components.Loading/Blazor.Components.Loading.csproj

As I can see it does not specify that CSS should be resource. I don't have .nuspec file specified separately. Just using 'dotnet pack' So probably there's the issue...

javiercn commented 4 years ago

@majorimi I believe we fixed something in this area in RC2, so I would suggest you try using a nightly build from here to see if that fixes your issue.

Alternatively, you can likely set pack to false explicitly and that should hopefully do it.

majorimi commented 4 years ago

Yes I have got similar answers for other issues to use RC2. However it requires private Nuget feed as well since RC2 packages not published yet... Anyway let's wait for the official RC2 release. It should come in few days.

HaoK commented 4 years ago

@majorimi let us know if this works once you have tried things on RC2

majorimi commented 4 years ago

Ok will try out with RC2 and let you know. Meanwhile this should be labeled as bug since the default .Net Packaging generates a wrong Nuget package.

pranavkm commented 4 years ago

Feel free to reopen this if you continue seeing this after upgrading to rc2.

majorimi commented 4 years ago

I can confirm that this issue was fixed with .NET5 RC2 update. Thanks.