Skip to content

Commit cd89e15

Browse files
henryqdineenhenryqdineen
committed
[eslint] no-conflicting-props rule
1 parent 0e437c6 commit cd89e15

File tree

3 files changed

+402
-0
lines changed

3 files changed

+402
-0
lines changed

‎packages/@stylexjs/eslint-plugin/__tests__/stylex-no-conflicting-props-test.js‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
10+
jest.disableAutomock();
11+
12+
const { RuleTester: ESLintTester } = require('eslint');
13+
const rule = require('../src/stylex-no-conflicting-props');
14+
15+
const eslintTester = new ESLintTester({
16+
parser: require.resolve('hermes-eslint'),
17+
parserOptions: {
18+
ecmaVersion: 6,
19+
sourceType: 'module',
20+
ecmaFeatures: {
21+
jsx: true,
22+
},
23+
},
24+
});
25+
26+
eslintTester.run('stylex-no-conflicting-props', rule.default, {
27+
valid: [
28+
{
29+
code: `
30+
import * as stylex from '@stylexjs/stylex';
31+
const styles = stylex.create({
32+
main: { color: 'red' },
33+
});
34+
function Component() {
35+
return <div {...stylex.props(styles.main)} />;
36+
}
37+
`,
38+
},
39+
{
40+
code: `
41+
import * as stylex from '@stylexjs/stylex';
42+
function Component() {
43+
return <div className="foo" />;
44+
}
45+
`,
46+
},
47+
{
48+
code: `
49+
import * as stylex from '@stylexjs/stylex';
50+
function Component() {
51+
return <div style={{ color: 'red' }} />;
52+
}
53+
`,
54+
},
55+
{
56+
code: `
57+
import * as stylex from '@stylexjs/stylex';
58+
const styles = stylex.create({
59+
main: { color: 'red' },
60+
});
61+
function Component() {
62+
return <div {...stylex.props(styles.main)} data-testid="test" />;
63+
}
64+
`,
65+
},
66+
{
67+
code: `
68+
import * as stylex from '@stylexjs/stylex';
69+
const styles = stylex.create({
70+
main: { color: 'red' },
71+
});
72+
function Component() {
73+
return <div {...otherProps} className="foo" />;
74+
}
75+
`,
76+
},
77+
{
78+
code: `
79+
import { props, create } from '@stylexjs/stylex';
80+
const styles = create({
81+
main: { color: 'red' },
82+
});
83+
function Component() {
84+
return <div {...props(styles.main)} />;
85+
}
86+
`,
87+
},
88+
{
89+
options: [{ validImports: ['custom-stylex'] }],
90+
code: `
91+
import * as stylex from 'custom-stylex';
92+
const styles = stylex.create({
93+
main: { color: 'red' },
94+
});
95+
function Component() {
96+
return <div {...stylex.props(styles.main)} />;
97+
}
98+
`,
99+
},
100+
{
101+
options: [{ validImports: [{ from: 'a', as: 'css' }] }],
102+
code: `
103+
import { css } from 'a';
104+
const styles = css.create({
105+
main: { color: 'red' },
106+
});
107+
function Component() {
108+
return <div {...css.props(styles.main)} />;
109+
}
110+
`,
111+
},
112+
],
113+
invalid: [
114+
{
115+
code: `
116+
import * as stylex from '@stylexjs/stylex';
117+
const styles = stylex.create({
118+
main: { color: 'red' },
119+
});
120+
function Component() {
121+
return <div {...stylex.props(styles.main)} className="foo" />;
122+
}
123+
`,
124+
errors: [
125+
{
126+
message:
127+
'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
128+
},
129+
],
130+
},
131+
{
132+
code: `
133+
import * as stylex from '@stylexjs/stylex';
134+
const styles = stylex.create({
135+
main: { color: 'red' },
136+
});
137+
function Component() {
138+
return <div {...stylex.props(styles.main)} style={{ margin: 10 }} />;
139+
}
140+
`,
141+
errors: [
142+
{
143+
message:
144+
'The `style` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
145+
},
146+
],
147+
},
148+
{
149+
code: `
150+
import * as stylex from '@stylexjs/stylex';
151+
const styles = stylex.create({
152+
main: { color: 'red' },
153+
});
154+
function Component() {
155+
return <div className="foo" {...stylex.props(styles.main)} />;
156+
}
157+
`,
158+
errors: [
159+
{
160+
message:
161+
'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
162+
},
163+
],
164+
},
165+
{
166+
code: `
167+
import * as stylex from '@stylexjs/stylex';
168+
const styles = stylex.create({
169+
main: { color: 'red' },
170+
});
171+
function Component() {
172+
return <div style={{ margin: 10 }} {...stylex.props(styles.main)} />;
173+
}
174+
`,
175+
errors: [
176+
{
177+
message:
178+
'The `style` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
179+
},
180+
],
181+
},
182+
{
183+
code: `
184+
import { props, create } from '@stylexjs/stylex';
185+
const styles = create({
186+
main: { color: 'red' },
187+
});
188+
function Component() {
189+
return <div {...props(styles.main)} className="foo" />;
190+
}
191+
`,
192+
errors: [
193+
{
194+
message:
195+
'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
196+
},
197+
],
198+
},
199+
{
200+
code: `
201+
import { props as p, create } from '@stylexjs/stylex';
202+
const styles = create({
203+
main: { color: 'red' },
204+
});
205+
function Component() {
206+
return <div {...p(styles.main)} className="foo" />;
207+
}
208+
`,
209+
errors: [
210+
{
211+
message:
212+
'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
213+
},
214+
],
215+
},
216+
{
217+
options: [{ validImports: ['custom-stylex'] }],
218+
code: `
219+
import * as stylex from 'custom-stylex';
220+
const styles = stylex.create({
221+
main: { color: 'red' },
222+
});
223+
function Component() {
224+
return <div {...stylex.props(styles.main)} className="foo" />;
225+
}
226+
`,
227+
errors: [
228+
{
229+
message:
230+
'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
231+
},
232+
],
233+
},
234+
{
235+
options: [{ validImports: [{ from: 'a', as: 'css' }] }],
236+
code: `
237+
import { css } from 'a';
238+
const styles = css.create({
239+
main: { color: 'red' },
240+
});
241+
function Component() {
242+
return <div {...css.props(styles.main)} className="foo" />;
243+
}
244+
`,
245+
errors: [
246+
{
247+
message:
248+
'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
249+
},
250+
],
251+
},
252+
{
253+
code: `
254+
import * as stylex from '@stylexjs/stylex';
255+
const styles = stylex.create({
256+
main: { color: 'red' },
257+
});
258+
function Component() {
259+
return <div {...stylex.props(styles.main)} className="foo" style={{ margin: 10 }} />;
260+
}
261+
`,
262+
errors: [
263+
{
264+
message:
265+
'The `className` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
266+
},
267+
{
268+
message:
269+
'The `style` prop should not be used when spreading `stylex.props()` to avoid conflicts.',
270+
},
271+
],
272+
},
273+
],
274+
});

‎packages/@stylexjs/eslint-plugin/src/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import enforceExtension from './stylex-enforce-extension';
1111
import noLegacyContextualStyles from './stylex-no-legacy-contextual-styles';
1212
import noLookaheadSelectors from './stylex-no-lookahead-selectors';
1313
import noNonStandardStyles from './stylex-no-nonstandard-styles';
14+
import noConflictingProps from './stylex-no-conflicting-props';
1415
import noUnused from './stylex-no-unused';
1516
import sortKeys from './stylex-sort-keys';
1617
import validShorthands from './stylex-valid-shorthands';
@@ -21,6 +22,7 @@ const rules: {
2122
'no-legacy-contextual-styles': typeof noLegacyContextualStyles,
2223
'no-lookahead-selectors': typeof noLookaheadSelectors,
2324
'no-nonstandard-styles': typeof noNonStandardStyles,
25+
'no-conflicting-props': typeof noConflictingProps,
2426
'no-unused': typeof noUnused,
2527
'sort-keys': typeof sortKeys,
2628
'valid-shorthands': typeof validShorthands,
@@ -30,6 +32,7 @@ const rules: {
3032
'no-legacy-contextual-styles': noLegacyContextualStyles,
3133
'no-lookahead-selectors': noLookaheadSelectors,
3234
'no-nonstandard-styles': noNonStandardStyles,
35+
'no-conflicting-props': noConflictingProps,
3336
'no-unused': noUnused,
3437
'sort-keys': sortKeys,
3538
'valid-shorthands': validShorthands,

0 commit comments

Comments
 (0)