ryboe/css3

The most complete CSS support for Sublime Text

CSS3

The most complete CSS and PostCSS-cssnext support for Sublime Text.

Features

• Absurdly Complete: I mined the entire set of draft specs and supported everything. Some of this stuff won't be implemented in browsers for years. If it's in the spec, it's supported.
• Future Proof: PostCSS-cssnext is fully supported. If you use cssnext, you can use futuristic CSS like...
  • nesting
  • custom selectors
  • custom properties
  • custom media queries
  • CSS Modules
  • lots more
• Productive: Offers a full set of completions for properties, descriptors, @-rules, functions, and selectors. The completions are highly specific to what you're writing.
• Modern: Bad, old CSS is flagged. Unnecessarily prefixed properties aren't highlighted. Catches lots of mistakes. Encourages best practices.
• Faithful: Follows the W3C specs extremely closely.
• Fast: CSS3 has been designed for Sublime's new custom regex engine, which is crazy fast. The syntax highlighting typically takes less than 100ms, even for very large CSS files.

Before & After

Installation

1. Install Package Control

2. Install CSS3

   Platform	Install Command
   Mac	cmd+shift+p   → Package Control: Install Package → CSS3
   Linux/Windows	ctrl+shift+p → Package Control: Install Package → CSS3

3. (Required) Disable the default CSS package

   Platform	Disable Command
   Mac	cmd+shift+p   → Package Control: Disable Package → CSS
   Linux/Windows	ctrl+shift+p → Package Control: Disable Package → CSS

   

   Make sure you don't have any open files set to the default CSS syntax (bottom-right) or you may get an error message.

4. (Strongly Recommended) Enable completions inside completions

   By default, Sublime will not offer completions inside completions. In other words, the completions menu is suppressed when you're tabbing through a snippet. This prevents a lot of CSS3 completions from appearing. Add these keys to your User Settings to fix this:

   "auto_complete_commit_on_tab": true,
   "auto_complete_with_fields": true,

5. (Recommended) Hide CSS completions from Emmet

   If you have Emmet installed, its completions will drown out the carefully researched, standards-based completions offered by this package. You can hide Emmet completions for CSS only by adding this line to your Emmet package settings.

   "abbreviation_preview": "markup"

6. (Recommended) Set CSS3 as the default language for .css files

   • Open a .css file.
   • View → Syntax → Open all with current extension as... → CSS3

   

Best Practices

• Always use quotes inside url(). Unquoted URLs are intentionally not highlighted.

Help Me Out!

If you think something's missing, make sure you're not asking for something on this list of bad CSS properties. If it's not on that list, open an issue and I'll investigate. Definitely check out the CONTRIBUTING guidelines before submitting your PR. It could save you a lot of time. I'll be monitoring the specs as they're updated on this W3C feed, but I still need your help. Let's keep bad code out of the Web!

css3's Issues

Asterisk immediately befor property breaks highlighting

Placing an asterisk (*) immediately befor a property, also known as Star Hack, breaks syntax highlighting:
Instead of properties, selectors are recognized again until the next opening (!) braces.

How to showing all CSS properties or value?

Simile Atom

http://stackoverflow.com/questions/24894201/package-for-showing-all-possible-css-values-in-sublime-text-2

No Need For Disabling Emmet

There is no need for completely disabling Emmet.
You can simply disable css part by adding these to Emmet settings:

"show_css_completions": false,
"disable_tab_abbreviations_for_scopes": "source.css"

:before and :after selectors being flagged as deprecated

Hi,
For some reason the pseudo selectors :before and :after are being flagged as deprecated.
If this is a bug which I'm assuming it is as it validates on W3C for CSS3, is their an quick way for me to fix it myself??

Thanks :)

spaces between property name and the colon

adding spaces between property name and the colon makes the value color go away.

The transition property breaks when it's given a comma-separated list.

why can not support "-moz-transform" ?

"-moz-transform" can not be highlighted ! how to solve it ? thanks!

Decimal values in @keyframe definitions not highlighted properly

In an @keyframes definition values including decimals (eg. 33.33% { }) are not highlighted properly. Only the figures after the decimal point are highlighted. Presumably the regex for this is only matching numbers, just needs periods adding.

Attribute Selectors

When there is nothing before attribute selector it is not highlighted:

But this works as expected:

Completion for !important

I know this was already suggested and the issue was closed but it seemed to have been closed due to an unrelated reason.

I'd like to request that !important be added to the completion list because while I am aware that !important is bad practice as a reliance it is sometimes needed and to limit people who write good CSS because there are people who don't is removing practicality of this package.

I switched to this package from the default CSS syntax because it provides more completions such as box-sizing. transition, etc that the default syntax doesn't have. However, not having !important seems like regression to me.

I only use !important when I absolutely have to, such as some jackass throwing !important on their CSS in the plugin/platform code forcing me to do so.

Please, add it to the package so people who are responsible coders are not punished because of the irresponsible coders.

Disabling default CSS package prevents Goto symbol in project from working

As per the recommendations I disabled the default CSS package. However, when this is done, 'Goto symbol in project' stops working (one of the finest features of Sublime Text 3).

Is this a known side-effect? Is there a workaround or is it a case of having CSS3 and CSS to get that working but accepting the duplicate auto-complete recommendations?

Duplicate css autocomplete

Duplicate CSS2 on autocomplete.. the first one always return without :;

How about support svg element style?

.node circle {
  cursor: pointer;
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font-size: 11px;
}

path.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

Can't install.

Support for SCSS?

Is it possible (and in-scope) of this plugin to add support for SCSS? It's a superset of CSS, and all current syntax highlighters of SCSS also suffer from the same defect which this CSS3 plugin solves, so I guess it's in-scope. If not, then perhaps it can be done as a fork of this project?

Also, I believe you'll be able to solve Known Issue 1 (#5) with SCSS support, as it has nested styles.

@keyframe identifier matching deprecated tags

weird autocomplete

when i type top and hit tab a get text-outline: ;
on left letter-spacing: ;

Please release validator.py as a separate package

validator.py registers an extremely expensive event, on_selection_modified_async, which runs all the time, every where and in general just slows down ST.
I tend to avoid any package that registers on_selection_modified, on_selection_modified_async, on_modified and on_modified_async since these are firing quite frequently.
I would rather have the validator as a SublimeLinter plugin since all those linting and validating events are grouped into one.

No Syntax Highlighting of the First Element Within a Media Query in Sublime Text 3

Heya.

I've noticed that for some reason the styling of the first element within a media query (in Sublime Text 3) tends to leave it completely unhighlighted for syntax. Outside of a media query seems fine.

Quite simply, something like this works fine:

/* HEADER */
header {
    overflow: hidden;
}

But something like this leaves "header" unstyled according to syntax:

@media all and (min-width: 240px) {
    /* HEADER */
    header {
        overflow: hidden;
        }
}

Here are some images to show it in practice:

If you have any questions or need anything clarified, just let me know. =]

Cheers and thanks for the work you've put into this!

max-width value none isn't highlighted

none should be highlighted.

MDN and W3C say that none is a valid value for max-width.

https://developer.mozilla.org/es/docs/Web/CSS/max-width
http://www.w3.org/wiki/CSS/Properties/max-width

Highlighting issues

• "-webkit-tap-highlight" and "-webkit-touch-callout" are not highilighted
• no highlighting of following selector when leaving out the last semicolon in a css block (also in minified css files without line breaks):
  
• "-ms-user-select", "-moz-user-select", "-webkit-user-select" are valid css [reference: http://caniuse.com/#feat=user-select-none]
  
• "appearance" not highlighted/wrongly marked as invalid [reference: http://caniuse.com/#feat=css-appearance]
  
• Pseudo-elements and Pseudo-classes shouldn't be the same color as class-selectors
  

That's it for now ;)

Error when disabling built-in CSS package

Per the install message, I disabled the default CSS package via Package Control->Disable Package->CSS, but when I restart Sublime Text 3 (build 3059 on OS X 10.9.4), I get the following error dialog and the CSS3 doesn't appear to load as the CSS file not longer has syntax coloring:

(I don't have CSS3_Syntax or Emmet installed)

Highlighting Stops if semicolon is missing on last property

Highlighting stops if semicolon is missing on last property in the scope. Please, fix it as it is recommended by most sources to minify the css just remove the last semicolon. I knew that doesn't make big difference but I am used to not put semicolons at the end and I think many others users will also be the same

Autocomplete automatically to press tab key within style tag

In a html file, within of tag <style>, when you press tab key automatically write a word that sublime remember. It's impossible indent a line of code.

Can we have support for CSS variables?

Processors like PostCSS support them.

Example

:root {
    --image-path: 'path/to/module/images';
    --align: 'padding-top';
    --width: 100px;
}

.module {
    width: var(--width);
}

.module--special {
    --image-path: 'another/path/to/images';

    & > .module-Nav {
        background-image: url(var(--image-path, 'images')/nav-image.png);
        var(--align, padding-bottom): 10px;
    }
}

More examples in the official draft: https://drafts.csswg.org/css-variables/

annoying pink background

it's Non-standard but does job i need

just remove pink background

Integration with SCSS possible?

Is it possible to get CSS3 completions working in SCSS?

Not colourised

    @media (min-width: 1600px) {
      html.naked-theme .pmd-HomepageHead--ads {
        padding-right: 420px;
      }
    }

Highlight and autocomplete for object-fit CSS3 property

Please, add suport for object-fit property, is not so common now but I think is time :)

Highlighting breaks if colon isn't immediately after property

The syntax highlighting breaks if the colon following a property has any spacing or tabs. For example, this works:

.a-class {
    background-color: rgb(64,64,64);
}

But the following breaks and the highlighting for values fails:

.a-class {
    background-color        : rgb(64,64,64);
}

It was mentioned, a few details about "best practices" having an effect on how this wonderful syntax highlighter was designed and while I respect this, forcing best practices itself isn't a good practice. Some designers/developers have their own coding style and having to deviate from that for the quick readability syntax highlighting offers is frustrating.

I personally line up columns of properties and classes, spacing and sorting things based on context while developing, and then clean, minify, and adhere to "best practices" for release.

Custom Element Support

Custom elements are currently not being highlighted at all.

If anything with a -(hyphen) such as x-app or paper-material was highlighted as a base element it would be much more consistent with default elements, without removing error correction by highlighting misspelled base elements, as an element without a hyphen couldn't be a custom element.

match more -webkit-prefixed pseudo-classes

right now, we're only matching two with this regex

(:)-webkit-(?:full-screen|any)\b

Kills autocomplete in non CSS files

Wile editing JS file, the ST autocomplete stopped to work. If I press Ctrl+Space in status bar No available completion message shows.

After disabling plugins, I found that the CSS3 is a bad boy.

Sublime version: 3
Installed by Package Control
Other installed plugins:

• Git
• GutterColor
• DockBlockr

missing some properties like `user-select`

http://peter.sh/experiments/vendor-prefixed-css-property-overview/

list of unsupported properties

background-blend-mode
background-repeat-x
background-repeat-y
buffered-rendering
clip
color-rendering
enable-background
fill
fill-opacity
fill-rule
glyph-orientation-horizontal
glyph-orientation-vertical
marker
marker-end
marker-mid
marker-start
paint-order
shape-rendering
stop-color
stop-opacity
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
text-anchor
text-line-through-color
text-line-through-mode
text-line-through-style
text-line-through-width
text-overline-color
text-overline-mode
text-overline-style
text-overline-width
text-rendering
text-underline-color
text-underline-mode
text-underline-style
text-underline-width
touch-action
vector-effect
-webkit-app-region
-webkit-appearance
-webkit-aspect-ratio
-webkit-background-clip
-webkit-background-composite
-webkit-background-origin
-webkit-background-size
-webkit-border-after
-webkit-border-after-color
-webkit-border-after-style
-webkit-border-after-width
-webkit-border-before
-webkit-border-before-color
-webkit-border-before-style
-webkit-border-before-width
-webkit-border-end
-webkit-border-end-color
-webkit-border-end-style
-webkit-border-end-width
-webkit-border-fit
-webkit-border-horizontal-spacing
-webkit-border-radius
-webkit-border-start
-webkit-border-start-color
-webkit-border-start-style
-webkit-border-start-width
-webkit-border-vertical-spacing
-webkit-box-align
-webkit-box-decoration-break
-webkit-box-direction
-webkit-box-flex
-webkit-box-flex-group
-webkit-box-lines
-webkit-box-ordinal-group
-webkit-box-orient
-webkit-box-pack
-webkit-box-reflect
-webkit-box-shadow
-webkit-clip-path
-webkit-column-break-after
-webkit-column-break-before
-webkit-column-break-inside
-webkit-font-smoothing
-webkit-highlight
-webkit-hyphenate-character
-webkit-line-box-contain
-webkit-line-break
-webkit-line-clamp
-webkit-locale
-webkit-logical-height
-webkit-logical-width
-webkit-margin-after
-webkit-margin-after-collapse
-webkit-margin-before
-webkit-margin-before-collapse
-webkit-margin-bottom-collapse
-webkit-margin-collapse
-webkit-margin-end
-webkit-margin-start
-webkit-margin-top-collapse
-webkit-mask-box-image
-webkit-mask-box-image-outset
-webkit-mask-box-image-repeat
-webkit-mask-box-image-slice
-webkit-mask-box-image-source
-webkit-mask-box-image-width
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat-x
-webkit-mask-repeat-y
-webkit-max-logical-height
-webkit-max-logical-width
-webkit-min-logical-height
-webkit-min-logical-width
-webkit-padding-after
-webkit-padding-before
-webkit-padding-end
-webkit-padding-start
-webkit-perspective-origin-x
-webkit-perspective-origin-y
-webkit-print-color-adjust
-webkit-rtl-ordering
-webkit-ruby-position
-webkit-tap-highlight-color
-webkit-text-combine
-webkit-text-decorations-in-effect
-webkit-text-emphasis
-webkit-text-emphasis-color
-webkit-text-emphasis-position
-webkit-text-emphasis-style
-webkit-text-fill-color
-webkit-text-orientation
-webkit-text-security
-webkit-text-stroke
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-user-drag
-webkit-user-modify
-webkit-user-select
-webkit-writing-mode
epub-caption-side
epub-hyphens
epub-text-combine
epub-text-orientation
epub-text-transform
epub-word-break
epub-writing-mode
-webkit-alt
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-box-sizing
-webkit-column-axis
-webkit-column-progression
-webkit-dashboard-region
-webkit-grid
-webkit-grid-area
-webkit-grid-aut-o-columns
-webkit-grid-aut-o-flow
-webkit-grid-aut-o-rows
-webkit-grid-column-end
-webkit-grid-column-start
-webkit-grid-row-end
-webkit-grid-row-start
-webkit-grid-template
-webkit-grid-template-areas
-webkit-grid-template-columns
-webkit-grid-template-rows
-webkit-justify-self
-webkit-marquee
-webkit-marquee-direction
-webkit-marquee-increment
-webkit-marquee-repetition
-webkit-marquee-speed
-webkit-marquee-style
-webkit-mask-source-type
-webkit-opacity
-webkit-region-break-after
-webkit-region-break-before
-webkit-region-break-inside
-webkit-scroll-snap-coordinate
-webkit-scroll-snap-destination
-webkit-scroll-snap-points-x
-webkit-scroll-snap-points-y
-webkit-scroll-snap-type
-webkit-shape-image-threshold
-webkit-shape-margin
-webkit-shape-outside
-webkit-svg-shadow
-webkit-text-decoration
-webkit-text-decoration-color
-webkit-text-decoration-line
-webkit-text-decoration-style
-webkit-touch-callout
-webkit-transform-origin-x
-webkit-transform-origin-y
-webkit-transform-origin-z
-moz-appearance
-moz-binding
-moz-border-bottom-colors
-moz-border-end
-moz-border-end-color
-moz-border-end-style
-moz-border-end-width
-moz-border-left-colors
-moz-border-right-colors
-moz-border-start
-moz-border-start-color
-moz-border-start-style
-moz-border-start-width
-moz-border-top-colors
-moz-box-align
-moz-box-direction
-moz-box-flex
-moz-box-ordinal-group
-moz-box-orient
-moz-box-pack
-moz-control-character-visibility
-moz-float-edge
-moz-force-broken-image-icon
-moz-image-region
-moz-margin-end
-moz-margin-start
-moz-math-display
-moz-math-variant
-moz-orient
-moz-osx-font-smoothing
-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-moz-padding-end
-moz-padding-start
-moz-script-level
-moz-script-min-size
-moz-script-size-multiplier
-moz-stack-sizing
-moz-tab-size
-moz-text-size-adjust
-moz-transform
-moz-user-focus
-moz-user-input
-moz-user-modify
-moz-user-select
-moz-window-shadow
-apple-dashboard-region
-o-border-image
-o-device-pixel-ratio
-o-focus-opacity
-o-link
-o-link-source
-o-mini-fold
-o-object-fit
-o-object-position
-o-tab-size
-o-table-baseline
-o-transform
-o-transform-origin
-o-transition
-o-transition-delay
-o-transition-duration
-o-transition-property
-o-transition-timing-function
-wap-accesskey
-wap-input-format
-wap-input-required
-wap-marquee-dir
-wap-marquee-loop
-wap-marquee-speed
-wap-marquee-style
-xv-interpret-as
-xv-phonemes
-xv-voice-balance
-xv-voice-duration
-xv-voice-pitch
-xv-voice-pitch-range
-xv-voice-rate
-xv-voice-stress
-xv-voice-volume
-ms-animation
-ms-animation-delay
-ms-animation-direction
-ms-animation-duration
-ms-animation-fill-mode
-ms-animation-iteration-count
-ms-animation-name
-ms-animation-play-state
-ms-animation-timing-function
-ms-backface-visibility
-ms-content-zoom-chaining
-ms-content-zoom-limit
-ms-content-zoom-limit-max
-ms-content-zoom-limit-min
-ms-content-zoom-snap
-ms-content-zoom-snap-points
-ms-content-zoom-snap-type
-ms-content-zooming
-ms-flex
-ms-flex-align
-ms-flex-direction
-ms-flex-flow
-ms-flex-item-align
-ms-flex-line-pack
-ms-flex-negative
-ms-flex-order
-ms-flex-pack
-ms-flex-positive
-ms-flex-preferred-size
-ms-flex-wrap
-ms-font-feature-settings
-ms-grid-columns
-ms-grid-rows
-ms-high-contrast-adjust
-ms-hyphenate-limit-chars
-ms-hyphenate-limit-lines
-ms-hyphenate-limit-zone
-ms-ime-align
-ms-scroll-chaining
-ms-scroll-limit
-ms-scroll-limit-x-max
-ms-scroll-limit-x-min
-ms-scroll-limit-y-max
-ms-scroll-limit-y-min
-ms-scroll-rails
-ms-scroll-snap-points-x
-ms-scroll-snap-points-y
-ms-scroll-snap-type
-ms-scroll-snap-x
-ms-scroll-snap-y
-ms-scroll-translation
-ms-text-combine-horizontal
-ms-touch-select
-ms-user-select
-ms-wrap-margin
-moz-background-inline-policy
marker-offset
-moz-transform-origin
-moz-perspective-origin
-moz-perspective
-moz-transform-style
-moz-backface-visibility
-moz-border-image
-moz-transition
-moz-transition-delay
-moz-transition-duration
-moz-transition-property
-moz-transition-timing-function
-moz-animation
-moz-animation-delay
-moz-animation-direction
-moz-animation-duration
-moz-animation-fill-mode
-moz-animation-iteration-count
-moz-animation-name
-moz-animation-play-state
-moz-animation-timing-function
accelerator
kerning
layout-flow
layout-grid
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
-ms-block-progression
-ms-interpolation-mode
-ms-perspective
-ms-perspective-origin
-ms-touch-action
-ms-transition
-ms-transition-delay
-ms-transition-duration
-ms-transition-property
-ms-transition-timing-function
ruby-overhang
scrollbar3d-light-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-dark-shadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
style-float
text-autospace
text-decoration-blink
text-decoration-line-through
text-decoration-none
text-decoration-overline
text-decoration-underline
text-justify-trim
text-kashida
text-kashida-space
-epub-caption-side
-epub-hyphens
-epub-text-combine
-epub-text-orientation
-epub-text-transform
-epub-word-break
-epub-writing-mode
-webkit-grid-auto-columns
-webkit-grid-auto-flow
-webkit-grid-auto-rows

Removing CSS Package Fails

Hello,
When I attempt to remove the CSS package as suggested:
Mac: cmd+shift+p -> Package Control: Disable Package -> CSS

I get the following error, any thoughts?
Error loading syntax file "Packages/CSS/CSS.tmLanguage": Unable to open Packages/CSS/CSS.tmLanguage

I'm on Sublime Text 3

Thanks

Doesn't highlight next prop correctly if the previous prop doesn't end with a semicolon.

Yes, I've read the BP section (https://github.com/y0ssar1an/CSS3#best-practices) that states "End every property declaration with a semicolon."

However there is a minifier CLI utility (https://www.npmjs.com/package/minifier) that formats the code removing semicolons from the last prop and CSS3 doesn't highlight correctly any more:

Is there a way to change this behavior? Some true/false option in config?

parse_url import error

I noticed this error in the console:

reloading plugin CSS3.validator
Traceback (most recent call last):
  File "/opt/sublime_text/sublime_plugin.py", line 74, in reload_plugin
    m = importlib.import_module(modulename)
  File "./importlib/__init__.py", line 90, in import_module
  File "<frozen importlib._bootstrap>", line 1584, in _gcd_import
  File "<frozen importlib._bootstrap>", line 1565, in _find_and_load
  File "<frozen importlib._bootstrap>", line 1532, in _find_and_load_unlocked
  File "/opt/sublime_text/sublime_plugin.py", line 678, in load_module
    exec(compile(source, source_path, 'exec'), mod.__dict__)
  File "validator in /home/elundmark/.config/sublime-text-3/Installed Packages/CSS3.sublime-package", line 1, in <module>
  File "/opt/sublime_text/sublime_plugin.py", line 678, in load_module
    exec(compile(source, source_path, 'exec'), mod.__dict__)
  File "requests in /home/elundmark/.config/sublime-text-3/Installed Packages/CSS3.sublime-package", line 59, in <module>
  File "/opt/sublime_text/sublime_plugin.py", line 678, in load_module
    exec(compile(source, source_path, 'exec'), mod.__dict__)
  File "requests.models in /home/elundmark/.config/sublime-text-3/Installed Packages/CSS3.sublime-package", line 21, in <module>
ImportError: cannot import name parse_url

ST3 build 3083 Linux (xubuntu 14.10 64-bit)

Disable CSS of Sublime Text 3 get an error

After installed CSS3, when I Disable CSS of Sublime Text 3, which popuped an error but only once. I can't show it again. So strange?

Auto-complete, move the cursor to the right side of the semi-colon.

Here's a suggestion because I think this is kind of annoying.

When I try to auto-complete something, say

margin: auto;

Pressing the TAB key auto-completes like this:

margin: |;

With the cursor blinking to the left side of the semi-colon. Then I type something, then I press the right arrow, then I press ENTER for the next line.

How about, after a few milliseconds, move the cursor to the right side of the semi-colon? Or move it when the plugin activates its lint? Is that possible? Do you think that would help with the workflow?

OR, is there a way to just disable the auto-adding of the semi-colon and let the user do that? Reason, tough subjective, it's faster to type a semi-colon than to chase the right arrow key ;)

Great job on your plugin!

Known Issues 1

in default css package it works

No autocomplete for hex values

It seems that there is kind of a bug or missing feature that all "#112233" values won't get (auto-)completed - when already used somewhere else in the CSS file. When I change the syntax to e.g. "Plain Text" the completion works as expected.
Ctrl+space doesn't work either.

SVG

It seems to me that svg is not supported. Could you resolve it ? Thanks :)

Good Job !!!

I just want say thx for the Plugin.

!important not autocomplete and and automate placing semicolon and colon

Hi, thank you for this extension!
I have small issues:

• !important does not autocomplete
• how to make automatic placement of colon then space and semicolon?
  If that is possible at all :)

Comments Initiated With `Ctrl+/` Lack the Standard Whitespace

When you press Ctrl+/, the comments come out like '/Comment Here/' instead of /* Comment Here */

A simple edit to Comments.tmPreferences fixes this:

17: Change <string>/*</string> to <string>/* </string>
23: Change <string>*/</string> to <string> */</string>

Side Note: Sublime Text 3's default CSS Package has this same issue

translateZ() Property Bug

Hi, I found a bug for the translateZ() property of the transform function. After writing transform: translate, the drop-down list appears with all the options available. If you click on translateZ(), it will output translateX() instead. This happens every time.
Other than that, I find this support really helpful. Cheers!

Css Hex colors.

i dont know why some hex codes are yellow.

Missing clip property from CSS 2.1

I’m not sure why CSS clip property is marked as “unsupported” or “obsolete” in #2, but it’s a part of CSS 2.1 specification with is REC and widely implemented.

Add support for shorthand font property

Would be nice if you could add support for shorthand font property with a proper dispatcher:

As with any shorthand CSS properties, the values which are not set in it are set to their individual initial values, eventually overriding values previously set using non-shorthand properties.

user-select property

user-select property with it's browser prefixes are not supported