Less: CssSyntaxError "Unknown word" for "each"

Environments:

• Prettier Version: 1.14.3
• Running Prettier via: CLI, Node.js
• Runtime: Node.js v8
• Operating System: macOS

Steps to reproduce:

From issue raised with Stylelint https://github.com/stylelint/stylelint/issues/3854

Clearly describe the bug

It’s not clear to me in which package this problem is being caused, but when I add stylelint-prettier and enable the 'prettier/prettier': true, then stylelint reports each as CssSyntaxError Unknown word.

Which rule, if any, is the bug related to?

prettier/prettier

What CSS is needed to reproduce the bug?

@selectors-color: primary, secondary, info, success, warning, error, dark, light;

@primary: #007bff;
@secondary: #6c757d;
@info: #17a2b8;
@success: #28a745;
@warning: #ffc107;
@error: #dc3544;
@dark: #343a40;
@light: #f8f9fa;

each(@selectors-color, {
  .bg-@{value} {
    background-color: @@value;
  }
});

What stylelint configuration is needed to reproduce the bug?

/**
 * @file Manages the root configuration settings for project wide stylelint.
 * @module stylelint/root/configuration
 * @version 1.0.0
 * @see {@link https://stylelint.io/} for further information.
 */

module.exports = {
  /**
   * Extend an existing configuration.
   * @type {string|Array.<string>}
   * @see {@link https://github.com/stylelint/stylelint/blob/master/docs/user-guide/configuration.md#extends}
   */
  extends: [
    /**
     * The standard shareable config for stylelint.
     * @type {string}
     * @see {@link https://github.com/stylelint/stylelint-config-standard}
     */
    'stylelint-config-standard',
    /**
     * Turns off all rules that are unnecessary or might conflict with prettier.
     * @type {string}
     * @see {@link https://github.com/shannonmoeller/stylelint-config-prettier}
     */
    'stylelint-config-prettier',
  ],

  /**
   * @type {Array.<string>}
   */
  plugins: [
    'stylelint-prettier',
    'stylelint-no-unsupported-browser-features',
    'stylelint-declaration-strict-value',
  ],

  /**
   * @type {Array.<string>}
   */
  processors: [], // do not include empty

  /**
   * @type {!Object}
   */
  rules: {
    'no-empty-source': null,
    'no-missing-end-of-source-newline': null, // currently has a bug #3428
    'prettier/prettier': true,
    'plugin/no-unsupported-browser-features': [true, {
      severity: 'warning',
    }],
    'scale-unlimited/declaration-strict-value': ['color', {
      ignoreKeywords: 'inherit',
    }],
  },
};

postcss.config.js

const postcssHTML = require('postcss-html');
const postcssURL = require('postcss-url');
const postcssSafe = require('postcss-safe-parser');
const postcssAutoprefixer = require('autoprefixer');

module.exports = {
  plugins:  [postcssHTML, postcssURL, postcssSafe, postcssAutoprefixer],
};

Which version of stylelint are you using?

  "devDependencies": {
    "less": "^3.9.0",
    "postcss": "^7.0.7",
    "postcss-cssnext": "^3.1.0",
    "postcss-html": "^0.34.0",
    "postcss-less": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-safe-parser": "^4.0.1",
    "postcss-sass": "^0.3.5",
    "postcss-scss": "^2.0.0",
    "postcss-syntax": "^0.34.0",
    "postcss-url": "^8.0.0",
    "prettier": "^1.14.3",
    "stylelint": "^9.9.0",
    "stylelint-config-prettier": "^4.0.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-declaration-strict-value": "^1.1.2",
    "stylelint-formatter-pretty": "^1.0.3",
    "stylelint-no-unsupported-browser-features": "^3.0.2",
    "stylelint-prettier": "^1.0.5",
  },

How are you running stylelint: CLI, PostCSS plugin, Node API?

CLI from package.json with "lint:css": "stylelint '**/test.{css,less,vue}'"

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Yes, it’s related to LESS each

What did you expect to happen?

No warnings or error to be flagged.

What actually happened (e.g. what warnings or errors did you get)?

> stylelint '**/test.{css,less,vue}'

SyntaxError: (postcss) CssSyntaxError Unknown word (12:1)
  10 | @light: #f8f9fa;
  11 | 
> 12 | each(@selectors-color, {
     | ^
  13 |   .bg-@{value} {
  14 |     background-color: @@value;
  15 |   }
    at createError (/Users/grahamfairweather/source/i-view-core-x/node_modules/prettier/parser-postcss.js:19093:15)
    at parseWithParser (/Users/grahamfairweather/source/i-view-core-x/node_modules/prettier/parser-postcss.js:19001:11)
    at Object.parse (/Users/grahamfairweather/source/i-view-core-x/node_modules/prettier/parser-postcss.js:19036:12)
    at Object.parse$2 [as parse] (/Users/grahamfairweather/source/i-view-core-x/node_modules/prettier/index.js:7138:19)
    at coreFormat (/Users/grahamfairweather/source/i-view-core-x/node_modules/prettier/index.js:10398:23)
    at format (/Users/grahamfairweather/source/i-view-core-x/node_modules/prettier/index.js:10570:16)
    at formatWithCursor (/Users/grahamfairweather/source/i-view-core-x/node_modules/prettier/index.js:10582:12)
    at /Users/grahamfairweather/source/i-view-core-x/node_modules/prettier/index.js:34924:15
    at Object.format (/Users/grahamfairweather/source/i-view-core-x/node_modules/prettier/index.js:34943:12)
    at /Users/grahamfairweather/source/i-view-core-x/node_modules/stylelint-prettier/stylelint-prettier.js:77:39

Issue was closed https://github.com/stylelint/stylelint/issues/3854#issuecomment-447981053

It’s an error in prettier, which uses an old version of the postcss-less parser, which doesn’t support each.

[yoannmoinet]

Also have this issue, is there any known work-around?

[Xotic750]

I have tried updating the dependency postcss-less to v3.1.4. A change in code is needed to point to the parser const LessParser = require("postcss-less/dist/less-parser"); -> const LessParser = require("postcss-less/lib/lessParser"); one of the major differences that I see when running the tests is the form used for comments goes from // to /* */, which is no biggy. However I see more serious changes, things like

      pre {
    -   .wrap;
    +   @wrap;
      }

      .class {
    -   #my-library > .my-mixin();
    +   @my-library > .my-mixin();
      }

   - @variable: .selector;
    + @variable : .selector .selector;

So it’s not just a simple update of that package.

It could be that other dependencies need updating:

    "postcss-media-query-parser": "0.2.3",
    "postcss-selector-parser": "2.2.3",
    "postcss-values-parser": "1.5.0",

or that API has changed significantly that prettier needs some code change.