Skip to content

[system] Missing quotes in InitColorSchemeScript.tsx #43416

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.

Sign up for GitHub

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

Jump to bottom
Open
brandongit2 opened this issue Aug 23, 2024 · 4 comments · May be fixed by #45927
Open

[system] Missing quotes in InitColorSchemeScript.tsx #43416

brandongit2 opened this issue Aug 23, 2024 · 4 comments · May be fixed by #45927
Labels
docs Improvements or additions to the documentation package: system Specific to @mui/system v6.x

Comments

@brandongit2
Copy link

brandongit2 commented Aug 23, 2024 •
edited by oliviertassinari
Loading

Steps to reproduce

Link to live example: https://stackblitz.com/edit/github-xk9wmf?file=src%2FApp.tsx

import { FC } from 'react';
import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';

import './style.css';

export const App: FC<{ name: string }> = ({ name }) => {
  // This injects a `<script>` tag into the DOM. Right-click and inspect the
  // site preview on the right, and look for the `<script>` tag under `<div id="app">`.
  // You should see that on the second-last line of the script, there is a bare `%s` with
  // no quotes around it. This throws a `SyntaxError` in my browser.
  return <InitColorSchemeScript attribute="[data-color-scheme=%s]" />;
};

Steps:

  1. Right-click and inspect the site preview on the right, and look for the <script> tag under <div id="app">. You should see that on the second-last line of the script, there is a bare %s with no quotes around it. This throws a SyntaxError in my browser.

Current behavior

No response

Expected behavior

No response

Context

material-ui/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx

Line 81 in 9f4b846

${colorSchemeNode}.setAttribute('${attr}'.replace('%s', colorScheme), ${value ? `${value}.replace('%s', colorScheme)` : '""'});`;

needs to have quotes around ${value}.

Your environment

System:
OS: macOS 14.6.1
Binaries:
Node: 18.19.1 - ~/.asdf/installs/nodejs/18.19.1/bin/node
npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm
pnpm: 9.7.1 - ~/.asdf/installs/nodejs/18.19.1/bin/pnpm
Browsers:
Chrome: 127.0.6533.120
Edge: Not Found
Safari: 17.6
npmPackages:
@emotion/react: 11.13.3 => 11.13.3
@emotion/styled: 11.13.0 => 11.13.0
@mui/icons-material: 6.0.0-rc.0 => 6.0.0-rc.0
@mui/lab: 6.0.0-beta.7 => 6.0.0-beta.7
@mui/material: 6.0.0-rc.0 => 6.0.0-rc.0
@mui/system: 6.0.0-rc.0 => 6.0.0-rc.0
@mui/x-data-grid: 7.14.0 => 7.14.0
@mui/x-date-pickers: 7.14.0 => 7.14.0
@mui/x-tree-view: 7.14.0 => 7.14.0
@types/react: 18.3.4 => 18.3.4
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
typescript: ^5.2.2 => 5.3.2

Search keywords: css variables, InitColorSchemeScript, %s
@brandongit2 brandongit2 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 23, 2024
@brandongit2 brandongit2 changed the title Missing quotes in InitColorSchemeScript.tsx [v6 RC] Missing quotes in InitColorSchemeScript.tsx Aug 23, 2024
@oliviertassinari oliviertassinari added the bug 🐛 Something doesn't work label Aug 24, 2024
@oliviertassinari oliviertassinari mentioned this issue Aug 24, 2024
Closed
@siriwatknp siriwatknp added support: question Community support but can be turned into an improvement and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer bug 🐛 Something doesn't work labels Aug 26, 2024
@siriwatknp
Copy link
Member

siriwatknp commented Aug 26, 2024 •
edited
Loading

I think this is not a bug (may be a documentation improvement). You missed the single quote '%s':

-<InitColorSchemeScript attribute="[data-color-scheme=%s]" />
+<InitColorSchemeScript attribute="[data-color-scheme='%s']" />

@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 26, 2024 •
edited
Loading

+1 for solving this using the docs, I didn't find one in https://next.mui.com/material-ui/customization/css-theme-variables/configuration/.

Also there seems that we are missing the API page for the <InitColorSchemeScript> component.

@siriwatknp This isn't valid JavaScript though, it crashes, maybe there should be a defensive logic.

SCR-20240826-nins 
(function() {
try {
  var mode = localStorage.getItem('mui-mode') || 'system';
  var colorScheme = '';
  var dark = localStorage.getItem('mui-color-scheme-dark') || 'dark';
  var light = localStorage.getItem('mui-color-scheme-light') || 'light';
  if (mode === 'system') {
    // handle system mode
    var mql = window.matchMedia('(prefers-color-scheme: dark)');
    if (mql.matches) {
      colorScheme = dark
    } else {
      colorScheme = light
    }
  }
  if (mode === 'light') {
    colorScheme = light;
  }
  if (mode === 'dark') {
    colorScheme = dark;
  }
  if (colorScheme) {
    
      document.documentElement.setAttribute('data-color-scheme'.replace('%s', colorScheme), %s.replace('%s', colorScheme));
  }
} catch(e){}})();

@oliviertassinari oliviertassinari added package: system Specific to @mui/system and removed support: question Community support but can be turned into an improvement labels Aug 26, 2024
@brandongit2
Copy link
Author

brandongit2 commented Aug 27, 2024 •
edited
Loading

Ah okay. I was going off of the comment on this line:

material-ui/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx

Line 73 in 9f4b846

const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme=%s] or [data-color-scheme]

Also, @oliviertassinari it is mentioned in the docs page you linked, you just have to click on the little tabs here:

image

But yeah it took me quite a while before I found that. It would be nice if the docs around colorSchemeSelector and InitColorSchemeScript were improved.

@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 27, 2024 •
edited
Loading

you have to click on the little tabs here:

@brandongit2 Oh, I couldn't find it, thanks.

So if we summarily the next step, it looks like solving this issue is about the docs:

  • 1. Fix the code comment:
diff --git a/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx
index 7320bb7c10..c0f6eca59f 100644
--- a/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx
+++ b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx
@@ -70,7 +70,7 @@ export default function InitColorSchemeScript(options?: InitColorSchemeScriptPro
     setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
       ${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
   }
-  const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme=%s] or [data-color-scheme]
+  const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme='%s'] or [data-color-scheme]
   if (matches) {
     const [attr, value] = matches[1].split('=');
     if (!value) {

@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation label Aug 27, 2024
@oliviertassinari oliviertassinari changed the title [v6 RC] Missing quotes in InitColorSchemeScript.tsx [system] Missing quotes in InitColorSchemeScript.tsx Aug 27, 2024
@siriwatknp siriwatknp linked a pull request Apr 16, 2025 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs Improvements or additions to the documentation package: system Specific to @mui/system v6.x
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[docs] Add InitColorSchemeScript docs and API siriwatknp/material-ui
3 participants
@oliviertassinari @siriwatknp @brandongit2