Issue with HTML in JS syntax

[luwes]

Description

Thanks for a great plugin, this is just what I needed!

The color picker doesn't seem to work anymore in HTML highlighting in a JS file. I am using the JS Custom plugin for highlighting. Is this expected? Thanks!

[facelessuser]

I don't know what the JS custom plugin is, so 🤷🏻 .

Can you provide detailed information so that I can reproduce the situation? The only JavaScript rule we have by default is:

        {
            "name": "JavaScript/JSX",
            "base_scopes": [
                "source.js",
                "source.jsx"
            ],
            "color_class": "css-level-4",
            "scanning": [
                // Covers single and double quoted strings, as well as template strings
                "string.quoted"
            ]
        },

It only scanned colors in quoted content. If it is now using actual HTML highlighting, then the scope would need to be updated to reflect that, or maybe we could get it to work with the original HTML rule since it appears to be using HTML highlighting. I'd have to have a reproducible example.

Anyways, without clear, detailed information on how I would reproduce the issue, there is nothing I can do. Please update your description with copy/pastable code and information that I can use to replicate a failing scenario.

[luwes]

thanks so much for the quick reply. sorry for the little details. it's this plugin https://github.com/Thom1729/Sublime-JS-Custom

with your config snippet I got it working by adding the source.js, etc to the HTML/CSS block. this is awesome, thank you!

// Settings in here override those in "ColorHelper/color_helper.sublime-settings",

{
    "color_rules": [
        {
            "name": "HTML/CSS",
            "base_scopes": [
                "source.css",
                "text.html",
                "source.js",
                "source.ts",
                "source.jsx",
                "source.tsx"
            ],
            "color_class": "css-level-4",
            "scanning": [
                // https://packagecontrol.io/packages/CSS3
                "meta.declaration-list.css -support.type.property-name.css -comment -string",
                // CSS, CSS in HTML etc. (based on: Sublime Default)
                "meta.property-value.css -comment -string",
                // CSS3, CSS3 in HTML etc. (based on: https://packagecontrol.io/packages/CSS3)
                "meta.value.css -comment -string",
                // HTML attributes (based on: Sublime Default)
                "meta.tag.inline.any.html string.quoted -constant.character.entity.html",
                "meta.tag.any.html meta.attribute-with-value.style.html"
            ]
        },
    ]
}

[facelessuser]

Awesome, glad it was an easy fix. We should probably add that to the config by default.