[Blazor] Wire up CSS isolation for the current project #24221

javiercn · 2020-07-22T22:23:40Z

Works E2E
Needs cleanups
Needs tests

pranavkm

👍

src/Razor/Microsoft.NET.Sdk.Razor/src/ConcatenateCssFiles.cs

src/Razor/Microsoft.NET.Sdk.Razor/src/RewriteCss.cs

...icrosoft.NET.Sdk.Razor/src/build/netstandard2.0/Microsoft.NET.Sdk.Razor.CssIsolation.targets

src/Razor/Microsoft.NET.Sdk.Razor/src/build/netstandard2.0/Sdk.Razor.CurrentVersion.targets

...icrosoft.NET.Sdk.Razor/src/build/netstandard2.0/Microsoft.NET.Sdk.Razor.CssIsolation.targets

src/Components/WebAssembly/testassets/Wasm.Authentication.Client/Pages/FetchData.razor

src/Components/WebAssembly/testassets/Wasm.Authentication.Client/Pages/FetchData.razor.css

pranavkm

Looks great

...r/Microsoft.NET.Sdk.Razor/src/build/netstandard2.0/Microsoft.NET.Sdk.Razor.ScopedCss.targets

src/Razor/Microsoft.NET.Sdk.Razor/src/ResolveAllScopedCssAssets.cs

pranavkm · 2020-07-23T16:13:55Z

src/Razor/Microsoft.NET.Sdk.Razor/src/build/netstandard2.0/Sdk.Razor.CurrentVersion.targets

@@ -64,6 +64,9 @@ Copyright (c) .NET Foundation. All rights reserved.
    <!-- Controls whether or not the static web assets feature is enabled. By default is enabled for netcoreapp3.0
         applications and RazorLangVersion 3 or above. -->
    <StaticWebAssetsEnabled Condition="'$(StaticWebAssetsEnabled)' == ''">$(_Targeting30OrNewerRazorLangVersion)</StaticWebAssetsEnabled>
+
+    <!-- Controls whether or not the scoped css feature is enabled. By default is enabled for net5.0 applications and RazorLangVersion 5 or above -->
+    <ScopedCssEnabled Condition="'$(ScopedCssEnabled)' == ''">$(_Targeting30OrNewerRazorLangVersion)</ScopedCssEnabled>


Shouldn't this be 5.0 or newer?

I couldn't get this to work, Wasm.Authentication.Client was complaining about it

had to pass /p:ScopedCssEnabled to make it work. I'll revisit later on, but we could fix it after preview8 if necessary

javiercn · 2020-07-23T22:54:27Z

src/Razor/Microsoft.NET.Sdk.Razor/test/GenerateStaticWebAssetsPropsFileTest.cs

@@ -269,7 +269,7 @@ public void Fails_WhenStaticWebAsset_HaveDifferentSourceId()
            Assert.Equal(expectedError, message);
        }

-        [Fact]
+        [Fact(Skip = "https://github.com/dotnet/aspnetcore/issues/24257")]


We need to relax this restriction. The issue is for future follow-up

javiercn · 2020-07-23T22:55:53Z

...r/Microsoft.NET.Sdk.Razor/src/build/netstandard2.0/Microsoft.NET.Sdk.Razor.ScopedCss.targets

+<Target Name="_AddBundleToStaticWebAssetsPublishedFile" Condition="'$(ScopedCssDisableBundling)' != 'true' and '@(_AllScopedCss)' != ''" BeforeTargets="_StaticWebAssetsComputeFilesToPublish" DependsOnTargets="_CollectAllScopedCssAssets">
+  <ItemGroup>
+    <!-- Manually add the file to the publish flow. See https://github.com/dotnet/aspnetcore/issues/24245 -->
+    <_ExternalPublishStaticWebAsset Include="$(_ScopedCssOutputFullPath)">
+      <SourceType>generated</SourceType>
+      <SourceId>$(PackageId)</SourceId>
+      <ContentRoot>$(_ScopedCssIntermediatePath)</ContentRoot>
+      <BasePath>$(StaticWebAssetBasePath)</BasePath>
+      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      <RelativePath>$([MSBuild]::MakeRelative('$(MSBuildProjectDirectory)',$([MSBuild]::NormalizePath('wwwroot/$(StaticWebAssetBasePath)/_framework/scoped.styles.css'))))</RelativePath>
+    </_ExternalPublishStaticWebAsset>
+  </ItemGroup>
+</Target>
+
+<Target Name="_AdjustIsolatedCssPackageContents" BeforeTargets="_RemoveWebRootContentFromPackaging;_CreateStaticWebAssetsCustomPropsCacheFile" DependsOnTargets="_CollectAllScopedCssAssets">
+  <ItemGroup>
+    <_CurrentProjectStaticWebAsset Remove="$(_ScopedCssOutputFullPath)" />
+    <StaticWebAsset Remove="$(_ScopedCssOutputFullPath)" />
+    <StaticWebAsset Include="@(_AllScopedCss)" Condition="'%(SourceType)' == ''" />
+  </ItemGroup>
+</Target>


This part gets a bit tricky due to the lack of support for assets representing generated content. #24245 will address that.

pranavkm · 2020-07-24T02:18:03Z

src/Razor/Microsoft.NET.Sdk.Razor/src/ApplyCssScopes.cs

+            // can update the Content item for the .razor.css file with Scoped=false and we will not consider it.
+            foreach (var unmatched in unmatchedScopedCss)
+            {
+                Log.LogError($"The scoped css file '{unmatched.ItemSpec}' was defined but no associated razor component was found for it.");


We can do this in a follow up, but it's useful to include an error code with these errors.

What would be an acceptable error code? I tried to search for previous history on this but couldn't find anything.

pranavkm · 2020-07-24T02:18:29Z

src/Razor/Microsoft.NET.Sdk.Razor/src/ApplyCssScopes.cs

+            {
+                var componentCandidate = RazorComponents[i];
+                var j = 0;
+                while (j < unmatchedScopedCss.Count)


pranavkm · 2020-07-24T02:19:01Z

src/Razor/Microsoft.NET.Sdk.Razor/src/ComputeCssScope.cs

+            return builder.ToString();
+        }
+
+        private  string ToBase36(byte[] hash)


Suggested change

private string ToBase36(byte[] hash)

private string ToBase36(byte[] hash)

* Wires up CSS isolation on the build. * Transforms the css files during build. * Bundles all scopes css into a single file and exposes it on _framework/scoped.styles.cs * Packs pre-processed files as static web assets.

Wire up CSS isolation for the current project

f3f40d5

pranavkm reviewed Jul 22, 2020

View reviewed changes

javiercn added 4 commits July 23, 2020 05:26

Cleanups

1fd1321

Cleanups

b9a5eae

Make sure server works

f0e80a5

Fixups

872dc2d

javiercn commented Jul 23, 2020

View reviewed changes

src/Components/WebAssembly/testassets/Wasm.Authentication.Client/Pages/FetchData.razor Outdated Show resolved Hide resolved

javiercn commented Jul 23, 2020

View reviewed changes

src/Components/WebAssembly/testassets/Wasm.Authentication.Client/Pages/FetchData.razor.css Outdated Show resolved Hide resolved

Cleanups

c35f160

pranavkm reviewed Jul 23, 2020

View reviewed changes

Pilchie added the area-blazor Includes: Blazor, Razor Components label Jul 23, 2020

javiercn added 4 commits July 23, 2020 12:12

Added many tests

53ff4af

Fix publish no build

6886f13

Fix pack support, add validation test

4020b8e

Add publish support

7b41d78

javiercn commented Jul 23, 2020

View reviewed changes

Add blazor webassembly tests

d4fe767

javiercn marked this pull request as ready for review July 24, 2020 02:15

javiercn requested review from SteveSandersonMS and a team as code owners July 24, 2020 02:15

pranavkm approved these changes Jul 24, 2020

View reviewed changes

javiercn merged commit 3a81992 into master Jul 24, 2020

javiercn deleted the javiercn/css-isolation-swa branch July 24, 2020 07:02

	private string ToBase36(byte[] hash)
	private string ToBase36(byte[] hash)

[Blazor] Wire up CSS isolation for the current project #24221

[Blazor] Wire up CSS isolation for the current project #24221

Uh oh!

Conversation

javiercn commented Jul 22, 2020

Uh oh!

pranavkm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pranavkm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

javiercn Jul 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

javiercn Jul 23, 2020 •

edited

Loading