Skip to content

Commit

Permalink
Added config to allow for inline styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@mellyeliu
mellyeliu committed Jun 28, 2024
1 parent fe14272 commit cf82a35
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 32 deletions.
98 changes: 83 additions & 15 deletions packages/eslint-plugin/__tests__/stylex-valid-shorthands-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,20 +124,76 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
const styles = stylex.create({
main: {
marginTop: '10px',
marginInlineEnd: '12px',
marginRight: '12px',
marginBottom: '13px',
marginInlineStart: '14px',
marginLeft: '14px',
},
});
`,
errors: [
{
message:
'Property shorthands using multiple values like margin: 10px 12px 13px 14px are not supported in StyleX. Separate into individual properties.',
'Property shorthands using multiple values like "margin: 10px 12px 13px 14px" are not supported in StyleX. Separate into individual properties.',
},
],
},
{
options: [{ allowImportant: true }],
code: `
import stylex from 'stylex';
const styles = stylex.create({
main: {
margin: '10px 12px 13px 14px !important',
},
});
`,
output: `
import stylex from 'stylex';
const styles = stylex.create({
main: {
marginTop: '10px !important',
marginRight: '12px !important',
marginBottom: '13px !important',
marginLeft: '14px !important',
},
});
`,
errors: [
{
message:
'Property shorthands using multiple values like "margin: 10px 12px 13px 14px !important" are not supported in StyleX. Separate into individual properties.',
},
],
},
{
code: `
import stylex from 'stylex';
const styles = stylex.create({
main: {
margin: '10px 12px 13px 14px !important',
},
});
`,
output: `
import stylex from 'stylex';
const styles = stylex.create({
main: {
marginTop: '10px',
marginRight: '12px',
marginBottom: '13px',
marginLeft: '14px',
},
});
`,
errors: [
{
message:
'Property shorthands using multiple values like "margin: 10px 12px 13px 14px !important" are not supported in StyleX. Separate into individual properties.',
},
],
},
{
options: [{ preferInline: true }],
code: `
import stylex from 'stylex';
const styles = stylex.create({
Expand All @@ -160,7 +216,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
errors: [
{
message:
'Property shorthands using multiple values like margin: 10em 1em are not supported in StyleX. Separate into individual properties.',
'Property shorthands using multiple values like "margin: 10em 1em" are not supported in StyleX. Separate into individual properties.',
},
],
},
Expand All @@ -178,16 +234,16 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
const styles = stylex.create({
main: {
marginTop: '10em',
marginInlineEnd: '1em',
marginRight: '1em',
marginBottom: '10em',
marginInlineStart: '1em',
marginLeft: '1em',
},
});
`,
errors: [
{
message:
'Property shorthands using multiple values like margin: 10em 1em are not supported in StyleX. Separate into individual properties.',
'Property shorthands using multiple values like "margin: 10em 1em" are not supported in StyleX. Separate into individual properties.',
},
],
},
Expand All @@ -212,7 +268,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
errors: [
{
message:
'Property shorthands using multiple values like marginInline: 10em 1em are not supported in StyleX. Separate into individual properties.',
'Property shorthands using multiple values like "marginInline: 10em 1em" are not supported in StyleX. Separate into individual properties.',
},
],
},
Expand All @@ -237,7 +293,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
errors: [
{
message:
'Property shorthands using multiple values like marginBlock: 10em 1em are not supported in StyleX. Separate into individual properties.',
'Property shorthands using multiple values like "marginBlock: 10em 1em" are not supported in StyleX. Separate into individual properties.',
},
],
},
Expand All @@ -262,7 +318,7 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
errors: [
{
message:
'Property shorthands using multiple values like paddingBlock: 10em 1em are not supported in StyleX. Separate into individual properties.',
'Property shorthands using multiple values like "paddingBlock: 10em 1em" are not supported in StyleX. Separate into individual properties.',
},
],
},
Expand All @@ -273,6 +329,8 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
main: {
paddingTop: '10em',
paddingBottom: '1em',
marginStart: '20em',
marginEnd: '20em',
paddingStart: '10em',
paddingEnd: '1em',
},
Expand All @@ -284,6 +342,8 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
main: {
paddingTop: '10em',
paddingBottom: '1em',
marginInlineStart: '20em',
marginInlineEnd: '20em',
paddingInlineStart: '10em',
paddingInlineEnd: '1em',
},
Expand All @@ -292,11 +352,19 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
errors: [
{
message:
'Use paddingInlineStart instead of legacy formats like paddingStart to adhere to logical property naming.',
'Use "marginInlineStart" instead of legacy formats like "marginStart" to adhere to logical property naming.',
},
{
message:
'Use paddingInlineEnd instead of legacy formats like paddingEnd to adhere to logical property naming.',
'Use "marginInlineEnd" instead of legacy formats like "marginEnd" to adhere to logical property naming.',
},
{
message:
'Use "paddingInlineStart" instead of legacy formats like "paddingStart" to adhere to logical property naming.',
},
{
message:
'Use "paddingInlineEnd" instead of legacy formats like "paddingEnd" to adhere to logical property naming.',
},
],
},
Expand All @@ -314,16 +382,16 @@ eslintTester.run('stylex-valid-shorthands', rule.default, {
const styles = stylex.create({
main: {
paddingTop: '10em',
paddingInlineEnd: '1em',
paddingRight: '1em',
paddingBottom: '10em',
paddingInlineStart: '1em',
paddingLeft: '1em',
},
});
`,
errors: [
{
message:
'Property shorthands using multiple values like padding: 10em 1em are not supported in StyleX. Separate into individual properties.',
'Property shorthands using multiple values like "padding: 10em 1em" are not supported in StyleX. Separate into individual properties.',
},
],
},
Expand Down
69 changes: 52 additions & 17 deletions packages/eslint-plugin/src/stylex-valid-shorthands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const shorthandAliases = {
marginInline: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
const splitValues = splitValue(rawValue, allowImportant);
if (splitValues.length === 1) {
Expand All @@ -46,7 +47,11 @@ const shorthandAliases = {
['marginInlineEnd', right],
];
},
marginBlock: (rawValue: number | string, allowImportant: boolean = false) => {
marginBlock: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
const splitValues = splitValue(rawValue, allowImportant);
if (splitValues.length === 1) {
return [['marginBlock', rawValue]];
Expand All @@ -57,22 +62,37 @@ const shorthandAliases = {
['marginBlockEnd', right],
];
},
margin: (rawValue: number | string, allowImportant: boolean = false) => {
margin: (
rawValue: number | string,
allowImportant: boolean = false,
preferInline: boolean = false,
) => {
const splitValues = splitValue(rawValue, allowImportant);
if (splitValues.length === 1) {
return [['margin', rawValue]];
}

const [top, right = top, bottom = top, left = right] = splitValues;

return [
['marginTop', top],
['marginInlineEnd', right],
['marginBottom', bottom],
['marginInlineStart', left],
];
return preferInline
? [
['marginTop', top],
['marginInlineEnd', right],
['marginBottom', bottom],
['marginInlineStart', left],
]
: [
['marginTop', top],
['marginRight', right],
['marginBottom', bottom],
['marginLeft', left],
];
},
padding: (rawValue: number | string, allowImportant: boolean = false) => {
padding: (
rawValue: number | string,
allowImportant: boolean = false,
preferInline: boolean = false,
) => {
const splitValues = splitValue(rawValue, allowImportant);
if (splitValues.length === 1) {
return [['padding', rawValue]];
Expand All @@ -83,16 +103,24 @@ const shorthandAliases = {
allowImportant,
);

return [
['paddingTop', top],
['paddingInlineEnd', right],
['paddingBottom', bottom],
['paddingInlineStart', left],
];
return preferInline
? [
['paddingTop', top],
['paddingInlineEnd', right],
['paddingBottom', bottom],
['paddingInlineStart', left],
]
: [
['paddingTop', top],
['paddingRight', right],
['paddingBottom', bottom],
['paddingLeft', left],
];
},
paddingInline: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
const splitValues = splitValue(rawValue, allowImportant);
if (splitValues.length === 1) {
Expand All @@ -107,6 +135,7 @@ const shorthandAliases = {
paddingBlock: (
rawValue: number | string,
allowImportant: boolean = false,
_preferInline: boolean = false,
) => {
const splitValues = splitValue(rawValue, allowImportant);
if (splitValues.length === 1) {
Expand Down Expand Up @@ -143,6 +172,10 @@ const stylexValidShorthands = {
type: 'boolean',
default: false,
},
preferInline: {
type: 'boolean',
default: false,
},
},
additionalProperties: false,
},
Expand All @@ -151,6 +184,7 @@ const stylexValidShorthands = {
create(context: Rule.RuleContext): { ... } {
const options = context.options[0] || {};
const allowImportant = options.allowImportant || false;
const preferInline = options.preferInline || false;

function validateObject(obj: ObjectExpression) {
for (const prop of obj.properties) {
Expand Down Expand Up @@ -181,7 +215,7 @@ const stylexValidShorthands = {
if (typeof key === 'string' && key in legacyNameMapping) {
context.report({
node: property,
message: `Use ${legacyNameMapping[key]} instead of legacy formats like ${key} to adhere to logical property naming.`,
message: `Use "${legacyNameMapping[key]}" instead of legacy formats like "${key}" to adhere to logical property naming.`,
fix: (fixer) => {
// $FlowFixMe - We've already checked that key is a string and in legacyNameMapping
return fixer.replaceText(property.key, legacyNameMapping[key]);
Expand All @@ -200,6 +234,7 @@ const stylexValidShorthands = {
const newValues = shorthandAliases[key](
property.value.value,
allowImportant,
preferInline,
);

if (newValues.length === 1) {
Expand All @@ -209,7 +244,7 @@ const stylexValidShorthands = {

context.report({
node: property,
message: `Property shorthands using multiple values like ${key}: ${String(property.value.value)} are not supported in StyleX. Separate into individual properties.`,
message: `Property shorthands using multiple values like "${key}: ${String(property.value.value)}" are not supported in StyleX. Separate into individual properties.`,
data: {
property: key,
},
Expand Down

0 comments on commit cf82a35

Please sign in to comment.