Skip to content

Fix MVC and Razor Pages scoped CSS styling for project names with spaces #62680

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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Jul 11, 2025

This PR extends the fix from #62675 (Blazor scoped CSS space handling) to MVC and Razor Pages templates, ensuring that projects with spaces in their names have correctly functioning scoped CSS.

Problem

When creating MVC or Razor Pages projects with spaces in their names (e.g., "My Web App"), the scoped CSS bundle reference breaks because the hardcoded Company.WebApplication1.styles.css reference doesn't match the actual generated bundle name, which sanitizes spaces to underscores.

Solution

Applied the same StyleBundleName generator pattern used in the Blazor fix:

  1. Added StyleBundleName generator to both template.json files that uses regex to replace spaces with underscores:

    "StyleBundleName":{
      "type": "generated",
      "generator": "regex",
      "replaces": "StyleBundleName",
      "parameters": {
        "source": "name",
        "steps": [
          {
            "regex": " ",
            "replacement": "_"
          }]
      }
    }
  2. Updated _Layout.cshtml files to use the dynamic StyleBundleName:

    <!-- Before -->
    <link rel="stylesheet" href="~/Company.WebApplication1.styles.css" asp-append-version="true" />
    
    <!-- After -->
    <link rel="stylesheet" href="~/StyleBundleName.styles.css" asp-append-version="true" />

Testing

  • ✅ Template JSON validation passes
  • ✅ Integration tests verify correct CSS references for projects with spaces
  • ✅ Edge cases tested (multiple spaces, leading/trailing spaces, etc.)
  • ✅ Build system compiles templates successfully

Example

For a project named "My Web App":

  • Old: References Company.WebApplication1.styles.css (broken)
  • New: References My_Web_App.styles.css (works correctly)

This ensures that scoped CSS styling works consistently regardless of whether the project name contains spaces.

Fixes #62679.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copy link
Contributor

Greetings human! You've submitted a PR that modifies code that is shared with https://github.com/dotnet/runtime . Please make sure you synchronize this code with the changes in that repo!

@Copilot Copilot AI changed the title [WIP] Creating an MVC/Razor pages project with a space in its name breaks the styling Fix MVC and Razor Pages scoped CSS styling for project names with spaces Jul 11, 2025
@Copilot Copilot AI requested a review from javiercn July 11, 2025 15:09
Copilot finished work on behalf of javiercn July 11, 2025 15:09
@javiercn
Copy link
Member

@MackinnonBuck @joperezr in case you folks want to take this. @dariatiurina fixed it for Blazor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Creating an MVC/Razor pages project with a space in its name breaks the styling
3 participants