|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- # function-name-case
-
- Specify lowercase or uppercase for function names.
-
- <!-- prettier-ignore -->
- ```css
- a { width: calc(5% - 10em); }
- /** ↑
- * This function */
- ```
-
- Camel case function names, e.g. `translateX`, are accounted for when the `lower` option is used.
-
- The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
-
- ## Options
-
- `string`: `"lower"|"upper"`
-
- ### `"lower"`
-
- The following patterns are considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a {
- width: Calc(5% - 10em);
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- width: cAlC(5% - 10em);
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- width: CALC(5% - 10em);
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- background: -WEBKIT-RADIAL-GRADIENT(red, green, blue);
- }
- ```
-
- The following patterns are _not_ considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a {
- width: calc(5% - 10em);
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- background: -webkit-radial-gradient(red, green, blue);
- }
- ```
-
- ### `"upper"`
-
- The following patterns are considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a {
- width: Calc(5% - 10em);
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- width: cAlC(5% - 10em);
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- width: calc(5% - 10em);
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- background: -webkit-radial-gradient(red, green, blue);
- }
- ```
-
- The following patterns are _not_ considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a {
- width: CALC(5% - 10em);
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- background: -WEBKIT-RADIAL-GRADIENT(red, green, blue);
- }
- ```
-
- ## Optional secondary options
-
- ### `ignoreFunctions: ["/regex-as-string/", /regex/, "non-regex"]`
-
- Ignore case of function names.
-
- For example, with `"lower"`.
-
- Given:
-
- ```
- ["some-function", "/^get.*$/"]
- ```
-
- The following patterns are considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a {
- color: sOmE-FuNcTiOn();
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- color: some-other-function();
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- color: GetColor();
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- color: GET_COLOR();
- }
- ```
-
- The following patterns are _not_ considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a {
- display: some-function();
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- display: getColor();
- }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a {
- display: get_color();
- }
- ```
|