Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix generated CSS scopes in layout views and update templates #31257

Merged
4 commits merged into from
Mar 30, 2021
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Company.WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/Company.WebApplication1.styles.css" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is interesting. In the Blazor templates, we still have the global CSS files as well as the scoped ones. I see that you've been able to make the global one unnecessary here. Is it possible that developers will still want to have a global non-scoped CSS file too?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call!

I've brought back the non-scoped CSS file and moved the html/body style to it. This will help indicate to developers that non-scoped CSS files are still sensible to use in some scenarios.

</head>
<body>
<header>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,4 +68,4 @@ body {
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>@ViewData["Title"] - Company.WebApplication1</title>

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/Company.WebApplication1.css" />
</head>
<body>
<header>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}

.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}

.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
font-size: 1rem;
line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}

body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}

This file was deleted.

6 changes: 6 additions & 0 deletions src/ProjectTemplates/test/MvcTemplateTest.cs
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ public ITestOutputHelper Output

private async Task MvcTemplateCore(string languageOverride)
{
// Additional arguments are needed. See: https://github.com/dotnet/aspnetcore/issues/24278
Environment.SetEnvironmentVariable("EnableDefaultScopedCssItems", "true");

var project = await ProjectFactory.GetOrCreateProject("mvcnoauth" + (languageOverride == "F#" ? "fsharp" : "csharp"), Output);

var createResult = await project.RunDotNetNewAsync("mvc", language: languageOverride);
Expand Down Expand Up @@ -121,6 +124,9 @@ private async Task MvcTemplateCore(string languageOverride)
[SkipOnHelix("Cert failure, https://github.com/dotnet/aspnetcore/issues/28090", Queues = "All.OSX;" + HelixConstants.Windows10Arm64 + HelixConstants.DebianArm64)]
public async Task MvcTemplate_IndividualAuth(bool useLocalDB)
{
// Additional arguments are needed. See: https://github.com/dotnet/aspnetcore/issues/24278
Environment.SetEnvironmentVariable("EnableDefaultScopedCssItems", "true");

var project = await ProjectFactory.GetOrCreateProject("mvcindividual" + (useLocalDB ? "uld" : ""), Output);

var createResult = await project.RunDotNetNewAsync("mvc", auth: "Individual", useLocalDB: useLocalDB);
Expand Down
14 changes: 7 additions & 7 deletions src/ProjectTemplates/test/template-baselines.json
Original file line number Diff line number Diff line change
Expand Up @@ -484,10 +484,10 @@
"Views/Home/Privacy.cshtml",
"Views/Shared/Error.cshtml",
"Views/Shared/_Layout.cshtml",
"Views/Shared/_Layout.cshtml.css",
"Views/Shared/_LoginPartial.cshtml",
"Views/Shared/_ValidationScriptsPartial.cshtml",
"wwwroot/favicon.ico",
"wwwroot/css/site.css",
"wwwroot/js/site.js",
"wwwroot/lib/bootstrap/LICENSE",
"wwwroot/lib/bootstrap/dist/css/bootstrap.css",
Expand Down Expand Up @@ -542,9 +542,9 @@
"Views/Home/Privacy.cshtml",
"Views/Shared/Error.cshtml",
"Views/Shared/_Layout.cshtml",
"Views/Shared/_Layout.cshtml.css",
"Views/Shared/_ValidationScriptsPartial.cshtml",
"wwwroot/favicon.ico",
"wwwroot/css/site.css",
"wwwroot/js/site.js",
"wwwroot/lib/bootstrap/LICENSE",
"wwwroot/lib/bootstrap/dist/css/bootstrap.css",
Expand Down Expand Up @@ -599,10 +599,10 @@
"Views/Home/Privacy.cshtml",
"Views/Shared/Error.cshtml",
"Views/Shared/_Layout.cshtml",
"Views/Shared/_Layout.cshtml.css",
"Views/Shared/_LoginPartial.cshtml",
"Views/Shared/_ValidationScriptsPartial.cshtml",
"wwwroot/favicon.ico",
"wwwroot/css/site.css",
"wwwroot/js/site.js",
"wwwroot/lib/bootstrap/LICENSE",
"wwwroot/lib/bootstrap/dist/css/bootstrap.css",
Expand Down Expand Up @@ -657,10 +657,10 @@
"Views/Home/Privacy.cshtml",
"Views/Shared/Error.cshtml",
"Views/Shared/_Layout.cshtml",
"Views/Shared/_Layout.cshtml.css",
"Views/Shared/_LoginPartial.cshtml",
"Views/Shared/_ValidationScriptsPartial.cshtml",
"wwwroot/favicon.ico",
"wwwroot/css/site.css",
"wwwroot/js/site.js",
"wwwroot/lib/bootstrap/LICENSE",
"wwwroot/lib/bootstrap/dist/css/bootstrap.css",
Expand Down Expand Up @@ -715,9 +715,9 @@
"Views/Home/Privacy.cshtml",
"Views/Shared/Error.cshtml",
"Views/Shared/_Layout.cshtml",
"Views/Shared/_Layout.cshtml.css",
"Views/Shared/_ValidationScriptsPartial.cshtml",
"wwwroot/favicon.ico",
"wwwroot/css/site.css",
"wwwroot/js/site.js",
"wwwroot/lib/bootstrap/LICENSE",
"wwwroot/lib/bootstrap/dist/css/bootstrap.css",
Expand Down Expand Up @@ -772,10 +772,10 @@
"Views/Home/Privacy.cshtml",
"Views/Shared/Error.cshtml",
"Views/Shared/_Layout.cshtml",
"Views/Shared/_Layout.cshtml.css",
"Views/Shared/_LoginPartial.cshtml",
"Views/Shared/_ValidationScriptsPartial.cshtml",
"wwwroot/favicon.ico",
"wwwroot/css/site.css",
"wwwroot/js/site.js",
"wwwroot/lib/bootstrap/LICENSE",
"wwwroot/lib/bootstrap/dist/css/bootstrap.css",
Expand Down Expand Up @@ -830,9 +830,9 @@
"Views/Home/Privacy.cshtml",
"Views/Shared/Error.cshtml",
"Views/Shared/_Layout.cshtml",
"Views/Shared/_Layout.cshtml.css",
"Views/Shared/_ValidationScriptsPartial.cshtml",
"wwwroot/favicon.ico",
"wwwroot/css/site.css",
"wwwroot/js/site.js",
"wwwroot/lib/bootstrap/LICENSE",
"wwwroot/lib/bootstrap/dist/css/bootstrap.css",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -609,6 +609,45 @@ public class FormTagHelper : {typeof(TagHelper).FullName}
CompileToAssembly(generated);
}

[Fact]
public void RazorView_Layout_WithCssScope()
{
// Arrange
AddCSharpSyntaxTree($@"
[{typeof(HtmlTargetElementAttribute).FullName}({"\"all\""})]
public class AllTagHelper : {typeof(TagHelper).FullName}
{{
public string Bar {{ get; set; }}
}}
[{typeof(HtmlTargetElementAttribute).FullName}({"\"form\""})]
public class FormTagHelper : {typeof(TagHelper).FullName}
{{
}}
");

// Act
// This test case attempts to use all syntaxes that might interact with auto-generated attributes
var generated = CompileToCSharp(@"
<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""utf-8"" />
<meta name=""viewport"" content=""width=device-width, initial-scale=1.0"" />
<title>@ViewData[""Title""] - Test layout component</title>
</head>
<body>
<p>This is a body.</p>
</body>
</html>
", cssScope: "TestCssScope");

// Assert
var intermediate = generated.CodeDocument.GetDocumentIntermediateNode();
var csharp = generated.CodeDocument.GetCSharpDocument();
AssertDocumentNodeMatchesBaseline(intermediate);
AssertCSharpDocumentMatchesBaseline(csharp);
CompileToAssembly(generated);
}
#endregion

#region DesignTime
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
#pragma checksum "TestFiles\IntegrationTests\CodeGenerationIntegrationTest\test.cshtml" "{ff1816ec-aa5e-4d10-87f7-6f4963833460}" "aa3144e1672369f198372f95e6bbee5ac485c5c3"
// <auto-generated/>
#pragma warning disable 1591
[assembly: global::Microsoft.AspNetCore.Razor.Hosting.RazorCompiledItemAttribute(typeof(AspNetCore.TestFiles_IntegrationTests_CodeGenerationIntegrationTest_test), @"mvc.1.0.view", @"/TestFiles/IntegrationTests/CodeGenerationIntegrationTest/test.cshtml")]
namespace AspNetCore
{
#line hidden
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
[global::Microsoft.AspNetCore.Razor.Hosting.RazorSourceChecksumAttribute(@"SHA1", @"aa3144e1672369f198372f95e6bbee5ac485c5c3", @"/TestFiles/IntegrationTests/CodeGenerationIntegrationTest/test.cshtml")]
public class TestFiles_IntegrationTests_CodeGenerationIntegrationTest_test : global::Microsoft.AspNetCore.Mvc.Razor.RazorPage<dynamic>
{
#pragma warning disable 1998
public async override global::System.Threading.Tasks.Task ExecuteAsync()
{
WriteLiteral("\r\n<!DOCTYPE html>\r\n<html TestCssScope lang=\"en\">\r\n<head TestCssScope>\r\n <meta TestCssScope charset=\"utf-8\" />\r\n <meta TestCssScope name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n <title TestCssScope>");
#nullable restore
#line 7 "TestFiles\IntegrationTests\CodeGenerationIntegrationTest\test.cshtml"
Write(ViewData["Title"]);

#line default
#line hidden
#nullable disable
WriteLiteral(" - Test layout component</title>\r\n</head>\r\n<body TestCssScope>\r\n <p TestCssScope>This is a body.</p>\r\n</body>\r\n</html>\r\n");
}
#pragma warning restore 1998
[global::Microsoft.AspNetCore.Mvc.Razor.Internal.RazorInjectAttribute]
public global::Microsoft.AspNetCore.Mvc.ViewFeatures.IModelExpressionProvider ModelExpressionProvider { get; private set; }
[global::Microsoft.AspNetCore.Mvc.Razor.Internal.RazorInjectAttribute]
public global::Microsoft.AspNetCore.Mvc.IUrlHelper Url { get; private set; }
[global::Microsoft.AspNetCore.Mvc.Razor.Internal.RazorInjectAttribute]
public global::Microsoft.AspNetCore.Mvc.IViewComponentHelper Component { get; private set; }
[global::Microsoft.AspNetCore.Mvc.Razor.Internal.RazorInjectAttribute]
public global::Microsoft.AspNetCore.Mvc.Rendering.IJsonHelper Json { get; private set; }
[global::Microsoft.AspNetCore.Mvc.Razor.Internal.RazorInjectAttribute]
public global::Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper<dynamic> Html { get; private set; }
}
}
#pragma warning restore 1591
Loading