|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- # string-quotes
-
- Specify single or double quotes around strings.
-
- <!-- prettier-ignore -->
- ```css
- a[id="foo"] { content: "x"; }
- /** ↑ ↑ ↑ ↑
- * These quotes and these quotes */
- ```
-
- Quotes within comments are ignored.
-
- <!-- prettier-ignore -->
- ```css
- /* "This is fine" */
- /* 'And this is also fine' */
- ```
-
- Single quotes in a charset @-rule are ignored as using single quotes in this context is incorrect according the [CSS specification](https://www.w3.org/TR/CSS2/syndata.html#x57).
-
- <!-- prettier-ignore -->
- ```css
- @charset "utf-8"
- /* fine regardless of configuration */
- ```
-
- The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix most of the problems reported by this rule.
-
- ## Options
-
- `string`: `"single"|"double"`
-
- ### `"single"`
-
- Strings _must always_ be wrapped with single quotes.
-
- The following patterns are considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a { content: "x"; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a[id="foo"] {}
- ```
-
- The following patterns are _not_ considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a { content: 'x'; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a[id='foo'] {}
- ```
-
- <!-- prettier-ignore -->
- ```css
- a { content: "x'y'z"; }
- ```
-
- ### `"double"`
-
- Strings _must always_ be wrapped with double quotes.
-
- The following patterns are considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a { content: 'x'; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a[id='foo'] {}
- ```
-
- The following patterns are _not_ considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a { content: "x"; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a[id="foo"] {}
- ```
-
- <!-- prettier-ignore -->
- ```css
- a { content: 'x"y"z'; }
- ```
-
- ## Optional secondary options
-
- ### `avoidEscape`: `true|false`, defaults to `true`
-
- Allows strings to use single-quotes or double-quotes so long as the string contains a quote that would have to be escaped otherwise.
-
- For example, with `"single", { "avoidEscape" : false }`.
-
- The following patterns are considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a { content: "x'y'z"; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a[id="foo'bar'baz"] {}
- ```
-
- The following patterns are _not_ considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a { content: 'x'; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a[id='foo'] {}
- ```
|