Fix false positives for escaped multi-line URL in string-no-newline

[AlexWayfer]

Clearly describe the bug

I want to split large strings for aesthetic reasons with enabled string-no-newline rule.

There is the quote from the specs, including:

And also: "It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with a backslash ()."

But for some reason escaped newlines are forbidden in Stylelint.

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

string-no-newline

What CSS is needed to reproduce the bug?

background-image: url(
  "data:image/svg+xml;utf8,\
  <svg fill='black' height='24' \
    viewBox='0 0 24 24' width='24' \
    xmlns='http://www.w3.org/2000/svg'\
  ><path d='M7 9l5 5 5-5z'/></svg>"
);

What stylelint configuration is needed to reproduce the bug?

extends: stylelint-config-standard

Which version of stylelint are you using?

9.10.1

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

CLI with stylelint assets/styles/.

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

No.

What did you expect to happen?

No warnings to be flagged.

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

The following warnings were flagged:

 116:197  ✖  Expected line length to be no more than 80 characters                                               max-line-length

[hudochenkov]

Thanks for the report and for using the template.

I can't reproduce this error with the following code:

.hello {
  background-image: url(
    "data:image/svg+xml;utf8,\
    <svg fill='black' height='24' \
      viewBox='0 0 24 24' width='24' \
      xmlns='http://www.w3.org/2000/svg'\
    ><path d='M7 9l5 5 5-5z'/></svg>"
  );
}

Looks like you're also has max-line-length: 80 in your config. I can't reproduce error with this rule enabled as well.

Could you check please what is actual CSS, which triggers warning? Maybe there are many indentation symbols, and line is actually bigger than 80 symbols.

[hudochenkov]

Looks like our demo is misleading, it doesn't show problem, when CLI shows.

For the following CSS:

.hello {
  background-image: url("data:image/svg+xml;utf8,\
	  <svg fill='black' height='24' \
		viewBox='0 0 24 24' width='24' \
		xmlns='http://www.w3.org/2000/svg'\
	  ><path d='M7 9l5 5 5-5z'/></svg>");
}

I got this violation:

2:51  ✖  Unexpected newline in string   string-no-newline

Looks like it's a bug.

As the issue has been labelled "help wanted", please consider contributing a fix.

P. S. In original issue violation is incorrect, which confused me.

[AlexWayfer]

P. S. In original issue violation is incorrect, which confused me.

Yes, my bad, sorry. There was a mess with #4059. But there're still two problems.

[vankop]

@hudochenkov Same problem #4059, postcss does not parse data url node:
Steps to reproduce:

1. lib/rules/max-line-length/tests/index.js

"use strict";

const rule = require("..");
const { messages, ruleName } = rule;

const testUrl = `data:image/svg+xml;utf8, \
      <svg fill='black' height='24' \
        viewBox='0 0 24 24' width='24' \
        xmlns='http://www.w3.org/2000/svg'\
      ><path d='M7 9l5 5 5-5z'/></svg>`;

testRule(rule, {
  ruleName,
  config: [true],

  accept: [
    {
      code: `div { background: "${testUrl}"}`
    },
    {
      code: `div { background: "${encodeURI(testUrl)}"}`
    },
]});

2. run node --inspect-brk node_modules/jest/bin/jest.js --runInBand lib/rules/string-no-newline/__tests__/index.js

3. In debugger add breakpoint/debugger; here
   https://github.com/stylelint/stylelint/blob/master/lib/getPostcssResult.js#L134
   In first run result.result.root.nodes: [], in second run result.result.root.nodes: [Node]

[vankop]

Looks like our demo is misleading, it doesn't show problem, when CLI shows.

For CLI it parses 🙈, but failing after on https://github.com/stylelint/stylelint/blob/master/lib/rules/string-no-newline/index.js#L83 parser returns source string instead of removing \ and newline symbols

[github-actions]

This issue is older than one month. Please ask before opening a pull request, as it may no longer be relevant.

[Mouvedia]

related: postcss/postcss#1349