Comments (4)
Honestly, Iām very interested in css-nesting spec. However, I do not have a plan to support specs not listed in CSS WG. Because this list is CSS (or CSS3). A CSS-ish file that depends on PostCSS plugin is not CSS.
If you create a standalone plugin that supports css-nesting spec for filetype postcss
, you can use with :set filetype css.postcss
. This is a suggested way to support such syntax in Vim, I think.
from vim-css3-syntax.
Sorry for the late reply, but here it goes: That makes sense, but I'm not familiar with Vim syntax files. I tried to read through NeoVim's builtin one for CSS, SCSS and SASS but didn't get how they make it work.
Could you give some pointers on how to do this?
from vim-css3-syntax.
The mustache Vim syntax uses html.mustache
or html.handlebars
for extending HTML syntax. This is a good example, I think.
from vim-css3-syntax.
So I finally got around to do this, and after some tinkering (and much confusion) I got this:
" Copied from cssDefinition contains in css.vim syntax file
syntax cluster postcssSelector contains=cssTagName,cssAttributeSelector,cssClassName,cssIdentifier,cssAtRule,cssAttrRegion,css.*Prop
syntax cluster postcssProperties contains=cssValue.*,cssColor,cssURL,cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape,cssVendor,cssHacks,cssNoise
" Add the nesting operator, and the compund selectors (which for some reason
" didn't work without this)
syntax match postcssNestedSelector "&"
syntax cluster postcssSelector add=postcssNestedSelector,cssSelectorOp
" This is based on @media rule, which also has nested CSS declerations
syntax region postcssNesting matchgroup=cssSelectorOp start="&" matchgroup=cssBraces end=/\ze{/ skipwhite skipnl contains=@postcssSelector nextgroup=cssDefinition
" Overriding the bultin in definition means all references are kept. For
" example, all @-rules that have nested stuff does this.
syntax region cssDefinition transparent matchgroup=cssBraces start="{" end="}" contains=@postcssProperties,@postcssSelector,cssComment,postcssNesting fold
" Highlight the nesting operator like the other compund selectors
highlight default link postcssNestedSelector cssSelectorOp
From what I can tell it does the right thing, tested with:
@media (max-width: 900px) {
h1 {
font-size: 2rem;
}
}
& .foo {
font: serif;
& .bar[lang=sv] + main {
font: serif;
& .baz {
font: serif;
}
}
}
form,
.testing ~ span {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@media (max-width: 900px) {
.spam {
display: grid;
}
@media (max-width: 900px) {
.spam {
display: grid;
}
}
}
& .card[foo=bar],
& + .tag ~ div {
max-height: 200px;
}
}
What do you think? What else is needed to make this production ready?
from vim-css3-syntax.
Related Issues (20)
- fit-content() function is not highlighted correctly
- Some CSS functions not highlighted correctly HOT 1
- cssnext support? HOT 1
- Distribute as Vim 8.0 package HOT 2
- `system-ui` font family
- Extremely slow on startup HOT 2
- touch-action property
- Makes file very slow to open HOT 1
- flex-grow not highlighted HOT 1
- ease-in-out not highlighted HOT 1
- make it support for qss HOT 4
- Highlight for nested properties? HOT 2
- WebVTT ::cues HOT 1
- Incorrect highlighting for: space-{around|evenly|between} and ease-in-out HOT 4
- space-between not highlight HOT 1
- Submit these improvements as PRs to the official Vim CSS syntax file HOT 1
- Inline styles syntax highlight HOT 1
- master -> main HOT 1
- Color preview is also applied to CSS property names HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vim-css3-syntax.