Packages: [HTML], [CSS], [JS] Identical scopes for the built-in CSS/JS and in the .css and .js files

Created on 11 Jul 2016  路  4Comments  路  Source: sublimehq/Packages

For example, my script

(function() {
        var widget_id = 825946;
        _shcp = [{
            widget_id: widget_id
        }];
        var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || "en")
            .substr(0, 2).toLowerCase();
        var url = "widget.siteheart.com/widget/sh/" + widget_id + "/" + lang + "/widget.js";
        var hcc = document.createElement("script");
        hcc.type = "text/javascript";
        hcc.async = true;
        hcc.src = ("https:" == document.location.protocol ? "https" : "http") + "://" + url;
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hcc, s.nextSibling);
    })();

in my _html_ file:

HTML scopes

in my _js_ file:

JS scopes

At the text designating same, different scopes, it is excess double work for those who creates color themes. In my opinion, for simplification of work founders of color themes need to make identical scopes for for the built-in _CSS/JS_ and in the .cssand .js files.

Thanks.

Most helpful comment

The scopes are functioning properly. In this case the choices on how you wrote your color scheme are requiring you to add more specific scopes.

The only way to change this would be to change how languages are scoped when embedded in each other, which would break almost every existing color scheme, plus many preferences files and plugins.

If you want, you could maintain your own HTML.sublime-syntax file that clears the HTML scopes when pushing into the JS or CSS syntaxes. You would use the clear_scopes meta pattern. There is documentation about this that will be included in the next dev build.

All 4 comments

They look identical with the default color scheme. The only difference in scope is the base scope - the one inside the HTML script tag has: text.html.basic source.js.embedded.html meta.group.js meta.block.js meta.brackets.js meta.object-literal.js meta.object-literal.key.js and the one in the JS file has source.js meta.group.js meta.block.js meta.brackets.js meta.object-literal.js meta.object-literal.key.js
i.e. the difference being text.html.basic source.js.embedded.html vs source.js

these scopes are correct, but your color scheme for some reason is treating some scopes differently depending on the base scope. It is not extra work for color scheme authors to make the colors identical for JS/CSS in HTML vs JS/CSS standalone files, it is extra work _not_ to IMO.

Are you perhaps using a non-default syntax definition for any of these languages?

@keith-hall, scopes are correct, but there are differences:

i.e. the difference being text.html.basic source.js.embedded.html vs source.js

I have to make my tmTheme file as text.html.basic source.js.embedded.html meta.group.js meta.block.js meta.brackets.js meta.object-literal.js meta.object-literal.key.js, and source.js meta.group.js meta.block.js meta.brackets.js meta.object-literal.js meta.object-literal.key.js. This extra work.

Thanks.

The scopes are functioning properly. In this case the choices on how you wrote your color scheme are requiring you to add more specific scopes.

The only way to change this would be to change how languages are scoped when embedded in each other, which would break almost every existing color scheme, plus many preferences files and plugins.

If you want, you could maintain your own HTML.sublime-syntax file that clears the HTML scopes when pushing into the JS or CSS syntaxes. You would use the clear_scopes meta pattern. There is documentation about this that will be included in the next dev build.

Was this page helpful?
0 / 5 - 0 ratings