Multiple CSS stylesheets

[ephing]

As far as I can tell, Kobayashi only supports a single CSS stylesheet for an entire project.

There will be times though when a user might want multiple global CSS sheets, perhaps 1 global sheet, with different subdirectories having a different sheet, or just 1 page within a directory to use a different set of sheets.

Ergo, I propose the following changes/additions to the toml config:

1. css_paths key (replacing css_path), which refers to a list rather than a single string

   [project]
   css_paths = ["/style.css", "/other.css"]

2. creating toml tables for subdirectories

Consider the following directory:

build/
└── index.html
└── style.css
└── hello_world
    └── index.html
    └── style.css

We could specify a different set of stylesheets like so:

[project]
css_paths = ["/style.css"]

[hello_world]
css_paths = ["/hello_world/style.css"]
css = "replace"

The css key could have the following values:

• replace: This directory and all subdirectories will use the stylesheets specified for this directory rather than any parent directories. In the example, /hello_world/index.html would use only /hello_world/style.css.
• append: This directory and all subdirectories will use its specified stylesheets in addition to its parents stylesheets. In the example, hello_world/index.html would use both /style.css and /hello_world/style.css.
• inherit: This directory would inherit its stylesheets from its parents. This value would be the default (i.e. you would not need to specify values for css_paths or css at all), so I do not know why you would ever need to specify it. Ergo, you could probably just not support it as a possible value

You might also want to be able to do this for specific pages:

[project]
css_paths = ["/style.css"]

[hello_world]
css_paths = ["/hello_world/style.css"]
css = "replace"

["hello_world/index.html"]
css_paths = ["https://external.sheet.css"]
css = "append"

In this, /hello_world/index.html would use the external sheet in addition to /hello_world/style.css, but all other files in the hello_world directory would only use /hello_world/style.css.

Alternatively, you could add kby syntax to do the page-specific css:

# Title
|"https://external.sheet.css"; append|

As an aside, you can probably use all of this exact same structure if you add support for external scripts

[alexacallmebaka]

I have been brewing up a similar idea in my head for the past couple months. I like your proposed solution a lot, and will tackle this at the same time I tackle #4. Thanks Ethan! 😁