Prettier-atom: Support formatting CSS

[keithjgrant]

The latest release includes Prettier 1.4.0, which includes support for CSS formatting, but prettier-atom doesn't seem to be running for CSS files. I tried adding source.css to my Scopes list, but that didn't do it.

[robwise]

Yeah, there's a bunch of considerations we need to address in order to make that work. Which we absolutely should do. We probably will want to add a settings section for CSS formatting, such as overriding the default scopes (or changing the existing default scopes?). There also may be special options to pass.

[keithjgrant]

Let me know how I can help out :)

[slightlytyler]

It looks like this got implemented but my css files are not being parsed on save. Any ideas? I just installed prettier-atom fresh and its working with js files

[keithjgrant]

@slightlytyler Can you confirm you’re on prettier-atom 0.33.0?

Also, are you using a Preprocessor? The default value for CSS scopes is just source.css, I had to edit mine to source.css, source.css.postcss, source.css.less, source.css.scss to get it to work for preprocessor files.

[slightlytyler]

@keithjgrant 0.34.0

[keithjgrant]

@slightlytyler also see my edit. I submitted my reply before I meant to :)

[slightlytyler]

@keithjgrant We are using postcss but all the extension are .css

[darahak]

@slightlytyler In the command palette (and from the editor that opened your .css file), run Editor: Log Cursor Scope.

Then copy the one(s) that start with source. and add it to prettier-atom settings in the scope fields. @keithjgrant added source.css.postcss, maybe you're missing this one (it's not there by default).

[robwise]

@darahak Do you think we should add it to our defaults?

[darahak]

@robwise I don't know. I suppose yes, if Prettier supports it, but the README only mentions SCSS and LESS.
Is there a specific syntax for PostCSS? I thought it was just like Babel for CSS.

Disclaimer: I have very limited experience with CSS and preprocessors.

[keithjgrant]

@darahak There’s a syntax highlighter for PostCSS that’s popular — https://atom.io/packages/language-postcss. It adds support for things like nested selectors and some common PostCSS plugins. Prettier’s may not officially support it, but I haven’t noticed any issues; it’s probably going to come down to whether or not you use any odd/custom PostCSS plugins.

It also adds support for SugarSS, which is a Sass-like, white-space-significant PostCSS plugin. I’m not sure whether Prettier would handle that well or not.

[hutch120]

I was getting a popup error prettier-atom failed: No configuration provided for ... somedir\somefile.css.

To fix I had to disable the StyleLint integration option in Settings -> Packages -> prettier-atom.

Stack trace (when StyleLint integration option is enabled):

C:\..\.atom\packages\prettier-atom\dist\executePrettier\handleError.js:55 Error: No configuration provided for C:\..\styles.css
    at module.exports (configurationError.js:8)
    at getConfigForFile.js:46
    at <anonymous>
displayErrorInPopup @ C:\..\.atom\packages\prettier-atom\dist\executePrettier\handleError.js:55
n @ C:\..\.atom\packages\prettier-atom\node_modules\lodash\lodash.min.js:5
(anonymous) @ C:\..\.atom\packages\prettier-atom\node_modules\lodash\lodash.min.js:97
n @ C:\..\.atom\packages\prettier-atom\node_modules\lodash\lodash.min.js:5
(anonymous) @ C:\..\.atom\packages\prettier-atom\node_modules\lodash\lodash.min.js:63
(anonymous) @ C:\..\.atom\packages\prettier-atom\node_modules\lodash\lodash.min.js:49
_callee2$ @ C:\..\.atom\packages\prettier-atom\dist\executePrettier\executePrettierOnBufferRange.js:175
tryCatch @ C:\..\.atom\packages\prettier-atom\node_modules\regenerator-runtime\runtime.js:62
invoke @ C:\..\.atom\packages\prettier-atom\node_modules\regenerator-runtime\runtime.js:296
prototype.(anonymous function) @ C:\..\.atom\packages\prettier-atom\node_modules\regenerator-runtime\runtime.js:114
step @ C:\..\.atom\packages\prettier-atom\node_modules\babel-runtime\helpers\asyncToGenerator.js:17
(anonymous) @ C:\..\.atom\packages\prettier-atom\node_modules\babel-runtime\helpers\asyncToGenerator.js:30

[CodeWithOz]

Thanks @hutch120 !
@robwise @keithjgrant I'm just curious. The description for the StyleLint setting says that prettier-atom will fallback to the defaults if no StyleLint config can be detected. Does this mean that it should normally not throw this error? I just started using prettier so bear with me :relaxed:.