ryboe / css3 Goto Github PK
View Code? Open in Web Editor NEWThe most complete CSS support for Sublime Text
License: MIT License
The most complete CSS support for Sublime Text
License: MIT License
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/
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?
I just want say thx for the Plugin.
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
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.
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
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.
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"
adding spaces between property name and the colon makes the value color go away.
Is it possible to get CSS3 completions working in SCSS?
That's it for now ;)
user-select property with it's browser prefixes are not supported
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:
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.
Hi, thank you for this extension!
I have small issues:
.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;
}
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!
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)
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?
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.
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)
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.
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
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.
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!
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.
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.
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.
right now, we're only matching two with this regex
(:)-webkit-(?:full-screen|any)\b
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!
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.
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?
when i type top
and hit tab a get text-outline: ;
on left
letter-spacing: ;
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
"-moz-transform" can not be highlighted ! how to solve it ? thanks!
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.