Split Less and SCSS parsing into different parsers #2844

lydell · 2017-09-16T13:34:54Z

Now, .less files are always parsed with postcss-less, and .scss files
areare always parsed with postcss-scss. This:

Is less hacky.
Is meant to avoid issues like Do not lowercase LESS variable names #2829.
Is probably more performant.

parser: "postcss" and --parser postcss continue to work like before:
First trying postcss-less, and if that fails, postcss-scss, unless a
regex says that we should try in the opposite order. The new values for
the parser option are "postcss-less" and "postcss-scss".

Now, .less files are always parsed with postcss-less, and .scss files areare always parsed with postcss-scss. This: - Is less hacky. - Is meant to avoid issues like prettier#2829. - Is probably more performant. `parser: "postcss"` and `--parser postcss` continue to work like before: First trying postcss-less, and if that fails, postcss-scss, unless a regex says that we should try in the opposite order. The new values for the parser option are "postcss-less" and "postcss-scss".

azz · 2017-09-16T15:22:50Z

I feel like the parser option is a bit of a leaky abstraction. It would be nice if the option was called language or something like that so you can pass --language scss and we'd figure out which parser to use.

`parser`	`language`
babylon	javascript
flow	flow
typescript (actually `typescript-eslint-parser`)	typescript
graphql	graphql
postcss	css
postcss-scss	scss
postcss-less	less
parse5	html
json (actually `babylon.parseExpression`)	json

Unfortunately changing this would obviously be an API breaking change.

lydell · 2017-09-16T15:38:01Z

I agree that the parser option is strange and could be better. But I don't think it should affect this PR in any way.

Btw, the postcss parts of your table should look more like this:

`parser`	`language`
postcss (actually postcss-less+postcss-scss+postcss-media-query-parser+postcss-selector-parser+postcss-values-parser)	css
postcss-scss (actually like css but minus postcss-less)	scss
postcss-less (actually like css but minus postcss-scss)	less

vjeux · 2017-09-16T15:39:17Z

Agreed, parser was designed before we intended to support more than just pure JavaScript.

I think that it makes sense to introduce a language option and we figure out a way to make it backwards compatible.

vjeux · 2017-09-16T15:47:37Z

website/pages/playground/index.html

@@ -359,7 +359,7 @@
        </div>
        <div class="options last">
          <label>--trailing-comma <select id="trailingComma"><option value="none">none</option><option value="es5">es5</option><option value="all">all</option></select></label>
-          <label>--parser <select id="parser"><option value="babylon">babylon</option><option value="flow">flow</option><option value="typescript">typescript</option><option value="postcss">postcss</option><option value="json">json</option><option value="graphql">graphql</option></select></label>
+          <label>--parser <select id="parser"><option value="babylon">babylon</option><option value="flow">flow</option><option value="typescript">typescript</option><option value="postcss">postcss</option><!-- TODO: Enable these when prettier@>1.7.0 has been released. <option value="postcss-less">postcss-less</option><option value="postcss-scss">postcss-scss</option>--><option value="json">json</option><option value="graphql">graphql</option></select></label>


Exclusive >1.7.0 is technically correct 😉

vjeux · 2017-09-16T15:49:14Z

tests_integration/__tests__/__snapshots__/early-exit.js.snap

@@ -84,7 +84,7 @@ Format options:

  --no-bracket-spacing     Do not print spaces between brackets.
  --jsx-bracket-same-line  Put > on the last line instead of at a new line.
-  --parser <flow|babylon|typescript|postcss|json|graphql>
+  --parser <flow|babylon|typescript|postcss|postcss-less|postcss-scss|json|graphql>


Suggestion: let's just name it less and scss. And allow both postcss and css to work and only mention css in the docs.

We're unlikely going to ever support anything else than postcss to parse our CSS and at the end of the day the users don't care, they just want to parse their css/less/sass.

Do you mean that it is unlikely that we'll support two different parsers for the same language, like we do for JS with both Babylon and Flow? Or that it is unlikely that we'll every switch from postcss to something else?

I have been researching switching away from postcss:

css-tree for CSS

less or gonzales-pe for Less

dart-sass or gonzales-pe for SCSS (see also JS API: Create a method to get SASS AST sass/dart-sass#88)

If we did switch away, we probably wouldn't want to keep supporting postcss (another advantage of using --language)

Yeah, what I mean is that we just name it with the language, so we don't get stuck to a specific parser if we want to switch.

azz · 2017-09-16T15:50:55Z

But I don't think it should affect this PR in any way.

Indeed. Opened #2846 for discussion.

Conflicts: src/cli-constant.js tests_integration/__tests__/__snapshots__/early-exit.js.snap

lydell · 2017-09-25T16:34:54Z

Updates:

postcss-less → less
postcss-scss → scss
deprecated postcss in favor of css

suchipi · 2017-09-25T16:57:52Z

website/static/playground.js

@@ -238,6 +238,8 @@ function replaceHash(hash) {

 function getCodemirrorMode(options) {
  switch (options.parser) {
+    // TODO: Remove the "postcss" case when prettier@>1.7.0 is released.


Is this a prerelease task, or a postrelease task? (Or doesn't matter)

* Split Less and SCSS parsing into different parsers Now, .less files are always parsed with postcss-less, and .scss files areare always parsed with postcss-scss. This: - Is less hacky. - Is meant to avoid issues like prettier#2829. - Is probably more performant. `parser: "postcss"` and `--parser postcss` continue to work like before: First trying postcss-less, and if that fails, postcss-scss, unless a regex says that we should try in the opposite order. The new values for the parser option are "postcss-less" and "postcss-scss". * Remove postcss from package.json since it is not used * Rename parser-less to less and parser-scss to scss * Deprecate parser:postcss in favor of parser:css * Fix CSS tests

ismail-syed · 2017-11-07T21:58:45Z

@lydell As per your comment: deprecated postcss in favor of css
Do the parser docs need updating?

lydell · 2017-11-07T22:39:41Z

@ismail-syed They do, well spotted!

Remove postcss from package.json since it is not used

c479e4e

vjeux reviewed Sep 16, 2017

View reviewed changes

azz mentioned this pull request Sep 16, 2017

Consider replacing the "parser" option with "language" #2846

Open

Merge branch 'master' into separate-less-scss-parsers

ba235cd

Conflicts: src/cli-constant.js tests_integration/__tests__/__snapshots__/early-exit.js.snap

lydell mentioned this pull request Sep 25, 2017

1.7.1 Release #2887

Closed

Rename parser-less to less and parser-scss to scss

3fd3e5b

Deprecate parser:postcss in favor of parser:css

00fc5b0

lydell force-pushed the separate-less-scss-parsers branch from 6332d17 to 00fc5b0 Compare September 25, 2017 16:37

suchipi reviewed Sep 25, 2017

View reviewed changes

Fix CSS tests

ea63fd2

suchipi approved these changes Sep 25, 2017

View reviewed changes

lydell merged commit c6bac7c into prettier:master Sep 26, 2017

lydell deleted the separate-less-scss-parsers branch September 26, 2017 05:08

lydell mentioned this pull request Sep 30, 2017

feat: support markdown #2943

Merged

8 tasks

ikatyang mentioned this pull request Oct 19, 2017

feat(prettier): update to v1.7.x DefinitelyTyped/DefinitelyTyped#20708

Merged

8 tasks

kaelig mentioned this pull request Nov 1, 2017

Warning: parser with value "postcss" is deprecated. Use "css", "less" or "scss" instead. hugomrdias/prettier-stylelint#3

Open

ismail-syed mentioned this pull request Nov 7, 2017

Update prettier & fix parser warnings hugomrdias/prettier-stylelint#6

Closed

ismail-syed mentioned this pull request Nov 15, 2017

Bump prettier and fix parser warnings ismail-syed/prettier-stylelint-formatter#1

Merged

lock bot added the locked-due-to-inactivity Please open a new issue and fill out the template instead of commenting. label Jan 19, 2019

lock bot locked as resolved and limited conversation to collaborators Jan 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Split Less and SCSS parsing into different parsers #2844

Split Less and SCSS parsing into different parsers #2844

lydell commented Sep 16, 2017

azz commented Sep 16, 2017

lydell commented Sep 16, 2017

vjeux commented Sep 16, 2017

vjeux Sep 16, 2017

azz Sep 16, 2017

vjeux Sep 16, 2017

lydell Sep 16, 2017

azz Sep 16, 2017

vjeux Sep 16, 2017

azz commented Sep 16, 2017 •

edited

Loading

lydell commented Sep 25, 2017

suchipi Sep 25, 2017

lydell Sep 25, 2017

ismail-syed commented Nov 7, 2017

lydell commented Nov 7, 2017

Split Less and SCSS parsing into different parsers #2844

Split Less and SCSS parsing into different parsers #2844

Conversation

lydell commented Sep 16, 2017

azz commented Sep 16, 2017

lydell commented Sep 16, 2017

vjeux commented Sep 16, 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

Choose a reason for hiding this comment

azz commented Sep 16, 2017 • edited Loading

lydell commented Sep 25, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ismail-syed commented Nov 7, 2017

lydell commented Nov 7, 2017

azz commented Sep 16, 2017 •

edited

Loading