1 | # function-name-case
|
2 |
|
3 | Specify lowercase or uppercase for function names.
|
4 |
|
5 |
|
6 | ```css
|
7 | a { width: calc(5% - 10em); }
|
8 | /** ↑
|
9 | * This function */
|
10 | ```
|
11 |
|
12 | Camel case function names, e.g. `translateX`, are accounted for when the `lower` option is used.
|
13 |
|
14 | The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
|
15 |
|
16 | ## Options
|
17 |
|
18 | `string`: `"lower"|"upper"`
|
19 |
|
20 | ### `"lower"`
|
21 |
|
22 | The following patterns are considered violations:
|
23 |
|
24 |
|
25 | ```css
|
26 | a {
|
27 | width: Calc(5% - 10em);
|
28 | }
|
29 | ```
|
30 |
|
31 |
|
32 | ```css
|
33 | a {
|
34 | width: cAlC(5% - 10em);
|
35 | }
|
36 | ```
|
37 |
|
38 |
|
39 | ```css
|
40 | a {
|
41 | width: CALC(5% - 10em);
|
42 | }
|
43 | ```
|
44 |
|
45 |
|
46 | ```css
|
47 | a {
|
48 | background: -WEBKIT-RADIAL-GRADIENT(red, green, blue);
|
49 | }
|
50 | ```
|
51 |
|
52 | The following patterns are _not_ considered violations:
|
53 |
|
54 |
|
55 | ```css
|
56 | a {
|
57 | width: calc(5% - 10em);
|
58 | }
|
59 | ```
|
60 |
|
61 |
|
62 | ```css
|
63 | a {
|
64 | background: -webkit-radial-gradient(red, green, blue);
|
65 | }
|
66 | ```
|
67 |
|
68 | ### `"upper"`
|
69 |
|
70 | The following patterns are considered violations:
|
71 |
|
72 |
|
73 | ```css
|
74 | a {
|
75 | width: Calc(5% - 10em);
|
76 | }
|
77 | ```
|
78 |
|
79 |
|
80 | ```css
|
81 | a {
|
82 | width: cAlC(5% - 10em);
|
83 | }
|
84 | ```
|
85 |
|
86 |
|
87 | ```css
|
88 | a {
|
89 | width: calc(5% - 10em);
|
90 | }
|
91 | ```
|
92 |
|
93 |
|
94 | ```css
|
95 | a {
|
96 | background: -webkit-radial-gradient(red, green, blue);
|
97 | }
|
98 | ```
|
99 |
|
100 | The following patterns are _not_ considered violations:
|
101 |
|
102 |
|
103 | ```css
|
104 | a {
|
105 | width: CALC(5% - 10em);
|
106 | }
|
107 | ```
|
108 |
|
109 |
|
110 | ```css
|
111 | a {
|
112 | background: -WEBKIT-RADIAL-GRADIENT(red, green, blue);
|
113 | }
|
114 | ```
|
115 |
|
116 | ## Optional secondary options
|
117 |
|
118 | ### `ignoreFunctions: ["/regex-as-string/", /regex/, "non-regex"]`
|
119 |
|
120 | Ignore case of function names.
|
121 |
|
122 | For example, with `"lower"`.
|
123 |
|
124 | Given:
|
125 |
|
126 | ```
|
127 | ["some-function", "/^get.*$/"]
|
128 | ```
|
129 |
|
130 | The following patterns are considered violations:
|
131 |
|
132 |
|
133 | ```css
|
134 | a {
|
135 | color: sOmE-FuNcTiOn();
|
136 | }
|
137 | ```
|
138 |
|
139 |
|
140 | ```css
|
141 | a {
|
142 | color: some-other-function();
|
143 | }
|
144 | ```
|
145 |
|
146 |
|
147 | ```css
|
148 | a {
|
149 | color: GetColor();
|
150 | }
|
151 | ```
|
152 |
|
153 |
|
154 | ```css
|
155 | a {
|
156 | color: GET_COLOR();
|
157 | }
|
158 | ```
|
159 |
|
160 | The following patterns are _not_ considered violations:
|
161 |
|
162 |
|
163 | ```css
|
164 | a {
|
165 | display: some-function();
|
166 | }
|
167 | ```
|
168 |
|
169 |
|
170 | ```css
|
171 | a {
|
172 | display: getColor();
|
173 | }
|
174 | ```
|
175 |
|
176 |
|
177 | ```css
|
178 | a {
|
179 | display: get_color();
|
180 | }
|
181 | ```
|