Illegal value for token color: #fff

[yzhe819]

The illegal value of token colour issue happened in the code editor section.

Warning Only visible for the production build

How to reproduce?

Started by trying to bootstrap a normal project.

yarn create docusaurus-openapi my-website
cd my-website

And install url for url problem

yarn add url

Then fix the Package subpath './lib/sidebars/generator' issue by adding resolutions to package.json #160

"resolutions": {
    "@docusaurus/core": "2.0.0-beta.14",
    "@docusaurus/preset-classic": "2.0.0-beta.14",
    "@docusaurus/mdx-loader": "2.0.0-beta.14",
    "@docusaurus/plugin-content-docs": "2.0.0-beta.14",
    "@docusaurus/types": "2.0.0-beta.14",
    "@docusaurus/utils-validation": "2.0.0-beta.14",
    "@docusaurus/utils": "2.0.0-beta.14"
},

And then yarn again

Then add the requestBody to the post method on the templete

"requestBody": {
  "description": "Just a simple test",
  "required": true,
  "content": {
    "application/json": {
      "schema": {
        "required": ["name"],
        "properties": {
          "name": {
            "type": "string",
            "description": "The list of RSS3URIs",
            "example": ["hello world"]
          }
        }
      }
    }
  }
},

Now, we can successfully run our project. Here is what we get. The "name" and "hello world" on the request body section are displayed correctly.

However, when I built this project and deployed it. This page will crash. (The same page, the post request of the pets)

Here is the error msg:

Illegal value for token color: #fff

To test it locally, you can globally install http-server, which is a node.js package to allow us use my computer to test the build file. And just run it on the build folder. Here is my test step:

npm install -g http-server
cd build
http-server

Reason:

After checking the code, I found the reason.

This error is thrown by the Monaco Editor. For the editor, it uses the regex to check whether this color is a valid color. The checking rule is the valid color must start with the #symbol. Then, follow the six-length color variable (like ffffff); finally, it allows the transparent variable.

When the project is built, the value of --openapi-Monaco-background-color (#ffffff) is transferred to the shorthand style (#fff). Therefore, the editor will throw this as not a valid token.

To prove that, we can search the --openapi-monaco-background-color for the build file. We can get the value of --openapi-monaco-background-color is #fff (on the build/assets/css/styles.[hash].css

We can just change this to #ffffff, and then run the HTTP-server again (or deploy this changed build file again)

Then, you can see no more crashes for the request body.

[bourdakos1]

Excellent write up, this is super helpful ❤️

[yzhe819]

Hey @bourdakos1 can you reproduce this issue?

[bourdakos1]

Yes, this is a known issue. Just haven’t had a chance to fix it yet. Feel free to open a PR if you want to take a crack at it

[yzhe819]

This issue has been resolved in the above pr #196. For old versions, this can be easily fixed by setting the build command with the --no-minify flag.

Just change the build command in your package.json from the following:

"build": "docusaurus build",

By adding the --no-minify flag at the end.

"build": "docusaurus build --no-minify",

Then, no crash issues.