Added PostCSS Support [fixes #37] #80

lordgiotto · 2017-01-28T15:41:17Z

Requirements

✓ Filling out the template is required. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion.
✓ All new code requires tests to ensure against regressions

Description of the Change

I added PostCSS scope checks to provider, in order to enable language-postcss to be autocompleted through this provider.

Alternate Designs

The alternative could be use language-css while using PostCSS, but the programming experience would be really awful.

Benefits

Enables language-postcss to be completed trough autocomplete-css provider. Everybody who use postcss can take advantages of both postcss syntax highlight and autocompletition.
Fixes #37.

Possible Drawbacks

PostCSS is not a real syntax, but a collection of plugins: it's impossible to anticipate the exact configuration of the user, so the PostCSS support should be improved gradually to cover most of the possible scenarios.

Applicable Issues

There is room for improvement: a better veriables support, prevents display: var(--b) to be autocompleted in display: var(--block) (now it's a general problem, the same happens with display: $b -> display: $block)

pixxx · 2017-02-25T11:57:53Z

This works for me, just saying! And thanks!!!

eseQ · 2017-02-26T11:18:19Z

Ok, and how long we need wait for release?

pixxx

Still works for me after updating 0.15.1. No more travis.yml file the rest is the same.

50Wliu · 2017-03-06T21:03:01Z

This is on my TODO list. Have some other things I'd like to get to first though.

lordgiotto · 2017-04-27T13:34:31Z

Please let me know if a rebase (or some modifications) is eventually needed when you will decide to merge :)

50Wliu · 2017-05-25T18:45:11Z

lib/provider.coffee


    isAtBeginScopePunctuation = hasScope(scopes, 'punctuation.section.property-list.begin.bracket.curly.css') or
      hasScope(scopes, 'punctuation.section.property-list.begin.bracket.curly.scss') or
+      hasScope(scopes, 'punctuation.section.property-list.begin.bracket.curly.postcss') or
+      hasScope(scopes, 'punctuation.section.property-list.begin.postcss') or


Does PostCSS really use both punctuation variants?

Honestly I don't remember, I developer it long time ago, but if I did so, surely it's there for a reason: i'll check and figure it out. In your opinion it's not needed?

Sorry, I forgot a rebase conflict here :)

Ok, i figured it out: yes, it's needed. Otherwise it fails two tests:

"does not autocomplete property names when preceding a {"

"does not autocomplete property names when immediately after a }"

I also attach a screenshot to prove it:

50Wliu · 2017-05-25T18:46:53Z

spec/provider-spec.coffee

@@ -8,6 +8,9 @@ packagesToTest =
  Less:
    name: 'language-less'
    file: 'test.less'
+  PostCSS:
+    name: 'language-postcss'
+    file: 'test.css'


Should be test.postcss.

@50Wliu That confused moment, postcss can be usual *.css file and *.postcss to

Yes I know, but I'd like it to be explicit as possible.

Sure, i'll do it now :)

50Wliu · 2017-05-29T03:00:53Z

lib/provider.coffee


    isAtBeginScopePunctuation = hasScope(scopes, 'punctuation.section.property-list.begin.bracket.curly.css') or
-      hasScope(scopes, 'punctuation.section.property-list.begin.bracket.curly.scss')
+      hasScope(scopes, 'punctuation.section.property-list.begin.bracket.curly.scss') or
+      hasScope(scopes, 'punctuation.section.property-list.begin.bracket.curly.postcss') or


These scopes are not used by PostCSS.

Yeah, I know, punctuation.section.property-list.begin.bracket.curly.postcss is not currently used by language-post css, but I thought that probably it's the scope it should use, so I left it to be future-proof. Also language-css used punctuation.section.property-list.begin. in the past before atom 1.15 and then deprecated it.

However I can remove it, let me know :)

Ok, sorry for the delay, removed it! Let me know if I can do anything else.

50Wliu · 2017-05-29T03:01:01Z

lib/provider.coffee

    isAtEndScopePunctuation = hasScope(scopes, 'punctuation.section.property-list.end.bracket.curly.css') or
-      hasScope(scopes, 'punctuation.section.property-list.end.bracket.curly.scss')
+      hasScope(scopes, 'punctuation.section.property-list.end.bracket.curly.scss') or
+      hasScope(scopes, 'punctuation.section.property-list.end.bracket.curly.postcss') or


eseQ · 2017-05-31T04:24:14Z

I tested it 2 days and did not see any bags. Only specific moment for postscss plugins, for example:
i have postcss-short and can use position: absolute 0 0 0 0, while i print something after position value whatever atom show me about 'absolute'. (sorry for my English, that heavy to explain)

eseQ

I tested it 2 days and did not see any bags

lordgiotto · 2017-06-02T15:04:04Z

@50Wliu I made all requested changes (despite what github says) ;)
Can I do something else, or that's good to you?

50Wliu · 2017-06-02T22:49:59Z

Yep, I'm aware. I will be taking another look at this again shortly.

but I thought that probably it's the scope it should use, so I left it to be future-proof

You could submit a PR to language-postcss changing it 😉. We've been working on trying to standardize most of the CSS scopes lately, which is why there's lots of TODOs in autocomplete-css to remove old scopes.

Also, I just merged a PR, and it looks like there's conflicts again. Sorry about that!

yzalvov · 2017-06-04T12:32:45Z

Hey guys. Sorry for a newby question. But how can I install this PR on my local version of Atom? So I could use and test it. Thank you very much in advance!
@lordgiotto and thank you very much!

lordgiotto · 2017-06-04T19:47:02Z

@50Wliu Rebased 😉
@whynotthough You are welcome 😄 Simply clone my repo into ~/dev/packages/autocomplete-css and switch to postcss branch: then start atom in development mode withatom -d

eseQ · 2017-07-10T05:38:48Z

any updates?

50Wliu · 2017-07-10T19:44:57Z

No updates. Still on my radar.

lordgiotto · 2017-07-11T23:53:59Z

@50Wliu Can I do something more? I noticed github erroneously displays that there's still one change to fulfill your review, but that's not true :)

50Wliu · 2017-07-12T02:29:33Z

Yeah, I hope to re-review this by the end of the week, at which point I'll update the "changes requested" status if necessary. Just got back from vacation and am still catching up on what happened while I was gone.

50Wliu · 2017-07-17T18:21:01Z

Looks pretty low-risk to me. Thanks @lordgiotto! However, please note that you'll probably still be responsible for the maintenance of this feature since the Atom team doesn't use or maintain language-postcss.

eseQ · 2017-07-18T04:08:24Z

@lordgiotto, @50Wliu thanks for your work! My congratulations.

Zalaski · 2017-08-13T20:00:56Z

Hi all,

I'm still having this issue; when PostCSS is my syntax, autocomplete is not functioning for properties. I understand a fix was implemented here, and I've updated to Atom 1.19.0 on MacOS, so maybe I've missed a step.

Autocomplete works again if I set the syntax to CSS, but then syntax for mixins are no longer highlighted.

I'm relatively new to web development, so please let me know what more information you would need from my end, as I'm not sure what to provide as of right now.

Any help would be greatly appreciated.

50Wliu · 2017-08-13T20:46:36Z

@Zalaski I believe PostCSS support is only on Atom 1.20.0 beta.

Zalaski · 2017-08-13T21:37:33Z

@50Wliu Thanks for clarification, could you suggest how I can implement the changes on my end? I'm also new to Git, but I'm assuming Pull request/config changes, or would you advise that I just wait till 1.20.0 enters the Stable channel?

50Wliu · 2017-08-13T22:42:33Z

I'd advise just waiting.

eseQ · 2017-08-21T03:53:37Z

@Zalaski you can update autocomplete directly.

50Wliu · 2017-08-21T13:06:43Z

@dictory I wouldn't recommend that unless you know exactly what you're doing - that will override the bundled version, which commonly causes hard-to-diagnose bugs.

eseQ · 2017-08-22T09:57:02Z

@50Wliu yes, you are right. I just wanted say about that opportunity.

jessy1092 · 2017-09-13T04:47:41Z

Works perfect on Atom 1.20. Thanks @50Wliu @lordgiotto 💯

rodrigojcmello · 2017-09-14T01:03:13Z

no sugarss support? 😢

50Wliu added needs-review needs-testing labels Jan 29, 2017

pixxx approved these changes Mar 6, 2017

View reviewed changes

50Wliu mentioned this pull request Apr 27, 2017

Need PostCSS support like SCSS and Less #37

Closed

50Wliu reviewed May 25, 2017

View reviewed changes

lordgiotto force-pushed the postcss branch from 852d670 to 2c1ca37 Compare May 28, 2017 19:02

50Wliu suggested changes May 29, 2017

View reviewed changes

eseQ approved these changes May 31, 2017

View reviewed changes

lordgiotto added 5 commits June 4, 2017 21:11

Added postCSS scope checks to provider

b7fae8d

Prevents variables declatarion to be completed as properties

ef1a4d9

Added PostCSS to spec packages, and test it like scss/less

2bfc6bc

Added language-postcss to travis and appveyor configs

3142173

Renamed postcss spec filename

f8bead6

lordgiotto force-pushed the postcss branch from 25a2eb9 to f8bead6 Compare June 4, 2017 19:16

50Wliu approved these changes Jul 17, 2017

View reviewed changes

50Wliu merged commit b34394e into atom:master Jul 17, 2017

jessy1092 mentioned this pull request Sep 13, 2017

Code completion doesn't give any suggestions azat-io/atom-language-postcss#2

Open

Added PostCSS Support [fixes #37] #80

Added PostCSS Support [fixes #37] #80

Conversation

lordgiotto commented Jan 28, 2017 • edited

Requirements

Description of the Change

Alternate Designs

Benefits

Possible Drawbacks

Applicable Issues

pixxx commented Feb 25, 2017

eseQ commented Feb 26, 2017

pixxx left a comment

Choose a reason for hiding this comment

50Wliu commented Mar 6, 2017

lordgiotto commented Apr 27, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eseQ May 26, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eseQ commented May 31, 2017

eseQ left a comment

Choose a reason for hiding this comment

lordgiotto commented Jun 2, 2017

50Wliu commented Jun 2, 2017 • edited

yzalvov commented Jun 4, 2017

lordgiotto commented Jun 4, 2017 • edited

eseQ commented Jul 10, 2017

50Wliu commented Jul 10, 2017

lordgiotto commented Jul 11, 2017

50Wliu commented Jul 12, 2017

50Wliu commented Jul 17, 2017

eseQ commented Jul 18, 2017

Zalaski commented Aug 13, 2017

50Wliu commented Aug 13, 2017

Zalaski commented Aug 13, 2017

50Wliu commented Aug 13, 2017

eseQ commented Aug 21, 2017

50Wliu commented Aug 21, 2017

eseQ commented Aug 22, 2017

jessy1092 commented Sep 13, 2017

rodrigojcmello commented Sep 14, 2017

lordgiotto commented Jan 28, 2017 •

edited

eseQ May 26, 2017 •

edited

50Wliu commented Jun 2, 2017 •

edited

lordgiotto commented Jun 4, 2017 •

edited