postcss-simple-vars: <css input> Undefined variable $vocabulary

[RareSecond]

Q&A (please complete the following information)

• OS: macOS
• Browser: Arc
• Version: Version 1.46.0 (50665)
  Chromium Engine Version 125.0.6422.142
• Method of installation: npm
• Swagger-UI version: 5.17.14
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

import "swagger-ui-react/swagger-ui.css";

Simple importing this file into a Next.js (v14.1.4) causes a crash.

Syntax error: postcss-simple-vars: <css input> Undefined variable $vocabulary

  1 | .models .json-schema-2020-12:not(.json-schema-2020-12--embedded) > .json-schema-2020-12-head .json-schema-2020-12__title:first-of-type {
> 2 |   font-size: 16px;
    |  ^
  3 | }
  4 | 

[bastiengrignon]

I'm having the same issue using Vite + Mantine, using sass preprocessor !

[dandelionn]

Hello! I am using Nextjs 14 + Mantine. A temporary solution for me is to:

• copy this swagger-ui.css file
• find and comment this CSS lines:

 .swagger-ui .json-schema-2020-12-keyword--\$vocabulary ul {
    margin: 0 0 0 20px;
    border-left: 1px dashed rgba(0, 0, 0, .1);
}

.swagger-ui .json-schema-2020-12-\$vocabulary-uri {
    margin-left: 35px;
}

.swagger-ui .json-schema-2020-12-\$vocabulary-uri--disabled {
    -webkit-text-decoration: line-through;
    text-decoration: line-through;
} 

• Import the file directly in the component import './swagger.css' instead of import 'swagger-ui-react/swagger-ui.css';
• Also I am using dark mode and I import a css file found on the internet for this. Not sure of the original source, but it might be this: SwaggerDark

[bastiengrignon]

Hello! I am using Nextjs 14 + Mantine. A temporary solution for me is to:

• copy this swagger-ui.css file
• find and comment this CSS lines:

 .swagger-ui .json-schema-2020-12-keyword--\$vocabulary ul {
    margin: 0 0 0 20px;
    border-left: 1px dashed rgba(0, 0, 0, .1);
}

.swagger-ui .json-schema-2020-12-\$vocabulary-uri {
    margin-left: 35px;
}

.swagger-ui .json-schema-2020-12-\$vocabulary-uri--disabled {
    -webkit-text-decoration: line-through;
    text-decoration: line-through;
} 

• Import the file directly in the component import './swagger.css' instead of import 'swagger-ui-react/swagger-ui.css';
• Also I am using dark mode and I import a css file found on the internet for this. Not sure of the original source, but it might be this: SwaggerDark

@dandelionn Thanks a lot for this workaround !