azat-io / atom-language-postcss Goto Github PK

After update i see "not supported syntax" when try lint my css.

Hi there,

Not sure if this is the expected action, but if I toggle show invisibles in sugarss settings, it enables that option globally (eg. the show invisibles option gets checked in the general settings page)

I'm passing 2 args to a mixin, and it's not highlighting the second arg correctly. Happy to try my hand at fixing this with a little direction (I haven't worked too much with atom syntax highlighters before ✌️ )

invalid illegal class is applied.

An option to highlight .css files would be a nice enhancement.

If you define a mixin like this:

@define-mixin square $dimension {
    width: $dimension;
    height: $dimension;
}

And you want to make use of it like:

.button {
  @mixin square 200px;
}

The px word appears as illegal character.

(Sorry for the sugass thing, ignore it)

Currently only specific font names are highlighted as fonts. All fonts should be highlighted as fonts.

I'll open a PR with this change later this week, I'm just making the issue now so I don't forget.

Example of Current Markup

<div class="line cursor-line" data-screen-row="2">
    <span class="source css postcss">
        <span class="meta property-list postcss">
            <span class="meta property-name postcss">
                <span class="support type property-name postcss">font</span>
            </span>

            <span class="meta property-value postcss">
                <span class="punctuation separator key-value postcss">:</span> 

                <span class="support constant property-value postcss">normal</span> 

                <span class="keyword other unit postcss">12px</span> 

                Segoe UI Semibold, 
                <span class="string quoted double postcss">
                    <span class="punctuation definition string begin postcss">"</span>
                        Segoe UI Semibold
                    <span class="punctuation definition string end postcss">"</span>
                </span>, 

                <span class="string constant font-name postcss">monospace</span>

                <span class="punctuation terminator rule postcss">;</span>
            </span>
        </span>
    </span>
</div>

Example of "Correct" Markup

<div class="line cursor-line" data-screen-row="2">
    <span class="source css postcss">
        <span class="meta property-list postcss">
            <span class="meta property-name postcss">
                <span class="support type property-name postcss">font</span>
            </span>

            <span class="meta property-value postcss">
                <span class="punctuation separator key-value postcss">:</span> 

                <span class="support constant property-value postcss">normal</span> 

                <span class="keyword other unit postcss">12px</span> 

                <span class="string constant font-name postcss">Segoe UI Semibold</span>, 

                <span class="string quoted double postcss">
                    <span class="punctuation definition string begin postcss">"</span>
                        <span class="string constant font-name postcss">Segoe UI Semibold</span>
                    <span class="punctuation definition string end postcss">"</span>
                </span>, 

                <span class="string constant font-name postcss">monospace</span>

                <span class="punctuation terminator rule postcss">;</span>
            </span>
        </span>
    </span>
</div>

Hello, since I updated the plugin the autocomplete features of atom don't work anymore in my .sss files

• Emmet
• Snippets

I was using https://atom.io/packages/language-postcss-sugarss to support the sytax before you added your own support. I want to stick with your since it's not just a copy of sass language syntax support like does this plugin.

However because the scope of the grammar is source.postcss it causes issues with Emmet which is looking for .css to add the support. Could you change the syntax to .source.css.postss or even .source.css.sugarss (it's the one used by the plugin over) ? This should fix Emmet.

As for my snippets, I use .source.postcss and it's not expanding anymore.

# SugarSS: section comment
'.source.postcss, .source.css.sugarss':
  'Section comment':
    'prefix': 'sec',
    'body': """
      /*!==================================================
         #${1:}
         ================================================== */
      ${2:}
    """

A quick fix would be to use postcss sugarss plugin but yours is better in term of support and the syntax highlighting too. If you can fix this it would be great, thanks.

Now we have a very useful plugin for Atom 'PostCSS Syntax'. Any plans about a plugin for VS Code?
Anyway thanks in advance!))

If you chain enough :not() selectors eventually the whole file will become improperly highlighted.

custom-elements-are-block.css

*:not(a):not(abbr):not(acronym):not(address):not(applet):not(area):not(article):not(aside):not(audio):not(b):not(base):not(basefont):not(bdi):not(bdo):not(bgsound):not(big):not(blink):not(blockquote):not(body):not(br):not(button):not(canvas):not(caption):not(center):not(cite):not(code):not(col):not(colgroup):not(command):not(content):not(data):not(datalist):not(dd):not(del):not(details):not(dfn):not(dialog):not(dir):not(div):not(dl):not(dt):not(element):not(em):not(embed):not(fieldset):not(figcaption):not(figure):not(font):not(footer):not(form):not(frame):not(frameset):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(head):not(header):not(hgroup):not(hr):not(html):not(i):not(iframe):not(image):not(img):not(input):not(ins):not(isindex):not(kbd):not(keygen):not(label):not(legend):not(li):not(link):not(listing):not(main):not(map):not(map):not(mark):not(marquee):not(menu):not(menuitem):not(meta):not(meter):not(multicol):not(nav):not(nobr):not(noembed):not(noframes):not(noscript):not(object):not(ol):not(optgroup):not(option):not(output):not(p):not(param):not(picture):not(plaintext):not(pre):not(progress):not(q):not(rb):not(rp):not(rt):not(rtc):not(ruby):not(s):not(samp):not(script):not(section):not(select):not(shadow):not(small):not(source):not(spacer):not(span):not(strike):not(strong):not(style):not(sub):not(summary):not(sup):not(table):not(tbody):not(td):not(template):not(textarea):not(tfoot):not(th):not(thead):not(time):not(title):not(tr):not(track):not(tt):not(u):not(ul):not(var):not(var):not(video):not(wbr):not(xmp) {
    position: relative;
    display: block;
}

results.png

Things like html tags and css property/values are auto-completed both in CSS and Sass, but not in posts files using this syntax mode.
Is this something to be expected in the current implementation or some issue with my editor?

Current setup

• atom v1.7.3
• language-postcss v1.2.0
• postcss-modules-values: v1.1.2
• Webpack with postcss-loader, and css-loader with css-modules enabled.

Syntax highlighting is only provided for known font families. Given font-family: Raleway, Helvetica, Alfa Slab One, sans-serif;, only "Helvetica" and "sans-serif" are highlighted.

When this plugin is enabled, it seems to prevent CSS autocomplete from working. When I have a css file open and I am typing a property the autocomplete does not show suggestions for CSS.

body
  bg[tab]

expands to

body
  background: #000;

Is there a setting to remove the trailing semi-colon?

Thank you for this! Just noticed these...

Missing colorization for these CSS properties:

• align-items
• flex-grow

Missing colorization for these CSS values:

• row
• wrap

We should add to README.md instructions, how to switch default CSS highlighter to PostCSS, because many developers uses .css.

There is very weak syntax highlighting (and broken for sugarss scopes in .vue files) and no autocomplete for SugarSS at all atm.

Is there any hope to see highlighting and autocomplete work how they work in Sass package?

directions on how to fix please?

Parameters passed into a function-like pseudo class cannot be distinguished from the pseudo-class name. For example, in li:nth-child(2n), I cannot target the 2n separate from the rest of the pseudo-class, to color it differently.

Considering writing my own language support for Atom. But the looks of this repository it's no longer maintained. Does anyone know of an actively maintained fork?

@azat-io I noticed you added support for SugarSS in cf06c29…

Does that make my language-postcss-sugarss package obsolete?

Very useful package. Still has some false-positive error highlighting, it seems.

Please see screenshot. Interestingly, add another hyphen and the highlighting picks up normally.

Hi,

Today property recognition is hardcoded.

Is there any way to support defined properties across daleeidd/postcss-define-property ?

Hi,

The css autocomplete stops working after activating this package (working in a .css file)
The Syntax Highlighting works just fine, but now I have to type out everything in css by my own.
Is there a workaround?

Thanks!