Sublime Forum

Color change for CSS Tilde

#1

Within the limitations of necessity… Absolutely no doubt about it! Sublime CSS code hinting is displaying syntax when tilde is used in any CSS adjacent selector. This is not coding that I am famiar with. Why the rainbow effect?

(btw, theme is Seth, same ‘blurt’ with Monokai, etc.)

Jumble-in-the-jungle!

class .c-lightgreen vs.class .c~lightgreen …
1 ) Is Sublime tilde highlight demonstrating a reserved future?
2 ) Any juicy real world context for above syntax - what’s it do?
? - consider ‘expected’ coresponding html composition
? - consider language corollary, perhaps html6/css4 display technology

What we know [Meyer and Weyl, “CSS The Definitive Guide”]…
A. Tilde is a “general-sibling combinator” (page 62). Simply asserts stable parent-sibling relations, and lubes everything else in the surrounding style-machine. :smile_cat:
B. Tilde expresses attribute selectors, matching one word in a space-separated list (page 48).Simply styles an element, when text content of the element includes a specific word. :no_mouth:

Why do Sublime Tildes fancy-up, light-up in the middle of a class selector? Ref:


https://drafts.csswg.org/css-fonts-3/
:satellite:

0 Likes
#2

.c~lightgreen is equivalent to .c ~ lightgreen. The tilde is the general sibling combinator, similar to the adjacent sibling combinator +. The highlighting is correct. If you want to select elements with the class c~lightgreen, you can use an attribute selector: [class~="c~lightgreen"].

3 Likes
#3

ul li / ul > li / ul + ul / ul ~ ul // data == (equals =) / >= / += / ~= string

There is a specific application environment for space-separated and for adjacent combinator operators. I was not aware that the discussed raw tilde is expected in the DOM base HTML/CSS, to provide for the adjacent non-separation or two combined selector element, class or id components, except in the attribute format.

The latter, id components cannot exist as DOM pairs in the style cascade, as the id data component of the attribute cannot pair with an adjacent id data [component] in the DOM. Thus and for the same reason, except in an attribute expression deploying [bracket] and “quote” component isolation, the tilde cannot effectively work without space separation and/or bracket-quote isolation. Those are HTML2-4 and CSS1-3 data-component restrictions, yes?

Those restrictions are the basis for navigation data hierarchy cascades (but that’s getting a whole lot more complicated than we need to get here)?

So what is discussed is a free radical code hinting approach to the casual occurrence of a raw tilde. I had heard years ago in a 3D printing forum in California, that a looser interpretation might be in the mix. Is present in C++ and Javascript, but not in the DOM. That’s why I suggested HTML6/CSS4 plans may be involved in the Sublime Text current code hinting?

0 Likes
#4

I don’t know what to tell you. The highlighting accurately reflects the CSS syntax. I actually tested it in Chrome just to make sure before my previous reply.

1 Like
#5

Thom, your innocent wonder <aside>… :smile:

What I have found over years, is that ‘data-compression’ [selector~selector, etc.] in the CSS ‘model’ will look good if ‘tested’ alone. However, in concert with other CSS constructions, the data components activated by the ‘short-form’ css code always corrupt. For example…

meta http-equiv=“pragma” content=“no-cache”
meta http-equiv=“cache-control” content=“no-cache”
meta http-equiv=“expires” content=“0”
.nav a[data-title]:hover::after { content: attr(data-title); padding: 0; color: #0099FF; font-size: 75%; position: absolute; left: 0vmin; top: -3vmin; white-space: nowrap; }
p class=“nav”
a href="#basics" data-title=“Click!”>BASIC</a /p

That stuffs the data compartment of any device’s memory “FULL” - now, drop a ‘short-form’ squiggly anywhere in there, or anywhere in any other CSS construction, and then your data overflow turns off navigation and the data-title popup. Even with custodial pragma death bed pillows and cushions. Space-quote-bracket separated variables welcome and amenable. Ergo, no cheats!

Above, we reference W3 Fonts Module 3 (pleasant MDN mention), where we still find a static Caucassian font buffer from the dark ages. This is not a reflection that Region 1 Barbarian culture (occupying the Region 3 continents, Americas) is technologically limited, but is to stresss that an Empire Homeland and Colony upgrade would be okay, yes? Asia obviously expands on that. Not sure where the CSS bottleneck occurs, but it may be near or in the same CPU structure that bottlenecks basic language symbols. Limited by each Region’s security and development issues. Albeit, there is much more involved here than DOM selector~selector linguistic compression [aka slang or dirty code]. Just saying…

It would be nice, if Sublime Text did in some way WARNING code hint all the slang dirt that is “out there ” like-it-or-not. Better yet, Linux and Unix could platform formal edge code recognition, in a way that would make this code hinting easy for Sublime Text and all other manufactures (YET ANOTHER W3 PROMISE-pending)! Or perhaps, just as we see something emerging in the Sublime Merge module, there could be a universal and global Edge Mode manufacturing standard. Adjusting for Region, and other factors, naturally. I am certain that the HTML6 technology will see the nefarious BOTTLENECK that is the topic of this thread, disappear forever.

0 Likes
#6

Just to echo what @ThomSmith pointed out, I recently spent a lot of time reading over the CSS specification while implementing a new selector library for Beautiful Soup in Python. In this case, Sublime is treating .c~lightgreen exactly how the CSS specification outlines it. As class tokens are . followed by a valid CSS identifier (which cannot contain special characters such as ~ without using a CSS escape), ~ would be treated as the sibling combinator here, which would cause the variance in highlighting.

You could escape ~ and it should highlight correctly, and work to select the class.

.c-lightgreen { color: lightgreen; }
.c\~lightgreen { color: lightgreen; }

Or as @ThomSmith suggested use an attribute selector with a quoted value:

.c-lightgreen { color: lightgreen; }
[class~="c~lightgreen"] { color: lightgreen; }

I can’t really comment above and beyond Sublime doing anything extra for these cases, only that as far as the specifications are concerned, Sublime is handling this as expected.

2 Likes
#7

Hey echo! Why is “more” the same color, and does that mean the unexpected Named Color attribute conforms correctly to attribute code hinting? Please forgive, you have lost me.

Thank you for deepening the mystery! So now, “lightgreen” that is not an HTML element, nor a CSS operator, nor class, nor ID… “lightgreen” that is a CSS W3 Named Color gets a data handle. Where does that go? Do you vote with another [shrug] “Well, I don’t know.”

[.lost~="meeither"] {background:black;color:black}

Everyone knows… named color data handles are used all the time for… You can’t [this] without [that] and the only way to do [it] is to… Because it is [something] “expected”? NOT!

body~lavenderblush is not the first CSS example that should appear in every O’Reilly book about CSS. Never there. Big question, why? Why is because it lacks any control. As you state, ~=“anything” provides control. However, as you also suggest ~whatever is a sibling combinator, just like ~=“not”.

“as far as specifications are concerned” ???

Still no idea why Subime Text is rocking to jumble in the jungle. Vote for edgy danger color highlights for loose canon code [rs]. Are we watching too much Orangutan Jungle School?

0 Likes
#8

Are you using a different CSS syntax? I believe I’m using the stock CSS syntax, and I’ve cycled through a number of my color schemes, but I don’t get the different colors using escapes.

0 Likes
#9

((macOS 10.14.3 Mac Pro 2018 ST 3.2 Build 3200))

0 Likes
#10

This seems to be a problem with the 3rd party CSS3 package, not the color scheme, default CSS syntax, or Sublime specifically:

0 Likes
#11

Seth.tmTheme edit

		<dict>
		<key>settings</key>
		<dict>
			<key>background</key> <!-- Default background color of the entire view (including gutter and minimap ) -->
				<string>#161618</string>
			<key>foreground</key> <!-- Default foreground color for view - affects file contents, gutter, rulers and guides -->
				<string>powderblue</string> <!-- While editing this string, caret may !! disappear -->
			<key>invisibles</key> <!-- White space characters, ignored unless selected, e.g., empty_space_character "·" -->
				<string>steelblue</string> <!-- preference: "draw_white_space" = "selection" | sets Ruler color -->
			<key>caret</key> <!-- Color of the caret -->
				<string>rosybrown</string>
			<key>lineHighlight</key> <!-- Color of the line the caret is in -->
				<string>#151618</string> <!-- preference: "highlight_line" = "true" -->
			<key>bracketsForeground</key> <!-- * Color of the highlighting(s) selected by bracketOptions -->
				<string>darkgreen</string> <!-- preference: "match_brackets" = "true" -->
			<key>bracketContentsForeground</key> <!-- Color of the highlighting(s) selected by bracketContentsOptions -->
				<string>deepskyblue</string> <!-- preference: "match_brackets" = "true" -->
			<key>tagsForeground</key> <!-- * Color of the highlighting(s) selected by tagsOptions -->
				<string>deepskyblue</string> <!-- preference: "match_brackets" = "true" -->
			<key>findHighlight</key> <!-- Background color of ACTIVE region matching the current search -->
				<string>#00AA00</string>
			<key>findHighlightForeground</key> <!-- Foreground color of regions matching the current search -->
				<string>003366</string>
			<key>gutter</key> <!-- Background color of the gutter -->
				<string>#1C1C1F</string>
			<key>gutterForeground</key> <!-- Foreground color of the gutter, all gutter numbers -->
				<string>darkolivegreen</string>
			<key>selection</key> <!-- Color of the selection regions #003434 008080 is Teal -->
				<string>#003434</string>
			<key>selectionBorder</key> <!-- Color of active selection regions’ border -->
				<string>darkolivegreen</string>
			<key>inactiveSelection</key> <!-- Color of inactive selections background (inactive view) #003417 006400 is DarkGreen -->
				<string>#003417</string>
			<key>guide</key> <!-- Color of the guides displayed to indicate active nesting's levels -->
				<string>deepskyblue</string> <!-- preference: "indent_guide_options" = "draw_normal" -->
			<key>activeGuide</key> <!-- Color of the guide lined up with the caret -->
				<string>khaki</string> <!-- preference:  "indent_guide_options" = "draw_active" -->
			<key>stackGuide</key> <!-- Color of the current guide’s parent guide levels -->
				<string>sienna</string> <!-- preference:  "indent_guide_options" = "draw_active" -->
		</dict>
	</dict>
	<dict><!-- this dict › delete original, place first after settings dict -->
		<key>name</key>
		<string>Comment</string>
		<key>scope</key>
		<string>comment</string>
		<key>settings</key>
		<dict>
			<key>foreground</key>
			<string>seagreen</string>
			<key>background</key><!-- 000000 original too harsh -->
				<string>#161618</string>
		</dict>
	</dict>
	<dict><!-- this dict › not found in Seth original, add to Seth.tmTheme document -->
		<key>name</key>
		<string>Tag</string>
		<key>scope</key>
		<string>brackethighlighter.default</string>
		<key>settings</key>
		<dict>
			<key>foreground</key>
			<string>deepskyblue</string>
		</dict>
	</dict>
	<dict><!-- this dict › not found in Seth original, add to Seth.tmTheme document -->
		<key>name</key>
		<string>Tag</string>
		<key>scope</key>
		<string>meta.tag, declaration.tag</string>
		<key>settings</key>
		<dict>
			<key>foreground</key>
			<string>dodgerblue</string>
		</dict>
	</dict>
0 Likes
#12

Or, is it Mac/ST?

0 Likes
#13

I test[quote=“RiverLeaf, post:12, topic:42841, full:true”]
Or, is it Mac/ST?
[/quote]

I tested this on Mac.

I was only able to reproduce the issue (with escapes) with the CSS3 package I saw in your package list. If you use the default CSS syntax, \~ should highlight correctly. It appears the CSS3 syntax package does not handle CSS escapes properly.

0 Likes
#14

I tested this on ST3 though, if you are on ST2, your results may differ.

I see you are on build 3200, so you should be fine.

0 Likes
#15

https://packagecontrol.io/packages/CSS3 … https://github.com/y0ssar1an/CSS3/issues

Please share whatever you found with 1,000-star developer, Ryan Boehning y0ssar1an.

https://packagecontrol.io/packages/CSS3 … https://github.com/y0ssar1an/CSS3/issues

Another familiar solved, lol: No autocomplete for hex values 1,000K stars for every ST developer

CSS3.sublime-package does not handle CSS escapes properly: .class~variable
etc.

Thanks

0 Likes