ryboe / css3 Goto Github PK

View Code? Open in Web Editor NEW

189.0 13.0 28.0 11.59 MB

The most complete CSS support for Sublime Text

License: MIT License

Python 10.65% CSS 89.35%

css cssnext sublime-text sublime sublime-text-3 postcss-cssnext syntax-highlighting completions css3

css3's People

Contributors

Stargazers

Watchers

css3's Issues

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;
}

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.

Not colourised

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

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

: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 :)

@keyframe identifier matching deprecated tags

Integration with SCSS possible?

Is it possible to get CSS3 completions working in SCSS?

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!

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?

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 :)

!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 :)

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

user-select property

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

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

spaces between property name and the colon

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

Css Hex colors.

i dont know why some hex codes are yellow.

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

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.

weird autocomplete

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

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)

Good Job !!!

I just want say thx for the Plugin.

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.

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

Known Issues 1

in default css package it works

match more -webkit-prefixed pseudo-classes

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

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

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.

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

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.

why can not support "-moz-transform" ?

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

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)

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"

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

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.

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 ;)

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!

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

annoying pink background

it's Non-standard but does job i need

just remove pink background

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.

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.

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/

Can't install.

Duplicate css autocomplete

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

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?

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.

SVG

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

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.

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?

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!

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.

Attribute Selectors

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

But this works as expected:

ryboe / css3 Goto Github PK

css3's People

Contributors

Stargazers

Watchers

Forkers

css3's Issues

Recommend Projects

Recommend Topics

Recommend Org