Skip to content

Commit

Permalink
Addressed comments; added tests: named exports, indirect style invoke…
Browse files Browse the repository at this point in the history 
…; added features: non-default export, used style as return, full import pattern support
  • Loading branch information
@Samantha-Zhan
Samantha-Zhan committed Nov 7, 2024
1 parent 3de1e30 commit 3f8ccdc
Show file tree
Hide file tree
Showing 3 changed files with 313 additions and 25 deletions.
2 changes: 1 addition & 1 deletion apps/docs/.eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ module.exports = {
// The Eslint rule still needs work, but you can
// enable it to test things out.
'@stylexjs/valid-styles': 'error',
// '@stylexjs/no-unused' : 'warn',
'@stylexjs/no-unused': 'warn',
// 'ft-flow/space-after-type-colon': 0,
// 'ft-flow/no-types-missing-file-annotation': 0,
// 'ft-flow/generic-spacing': 0,
Expand Down
223 changes: 219 additions & 4 deletions packages/eslint-plugin/__tests__/stylex-no-unused-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,96 @@ eslintTester.run('stylex-no-unused', rule.default, {
});
export default function TestComponent() {
return(
<div {...stylex.props(styles.main, styles.dynamic, sizeStyles[8])}>
<div {...stylex.props(styles.main, styles.dynamic('red'), sizeStyles[8])}>
</div>
)
}
`,
},
{
// stylex not default export
code: `
import stylex from 'stylex';
const styles = stylex.create({
main: {
borderColor: {
default: 'green',
':hover': 'red',
'@media (min-width: 1540px)': 1366,
},
borderRadius: 10,
display: 'flex',
},
dynamic: (color) => ({
backgroundColor: color,
})
});
export const sizeStyles = stylex.create({
[8]: {
height: 8,
width: 8,
},
[10]: {
height: 10,
width: 10,
},
[12]: {
height: 12,
width: 12,
},
});
export default function TestComponent() {
return(
<div {...stylex.props(styles.main, styles.dynamic('red'))}>
</div>
)
}
`,
},
{
// indirect usage of style
code: `
import stylex from 'stylex';
const styles = stylex.create({
main: {
display: 'flex',
},
dynamic: (color) => ({
backgroundColor: color,
})
});
const sizeStyles = stylex.create({
[8]: {
height: 8,
width: 8,
},
[10]: {
height: 10,
width: 10,
},
[12]: {
height: 12,
width: 12,
},
});
const widthStyles = stylex.create({
widthModeConstrained: {
width: 'auto',
},
widthModeFlexible: {
width: '100%',
},
})
// style used as export
function getWidthStyles() {
return widthStyles;
}
export default function TestComponent({ width: number}) {
// style used as variable
const red = styles.dynamic('red');
const display = width > 10 ? sizeStyles[12] : sizeStyles[8]
return(
<div {...stylex.props(styles.main, red, display)}>
</div>
)
}
Expand Down Expand Up @@ -86,7 +175,22 @@ eslintTester.run('stylex-no-unused', rule.default, {
`,
},
{
// styles anonymous default export
// styles named default inline export
code: `
import stylex from 'stylex';
export default styles = stylex.create({
maxDimensionsModal: {
maxWidth: '90%',
maxHeight: '90%',
},
halfWindowWidth: {
width: '50vw',
},
})
`,
},
{
// styles anonymous default inline export
code: `
import stylex from 'stylex';
export default stylex.create({
Expand Down Expand Up @@ -121,7 +225,7 @@ eslintTester.run('stylex-no-unused', rule.default, {
});
export default function TestComponent() {
return(
<div {...stylex.props(styles.dynamic)}>
<div {...stylex.props(styles.dynamic('red'))}>
</div>
)
}
Expand All @@ -135,7 +239,7 @@ eslintTester.run('stylex-no-unused', rule.default, {
});
export default function TestComponent() {
return(
<div {...stylex.props(styles.dynamic)}>
<div {...stylex.props(styles.dynamic('red'))}>
</div>
)
}
Expand All @@ -146,5 +250,116 @@ eslintTester.run('stylex-no-unused', rule.default, {
},
],
},
{
// Import form: import * as stylex from '@stylexjs/stylex';
code: `
import * as customStylex from '@stylexjs/stylex';
const styles = customStylex.create({
main: {
display: 'flex',
},
dynamic: (color) => ({
backgroundColor: color,
})
});
export default function TestComponent() {
return(
<div {...stylex.props(styles.dynamic('red'))}>
</div>
)
}`,
output: `
import * as customStylex from '@stylexjs/stylex';
const styles = customStylex.create({
dynamic: (color) => ({
backgroundColor: color,
})
});
export default function TestComponent() {
return(
<div {...stylex.props(styles.dynamic('red'))}>
</div>
)
}`,
errors: [
{
message: 'Unused style detected: styles.main',
},
],
},
{
// Import form: import {create} from '@stylexjs/stylex';
code: `
import {create, attrs} from '@stylexjs/stylex';
const styles = create({
main: {
display: 'flex',
},
dynamic: (color) => ({
backgroundColor: color,
})
});
export default function TestComponent() {
return(
<div {...stylex.props(styles.dynamic('red'))}>
</div>
)
}`,
output: `
import {create, attrs} from '@stylexjs/stylex';
const styles = create({
dynamic: (color) => ({
backgroundColor: color,
})
});
export default function TestComponent() {
return(
<div {...stylex.props(styles.dynamic('red'))}>
</div>
)
}`,
errors: [
{
message: 'Unused style detected: styles.main',
},
],
},
{
// Import form: import {create as c} from '@stylexjs/stylex';
code: `
import {create as c} from '@stylexjs/stylex';
const styles = c({
main: {
display: 'flex',
},
dynamic: (color) => ({
backgroundColor: color,
})
});
export default function TestComponent() {
return(
<div {...stylex.props(styles.dynamic('red'))}>
</div>
)
}`,
output: `
import {create as c} from '@stylexjs/stylex';
const styles = c({
dynamic: (color) => ({
backgroundColor: color,
})
});
export default function TestComponent() {
return(
<div {...stylex.props(styles.dynamic('red'))}>
</div>
)
}`,
errors: [
{
message: 'Unused style detected: styles.main',
},
],
},
],
});
Loading

0 comments on commit 3f8ccdc

Please sign in to comment.