CSS support - being able to call an array of CSS files in the config

[Kurtmcmurt]

🐛 Bug Report

When trying to pass an array of CSS files to the config

theme: {
  customCss: require.resolve('./src/css/custom.scss'),
},

I initially started the project including 4 different CSS files in an array like this:

theme: {
  customCss: [
    require.resolve('./src/css/custom.scss'),
    require.resolve('./src/css/bootstrap.scss'),
    require.resolve('./src/css/somethingelse.scss'),
    require.resolve('./src/css/somethingelseelse.scss')
  ]
},

This was working for some time and then all of a sudden stopped. I performed some local sanity techniques like clearing the cache, deleting the build folder and the .docusuaurus dir to no avail.

This works in test. It only failed during build.

It could be really useful to have the option of including global css/sass files as an array. Or some validation to prevent bad usage.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

Assign array of CSS files to your custom CSS name. This was working as of Alpha.61, it probably wasn't ever meant to work:

theme: {
  customCss: [
    require.resolve('./src/css/custom.scss'),
    require.resolve('./src/css/bootstrap.scss'),
    require.resolve('./src/css/somethingelse.scss'),
    require.resolve('./src/css/somethingelseelse.scss')
  ]
},

Expected behavior

Run yarn build and the project should build. Instead, the project complains module './0.9374897.js' (example filename) can't be found.

Actual Behavior

Run yarn build and the project should build. Instead, the project complains module './0.9374897.js' (example filename) can't be found.

Your Environment

Node JS v12
Chrome
Latest Visual Studio Code
iTerm 2
Zshell

Reproducible Demo

If on the latest version of Docusuaurus 2, it should be simple to add some code and quickly test to see the issue. Not a huge problem and I don't see many people coming across this issue. Maybe it would be useful to add some type acceptance information in the docs?

[slorber]

Agree we should support an array, someone wants to contribute that? Should be pretty easy.

@Kurtmcmurt it would surprise me if this works in test (test or dev???), and not in prod through, as the code is currently:

[ghost]

Hey @slorber,

I'm a final year student of a masters program called IT and Management. As part of my studies, I'm encouraged to contribute to an open source project. A friend mentioned docusaurus and I really like the project.

It seems like this issue might be a good place to start to learn about the project and I would be super excited to be assigned to it and try and contribute!

[slorber]

Thanks @KarlisKarlstrom, welcome on board!

You can submit a PR, this contribution should be quite easy to get started

Useful tips:

• Add support for array of strings
• We still need to support a single string for retrocompatibility
• Need to handle the themeConfig Joi validation (unit tests on that part are welcome)
• Dogfooding: I suggest we use the array version on Docusaurus website itself by splitting website/src/css/custom.css into multiple smaller css files (for example, we could extract docsearch.css or something)

[ghost]

Sorry for the late response. I have implemented changes to index.js and I seem to be able to push an array of css files declared in docusaurus.config file. I tried this out by extracting docsearch.css as suggested by @slorber, as well as passing several other smaller css files. Thanks for all the tips, I'll submit a PR shortly for review 👍 !

However, I'm struggling with understanding the validation process as I have no previous experience with joi (checked tutorials though). To validate the array support addition for theme: customCss, should I create a new default schema for presets and try different test cases (customCss as array/single string/empty)? Or is there a better/more correct way of achieving this? Thankful for any help with this.

[ghost]

I see that there already is a PR for this now, #3474 . Will follow to see if I can pick up on how the validation should be implemented.

[slorber]

Hi @KarlisKarlstrom , sorry for the delay, was on holiday.

I'm going to merge the customCss feature asap as it's needed to migrate ReactNative website. Validation is already done in the PR.

However, if you are interested to contribute, we could see how to split the CSS file of docusaurus 2 website in multiple parts