CSS Modules - CustomClass not applied to <pre>?

[norfali]

Information:

• Prism version: Latest on PrismJS doc page, 1.21.0
• Plugins: CustomClass
• Environment: Browser

Description
I am using CSS Modules so the CustomClass plugin worked a treat (e.g. token___foo) however I noticed that <pre> was still using language-XX rather than language-XX___foo.

Example
Looks like the doc page https://prismjs.com/plugins/custom-class/#example has the same issue as below:

I wonder if a hook is missing as wrap seems to apply for inside the code snippet only.

[RunDevelopment]

This is the intended behavior. Custom class only affects the .token elements generated by Prism.

Also, changing the classes of the <pre>/<code> elements could be troublesome because Custom Class has to know which classes are Prism-specific and which aren't (e.g. <pre class="lang-foo line-numbers user-defined-class">...).
I also want to point out that the language-xxxx class can be inherited. Should the class of the element from which it is inherited be changed as well? Same for other classes like line-numbers.

[norfali]

Thanks @RunDevelopment for a prompt response!

I did notice that every class (except for language-xxxx) is correctly applied even for the line-numbers:

Out of curiosity, what makes makes it troublesome if CustomClass is applied for language-xxxx?

On checking the CSS modules in dev tools:

Disabled

entity: "entity"
function: "function"
header-anchor: "header-anchor"
important: "important"
inserted: "inserted"
italic: "italic"
keyword: "keyword"
language-bash: "language-bash"
language-css: "language-css"
language-html: "language-html"
language-javascript: "language-javascript"
language-js: "language-js"
language-markup: "language-markup"
language-scss: "language-scss"
line-highlight: "line-highlight"
line-numbers: "line-numbers"

Enabled

entity: "entity___TeamID"
function: "function___TeamID"
header-anchor: "header-anchor___TeamID"
important: "important___TeamID"
inserted: "inserted___TeamID"
italic: "italic___TeamID"
keyword: "keyword___TeamID"
language-bash: "language-bash___TeamID"
language-css: "language-css___TeamID"
language-html: "language-html___TeamID"
language-javascript: "language-javascript___TeamID"
language-js: "language-js___TeamID"
language-markup: "language-markup___TeamID"
language-scss: "language-scss___TeamID"
line-highlight: "line-highlight___TeamID"
line-numbers: "line-numbers___TeamID"
line-numbers-rows: "line-numbers-rows___TeamID"

I can see that language-xxxx are part of the CSS modules already.

[RunDevelopment]

I did notice that every class (except for language-xxxx) is correctly applied even for the line-numbers:

What? Whatever is causing this, it's not our Custom Class plugin. It can't do that.

Out of curiosity, what makes it troublesome if CustomClass is applied for language-xxxx?

Currently, there's no (standard) way to change the class names added (or removed) to (or from) the code and pre elements. We'd have to add new functionality to Core specifically for this.

I can see that language-xxxx are part of the CSS modules already.

I'm sorry, What is that supposed to mean? Prism itself can't really handle CSS modules, AFAIK, but I also know almost nothing about CSS modules. Could you please explain what you mean in more detail?

Also, regarding line-numbers___TeamID: The Line numbers plugin won't be active with that class. Are you sure that the plugin still works?

[norfali]

My apologies, @RunDevelopment, for lack of context re:

I'm sorry, What is that supposed to mean? Prism itself can't really handle CSS modules, AFAIK, but I also know almost nothing about CSS modules. Could you please explain what you mean in more detail?

I meant to say that CSS Modules was in place and the scoped class names show that Prism classes are there, I was hoping there was a way to leverage that. But as you indicated, it would require a change in Prism Core.

I wonder if this doc page would benefit from a blurb indicating that the plugin applies to the tokens only?

[RunDevelopment]

I wonder if this doc page would benefit from a blurb indicating that the plugin applies to the tokens only?

That's true. I'll add it.