When using @media in a CSS file, the code block is not syntax highlighted

See below

It would be cool if in the symbols list, keywords like @media etc. could be highlighted (i.e. bold), reverse-indented or contrasted in another way.

This would vastly improve overview when working on huge CSS files that contain large blocks of repeated statements, which just are separated by media queries.

Adopting code idention alone doesn't always work because it relies on correct indention, which often isn't the case.

Hi

When I try to auto complete any css line I get the below error

Failure running “CodeCompletion CSS Properties”.
/Users/shadow/Library/Application Support/TextMate/Managed/Bundles/Bundle Support.tmbundle/Support/shared/lib/codecompletion.rb:319:in to_ary': undefined methodmap' for nil:NilClass (NoMethodError)
from /Users/shadow/Library/Application Support/TextMate/Managed/Bundles/Bundle Support.tmbundle/Support/shared/lib/codecompletion.rb:88:in initialize' from /Users/shadow/Library/Application Support/TextMate/Managed/Bundles/Bundle Support.tmbundle/Support/shared/lib/codecompletion.rb:60:innew'
from /Users/shadow/Library/Application Support/TextMate/Managed/Bundles/Bundle Support.tmbundle/Support/shared/lib/codecompletion.rb:60:in `plist'
from CodeCompletion CSS Properties:3

I trying to uninstall, restart & install the bundle but still no luck.

While reading through CSS file I noticed that svg tag was not colored as others: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L58

It seems that svg is missing in this regular expression: https://github.com/textmate/css.tmbundle/blob/master/Syntaxes/CSS.plist#L711, unlike audio and canvas, which are present there and are colored green as well.

It would be good to compare existing regular expression against a credible list like this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

However, HTML5 allows the creation of custom elements: http://www.html5rocks.com/en/tutorials/webcomponents/customelements/. In this case shall we have a discussion of whether to:

• complete the list with missing tags or
• make a new regular expression to adjust to custom tags?

When writing CSS code, it no longer automatically appends the semicolon.

Here is how it was if I typed "background:":

element { background: ; }

and now it no longer adds that semicolon:

element { background: }

This was a huge time saver and it's odd that it stopped working. Any ideas?

Thanks,
Matt

https://github.com/textmate/css.tmbundle/blob/master/info.plist#L5-L8 says that someone named "Thomas Aylott" is still the main contact. He has clearly abandoned the bundle to its fate.

Hyphenated words should scope the hyphen as punctuation.

For example:

.my-class {
    font-weight: bold;
}

Here both my-class and font-weight are treated as a single unit when using option left/right.

Css Bundle not work in SCSS or SASS files

The current color list in the CSS Bundle is outdated as it lists named colours as invalid (i.e. aliceblue, royal blue, etc.)

Updating to the latest working draft (https://www.w3.org/TR/css-color-4/) would be great as it'll simplify the named color section. It also includes 'currentcolor' which is already implemented in most major browsers.

I have minified css file that is not highlighted correctly, the whole file is mark as comment, here is sample using lightshow.

When using the Insert Color command in a CSS or SCSS file to get the color picker, Textmate freezes completely for a minute or two.
After that, the color picker appears (with a system boink sound)

Can't see any log messages about it in System log.

Latest Textmate 2 version

I hope that this is the right place for the report.

Please see the comments here for details about the bug:
https://github.com/D-Programming-Language/dlang.org/pull/834/files

Apologies if this is not the right place for this question.

I'm working on a bundle for a language which is a superset of CSS and it seemed logical to not repeat any of the work already done in the CSS bundle.

However, I'm finding that it's harder than I assumed to leverage the existing rules.

For example, I'd like to add some new rules to apply syntax highlighting to expressions like the following:

#avatar[width] == #avatar[height];
#avatar[border-radius] == #avatar[width] / 2;

How would I implement this without needing to redefine all of the CSS selectors? Is there a better way than just defining rules for the new operators on their own?

My attempts to use a begin/end rule have been unsuccessful and using captures doesn't seem well suited.

A second example is that I'd like rules for some new pseudo selectors:

#logo[center] == ::window[center];

This has proven surprisingly difficult for some reason, with my new rule apparently conflicting with some existing ones, especially within a new @-rule:

@stay button[width], ::window[width];

I tried creating a begin/end rule for this and tried to include my new rule and source.css inside patterns but again could only get one of them to work by removing the other.

There are many more features but I feel that these simple examples epitomize the main issues I'm having.

I have some experience with the .tmLanguage format and have tried several approaches now, but I'm hoping that some insight regarding the examples above will help me to understand something fundamental that I'm missing.

More specifically, I'd love to know how to work best with this existing bundle.

I should note that I'm also targeting some other editors where I believe that some newer features of the syntax definitions are unavailable.

Thanks.

Mac OS X Yosemite has rearranged the modal window to the Color Picker, and this is now affects the ability to use the eye dropper or the color wells, as they now conflict with the position of the Cancel and OK buttons. Clicking the eye dropper does nothing until hitting cancel, upon which the eye dropper tool is active.

Example

In OS X Mountain Lion, selecting "CSS -> Insert Color...", or using the default shortcut of cmd-shift-c would bring up the system colour chooser. Now, when doing the same in OS X Mavericks, the TextMate window defocuses for a moment, then refocuses, but the colour chooser never appears. This happens both in CSS files (when using the menu item or the shortcut) and in other files (when using the menu item).

From @dstorey on December 26, 2015 10:43

Works correctly in the parser for linting and in Intellisense, but isn't syntax highlighted as missing from css.plist

Syntax should be:

namespace
: NAMESPACE_SYM S* [namespace_prefix S_]? [STRING|URI] S_ ';' S*
;
namespace_prefix
: IDENT
;

My knowledge of the syntax of css.plist and regexp isn't good enough at the moment to work out how to add the optional IDENT, as there is no predefined ident like there is for strings, etc. I know how to highlight the @namespace and string component though.

I figure the IDENT should be coloured the same as @namespace as that is how the media type token is coloured for '@media media-type'

Copied from original issue: microsoft/vscode#1659

In 1.x a return between {} was treated specially giving you an indented caret on a blank line, this no longer works in the alpha.

This is a complicated issue that was explained best in http://lists.macromates.com/textmate/2012-January/034108.html

Live example

Markdown

```css
:root {
    --ThemeColor: #3c790a;
    --primaryColor: #b4d455;
}

ui-widget {
    background-color: var(--ThemeColor);
    color: var(--primaryColor);
}

:root {
    --ThemeColor: #3c790a;
    --primaryColor: #b4d455;
}

ui-widget {
    background-color: var(--ThemeColor);
    color: var(--primaryColor);
}

Screenshot in case it changes

The following regex change creates an unbalanced stdin:
8aad91d#L0R339

Only the opening bracket is returned instead of both opening and closing brackets.

So the stdin value of the meta.property-list.css scope in the following rule:
#selector {
property:value;
}

returns:
{
property:value;

and should instead return:
{
property:value;
}

Selectors starting with square brackets like [class*="wp-block"] { … } are common in Gutenberg-enabled Wordpress theme CSS files. (They match any CSS classes starting with "wp-block…" without having to know class names added later.)

However they have a confusing display in the symbols list:

Note:
Classical selector (green) works flawlessly and its idention is consistent with code.
Square brackets selector (red) kinda works, but first bracket and indention are stripped, which is confusing when one needs to rely on indention structure.