oxlint-plugin-react-native 0.0.1

package/README.md

@@ -0,0 +1,73 @@
+# oxlint-plugin-react-native
+
+Lint rules for [React Native](https://reactnative.dev/) projects, built for [Oxlint](https://github.com/oxc-project/oxc).
+
+---
+
+## Installation
+
+**npm**
+
+```bash
+npm install oxlint-plugin-react-native oxlint --save-dev
+```
+
+**yarn**
+
+```bash
+yarn add -D oxlint-plugin-react-native oxlint
+```
+
+---
+
+## Configuration
+
+In your Oxlint config (e.g. `.oxlintrc.json`), register the plugin by **name** and enable the rules you want:
+
+```json
+{
+  "jsPlugins": [
+    { "name": "react-native", "specifier": "oxlint-plugin-react-native" }
+  ],
+  "rules": {
+    "react-native/no-color-literals": "error",
+    "react-native/no-inline-styles": "warn",
+    "react-native/no-raw-text": "error",
+    "react-native/no-single-element-style-arrays": "error",
+    "react-native/no-unused-styles": "warn",
+    "react-native/sort-styles": "warn"
+  }
+}
+```
+
+---
+
+## Rules
+
+| Rule                                                                     | Description                                               | Fix |
+| ------------------------------------------------------------------------ | --------------------------------------------------------- | :-: |
+| [no-color-literals](docs/no-color-literals.md)                           | Disallow color literals in styles; use variables or theme |  —  |
+| [no-inline-styles](docs/no-inline-styles.md)                             | Disallow inline style objects; prefer `StyleSheet.create` |  —  |
+| [no-raw-text](docs/no-raw-text.md)                                       | Require text inside `<Text>` (or allowed components)      |  —  |
+| [no-single-element-style-arrays](docs/no-single-element-style-arrays.md) | Disallow single-element style arrays (`style={[x]}`)      | ✅  |
+| [no-unused-styles](docs/no-unused-styles.md)                             | Report unused styles from `StyleSheet.create`             |  —  |
+| [sort-styles](docs/sort-styles.md)                                       | Enforce order of class names and style properties         | ✅  |
+
+Each rule is documented in the [docs](docs/) folder with examples and options.
+
+---
+
+## Scripts
+
+| Command          | Description                   |
+| ---------------- | ----------------------------- |
+| `npm run build`  | Compile TypeScript to `dist/` |
+| `npm run lint`   | Run Oxlint                    |
+| `npm run format` | Run Oxlint with `--fix`       |
+| `npm test`       | Run tests                     |
+
+---
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,19 @@
+import { eslintCompatPlugin } from '@oxlint/plugins';
+import noUnusedStyles from './rules/no-unused-styles.js';
+import noInlineStyles from './rules/no-inline-styles.js';
+import noColorLiterals from './rules/no-color-literals.js';
+import sortStyles from './rules/sort-styles.js';
+import noRawText from './rules/no-raw-text.js';
+import noSingleElementStyleArrays from './rules/no-single-element-style-arrays.js';
+const allRules = {
+    'no-unused-styles': noUnusedStyles,
+    'no-inline-styles': noInlineStyles,
+    'no-color-literals': noColorLiterals,
+    'sort-styles': sortStyles,
+    'no-raw-text': noRawText,
+    'no-single-element-style-arrays': noSingleElementStyleArrays,
+};
+export default eslintCompatPlugin({
+    meta: { name: 'oxlint-plugin-react-native' },
+    rules: allRules,
+});

package/dist/rules/no-color-literals.js

@@ -0,0 +1,49 @@
+import { detect } from '../util/Components.js';
+import { StyleSheets, astHelpers } from '../util/stylesheet.js';
+import * as util from 'util';
+const rule = detect((context) => {
+    let styleSheets;
+    return {
+        before() {
+            styleSheets = new StyleSheets();
+        },
+        CallExpression: (node) => {
+            if (astHelpers.isStyleSheetDeclaration(node, context.settings)) {
+                const styles = astHelpers.getStyleDeclarations(node);
+                if (styles) {
+                    styles.forEach((style) => {
+                        const literals = astHelpers.collectColorLiterals(style.value, context);
+                        styleSheets.addColorLiterals(literals);
+                    });
+                }
+            }
+        },
+        JSXAttribute: (node) => {
+            if (astHelpers.isStyleAttribute(node)) {
+                const literals = astHelpers.collectColorLiterals(node.value, context);
+                styleSheets.addColorLiterals(literals);
+            }
+        },
+        'Program:exit': () => {
+            const colorLiterals = styleSheets.getColorLiterals();
+            if (colorLiterals) {
+                colorLiterals.forEach((style) => {
+                    if (style) {
+                        const expression = util.inspect(style.expression);
+                        context.report({
+                            node: style.node,
+                            message: 'Color literal: {{expression}}',
+                            data: { expression },
+                        });
+                    }
+                });
+            }
+        },
+    };
+});
+export default {
+    meta: {
+        schema: [],
+    },
+    createOnce: rule
+};

package/dist/rules/no-inline-styles.js

@@ -0,0 +1,39 @@
+import { detect } from '../util/Components.js';
+import { StyleSheets, astHelpers } from '../util/stylesheet.js';
+import * as util from 'util';
+const rule = detect((context) => {
+    // Setup state per-file (createOnce)
+    let styleSheets;
+    return {
+        before() {
+            styleSheets = new StyleSheets();
+        },
+        JSXAttribute: (node) => {
+            if (astHelpers.isStyleAttribute(node)) {
+                const styles = astHelpers.collectStyleObjectExpressions(node.value, context);
+                styleSheets.addObjectExpressions(styles);
+            }
+        },
+        'Program:exit': () => {
+            const inlineStyles = styleSheets.getObjectExpressions();
+            if (inlineStyles) {
+                inlineStyles.forEach((style) => {
+                    if (style) {
+                        const expression = util.inspect(style.expression);
+                        context.report({
+                            node: style.node,
+                            message: 'Inline style: {{expression}}',
+                            data: { expression },
+                        });
+                    }
+                });
+            }
+        },
+    };
+});
+export default {
+    meta: {
+        schema: [],
+    },
+    createOnce: rule
+};

package/dist/rules/no-raw-text.js

@@ -0,0 +1,108 @@
+const elementName = (node) => {
+    const reversedIdentifiers = [];
+    if (node.type === 'JSXElement' &&
+        node.openingElement.type === 'JSXOpeningElement') {
+        let object = node.openingElement.name;
+        while (object.type === 'JSXMemberExpression') {
+            if (object.property.type === 'JSXIdentifier') {
+                reversedIdentifiers.push(object.property.name);
+            }
+            object = object.object;
+        }
+        if (object.type === 'JSXIdentifier') {
+            reversedIdentifiers.push(object.name);
+        }
+    }
+    return reversedIdentifiers.reverse().join('.');
+};
+const hasAllowedParent = (parent, allowedElements) => {
+    let curNode = parent;
+    while (curNode) {
+        if (curNode.type === 'JSXElement') {
+            const name = elementName(curNode);
+            if (allowedElements.includes(name)) {
+                return true;
+            }
+        }
+        curNode = curNode.parent;
+    }
+    return false;
+};
+const rule = (context) => {
+    // Defer context.options to visitor (oxlint forbids in createOnce).
+    let _allowedElements;
+    function getAllowedElements() {
+        if (_allowedElements === undefined) {
+            const options = context.options[0] || {};
+            const skippedElements = options.skip ? options.skip : [];
+            _allowedElements = [
+                'Text',
+                'TSpan',
+                'StyledText',
+                'Animated.Text',
+            ].concat(skippedElements);
+        }
+        return _allowedElements;
+    }
+    const report = (node) => {
+        const errorValue = node.type === 'TemplateLiteral'
+            ? `TemplateLiteral: ${node.expressions[0].name}`
+            : node.value.trim();
+        const formattedErrorValue = errorValue.length > 0 ? `Raw text (${errorValue})` : 'Whitespace(s)';
+        context.report({
+            node,
+            message: `${formattedErrorValue} cannot be used outside of a <Text> tag`,
+        });
+    };
+    const hasOnlyLineBreak = (value) => /^[\r\n\t\f\v]+$/.test(value.replace(/ /g, ''));
+    const getValidation = (node) => !hasAllowedParent(node.parent, getAllowedElements());
+    return {
+        Literal(node) {
+            const parentType = node.parent.type;
+            const onlyFor = ['JSXExpressionContainer', 'JSXElement'];
+            if (typeof node.value !== 'string' ||
+                hasOnlyLineBreak(node.value) ||
+                !onlyFor.includes(parentType) ||
+                (node.parent.parent && node.parent.parent.type === 'JSXAttribute'))
+                return;
+            const isStringLiteral = parentType === 'JSXExpressionContainer';
+            if (getValidation(isStringLiteral ? node.parent : node)) {
+                report(node);
+            }
+        },
+        JSXText(node) {
+            if (typeof node.value !== 'string' || hasOnlyLineBreak(node.value))
+                return;
+            if (getValidation(node)) {
+                report(node);
+            }
+        },
+        TemplateLiteral(node) {
+            if (node.parent.type !== 'JSXExpressionContainer' ||
+                (node.parent.parent && node.parent.parent.type === 'JSXAttribute'))
+                return;
+            if (getValidation(node.parent)) {
+                report(node);
+            }
+        },
+    };
+};
+export default {
+    meta: {
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    skip: {
+                        type: 'array',
+                        items: {
+                            type: 'string',
+                        },
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+    createOnce: rule,
+};

package/dist/rules/no-single-element-style-arrays.js

@@ -0,0 +1,41 @@
+const rule = (context) => {
+    function reportNode(JSXExpressionNode) {
+        context.report({
+            node: JSXExpressionNode,
+            message: 'Single element style arrays are not necessary and cause unnecessary re-renders',
+            fix(fixer) {
+                const realStyleNode = JSXExpressionNode.value.expression.elements[0];
+                const styleSource = context.sourceCode.getText(realStyleNode);
+                return fixer.replaceText(JSXExpressionNode.value.expression, styleSource);
+            },
+        });
+    }
+    // --------------------------------------------------------------------------
+    // Public
+    // --------------------------------------------------------------------------
+    return {
+        JSXAttribute(node) {
+            if (node.name.name !== 'style')
+                return;
+            if (!node.value.expression)
+                return;
+            if (node.value.expression.type !== 'ArrayExpression')
+                return;
+            if (node.value.expression.elements.length === 1) {
+                reportNode(node);
+            }
+        },
+    };
+};
+export default {
+    meta: {
+        docs: {
+            description: 'Disallow single element style arrays. These cause unnecessary re-renders as the identity of the array always changes',
+            category: 'Stylistic Issues',
+            recommended: false,
+            url: '',
+        },
+        fixable: 'code',
+    },
+    createOnce: rule,
+};

package/dist/rules/no-unused-styles.js

@@ -0,0 +1,58 @@
+import { detect } from '../util/Components.js';
+import { StyleSheets, astHelpers } from '../util/stylesheet.js';
+const rule = detect((context, components) => {
+    let styleSheets;
+    let styleReferences;
+    function reportUnusedStyles(unusedStyles) {
+        Object.keys(unusedStyles).forEach((key) => {
+            if ({}.hasOwnProperty.call(unusedStyles, key)) {
+                const styles = unusedStyles[key];
+                styles.forEach((node) => {
+                    const message = [
+                        'Unused style detected: ',
+                        key,
+                        '.',
+                        node.key.name,
+                    ].join('');
+                    context.report({ node, message });
+                });
+            }
+        });
+    }
+    return {
+        before() {
+            styleSheets = new StyleSheets();
+            styleReferences = new Set();
+        },
+        MemberExpression: function (node) {
+            const styleRef = astHelpers.getPotentialStyleReferenceFromMemberExpression(node);
+            if (styleRef) {
+                styleReferences.add(styleRef);
+            }
+        },
+        CallExpression: function (node) {
+            if (astHelpers.isStyleSheetDeclaration(node, context.settings)) {
+                const styleSheetName = astHelpers.getStyleSheetName(node);
+                const styles = astHelpers.getStyleDeclarations(node);
+                if (styleSheetName) {
+                    styleSheets.add(styleSheetName, styles);
+                }
+            }
+        },
+        'Program:exit': function () {
+            const list = components.all();
+            if (Object.keys(list).length > 0) {
+                styleReferences.forEach((reference) => {
+                    styleSheets.markAsUsed(reference);
+                });
+                reportUnusedStyles(styleSheets.getUnusedReferences());
+            }
+        },
+    };
+});
+export default {
+    meta: {
+        schema: [],
+    },
+    createOnce: rule,
+};

package/dist/rules/sort-styles.js

@@ -0,0 +1,122 @@
+import { astHelpers } from '../util/stylesheet.js';
+const rule = (context) => {
+    // Defer context.options and context.sourceCode to visitor (oxlint forbids in createOnce).
+    function sort(array, order) {
+        return [...array].sort((a, b) => {
+            const identifierA = astHelpers.getStylePropertyIdentifier(a) || '';
+            const identifierB = astHelpers.getStylePropertyIdentifier(b) || '';
+            let sortOrder = 0;
+            if (astHelpers.isEitherShortHand(identifierA, identifierB)) {
+                return a.range[0] - b.range[0];
+            }
+            if (identifierA < identifierB) {
+                sortOrder = -1;
+            }
+            else if (identifierA > identifierB) {
+                sortOrder = 1;
+            }
+            return sortOrder * (order === 'asc' ? 1 : -1);
+        });
+    }
+    function report(array, type, node, prev, current, order, sourceCode) {
+        const currentName = astHelpers.getStylePropertyIdentifier(current);
+        const prevName = astHelpers.getStylePropertyIdentifier(prev);
+        const hasComments = array
+            .map((prop) => [
+            ...sourceCode.getCommentsBefore(prop),
+            ...sourceCode.getCommentsAfter(prop),
+        ])
+            .reduce((hasComment, comment) => hasComment || comment.length > 0, false);
+        context.report({
+            node,
+            message: `Expected ${type} to be in ${order}ending order. '${currentName}' should be before '${prevName}'.`,
+            loc: current.key.loc,
+            fix: hasComments
+                ? undefined
+                : (fixer) => {
+                    const sortedArray = sort(array, order);
+                    return array
+                        .map((item, i) => {
+                        if (item !== sortedArray[i]) {
+                            return fixer.replaceText(item, sourceCode.getText(sortedArray[i]));
+                        }
+                        return null;
+                    })
+                        .filter(Boolean);
+                },
+        });
+    }
+    function checkIsSorted(array, arrayName, node, order, options, sourceCode, isValidOrder) {
+        for (let i = 1; i < array.length; i += 1) {
+            const previous = array[i - 1];
+            const current = array[i];
+            if (previous.type !== 'Property' || current.type !== 'Property') {
+                return;
+            }
+            const prevName = astHelpers.getStylePropertyIdentifier(previous) || '';
+            const currentName = astHelpers.getStylePropertyIdentifier(current) || '';
+            const oneIsShorthandForTheOther = arrayName === 'style properties' &&
+                astHelpers.isEitherShortHand(prevName, currentName);
+            if (!oneIsShorthandForTheOther && !isValidOrder(prevName, currentName)) {
+                return report(array, arrayName, node, previous, current, order, sourceCode);
+            }
+        }
+    }
+    return {
+        CallExpression: function (node) {
+            const order = context.options[0] || 'asc';
+            const options = context.options[1] || {};
+            const { ignoreClassNames, ignoreStyleProperties } = options;
+            const sourceCode = context.sourceCode;
+            const isValidOrder = order === 'asc'
+                ? (a, b) => a <= b
+                : (a, b) => a >= b;
+            if (!astHelpers.isStyleSheetDeclaration(node, context.settings)) {
+                return;
+            }
+            const classDefinitionsChunks = astHelpers.getStyleDeclarationsChunks(node);
+            if (!ignoreClassNames) {
+                classDefinitionsChunks.forEach((classDefinitions) => {
+                    checkIsSorted(classDefinitions, 'class names', node, order, options, sourceCode, isValidOrder);
+                });
+            }
+            if (ignoreStyleProperties)
+                return;
+            classDefinitionsChunks.forEach((classDefinitions) => {
+                classDefinitions.forEach((classDefinition) => {
+                    const styleProperties = classDefinition.value.properties;
+                    if (!styleProperties || styleProperties.length < 2) {
+                        return;
+                    }
+                    const stylePropertyChunks = astHelpers.getPropertiesChunks(styleProperties);
+                    stylePropertyChunks.forEach((stylePropertyChunk) => {
+                        checkIsSorted(stylePropertyChunk, 'style properties', node, order, options, sourceCode, isValidOrder);
+                    });
+                });
+            });
+        },
+    };
+};
+export default {
+    meta: {
+        fixable: 'code',
+        schema: [
+            {
+                enum: ['asc', 'desc'],
+            },
+            {
+                type: 'object',
+                properties: {
+                    ignoreClassNames: {
+                        type: 'boolean',
+                    },
+                    ignoreStyleProperties: {
+                        type: 'boolean',
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+    createOnce: rule,
+};

package/dist/util/Components.js

@@ -0,0 +1,284 @@
+export class Components {
+    constructor() {
+        this.list = {};
+    }
+    getId(node) {
+        return node ? node.range.join(':') : '';
+    }
+    add(node, confidence) {
+        const id = this.getId(node);
+        if (this.list[id]) {
+            if (confidence === 0 || this.list[id].confidence === 0) {
+                this.list[id].confidence = 0;
+            }
+            else {
+                this.list[id].confidence = Math.max(this.list[id].confidence, confidence);
+            }
+            return;
+        }
+        this.list[id] = {
+            node: node,
+            confidence: confidence,
+        };
+    }
+    get(node) {
+        const id = this.getId(node);
+        return this.list[id];
+    }
+    set(node, props) {
+        let currentNode = node;
+        while (currentNode && !this.list[this.getId(currentNode)]) {
+            currentNode = currentNode.parent;
+        }
+        if (!currentNode) {
+            return;
+        }
+        const id = this.getId(currentNode);
+        this.list[id] = { ...this.list[id], ...props };
+    }
+    all() {
+        const list = {};
+        Object.keys(this.list).forEach((i) => {
+            if (Object.prototype.hasOwnProperty.call(this.list, i) &&
+                this.list[i].confidence >= 2) {
+                list[i] = this.list[i];
+            }
+        });
+        return list;
+    }
+    length() {
+        let length = 0;
+        Object.keys(this.list).forEach((i) => {
+            if (Object.prototype.hasOwnProperty.call(this.list, i) &&
+                this.list[i].confidence >= 2) {
+                length += 1;
+            }
+        });
+        return length;
+    }
+}
+export function componentRule(rule, context) {
+    const components = new Components();
+    // Access context.sourceCode only inside utils (when called during traversal), not during createOnce.
+    const utils = {
+        isES5Component: function (node) {
+            if (!node.parent) {
+                return false;
+            }
+            return /^(React\.)?createClass$/.test(context.sourceCode.getText(node.parent.callee));
+        },
+        isES6Component: function (node) {
+            if (!node.superClass) {
+                return false;
+            }
+            return /^(React\.)?(Pure)?Component$/.test(context.sourceCode.getText(node.superClass));
+        },
+        isReturningJSX: function (node) {
+            let property;
+            switch (node.type) {
+                case 'ReturnStatement':
+                    property = 'argument';
+                    break;
+                case 'ArrowFunctionExpression':
+                    property = 'body';
+                    break;
+                default:
+                    return false;
+            }
+            const returnsJSX = node[property] &&
+                (node[property].type === 'JSXElement' ||
+                    node[property].type === 'JSXFragment');
+            const returnsReactCreateElement = node[property] &&
+                node[property].callee &&
+                node[property].callee.property &&
+                node[property].callee.property.name === 'createElement';
+            return Boolean(returnsJSX || returnsReactCreateElement);
+        },
+        getParentComponent: function (_n) {
+            return (utils.getParentES6Component(_n) ||
+                utils.getParentES5Component(_n) ||
+                utils.getParentStatelessComponent(_n));
+        },
+        getParentES5Component: function (_n) {
+            let scope = (context.sourceCode || context).getScope(_n);
+            while (scope) {
+                const node = scope.block && scope.block.parent && scope.block.parent.parent;
+                if (node && utils.isES5Component(node)) {
+                    return node;
+                }
+                scope = scope.upper;
+            }
+            return null;
+        },
+        getParentES6Component: function (_n) {
+            let scope = (context.sourceCode || context).getScope(_n);
+            while (scope && scope.type !== 'class') {
+                scope = scope.upper;
+            }
+            const node = scope && scope.block;
+            if (!node || !utils.isES6Component(node)) {
+                return null;
+            }
+            return node;
+        },
+        getParentStatelessComponent: function (_n) {
+            let scope = (context.sourceCode || context).getScope(_n);
+            while (scope) {
+                const node = scope.block;
+                const isFunction = /Function/.test(node.type);
+                const isNotMethod = !node.parent || node.parent.type !== 'MethodDefinition';
+                const isNotArgument = !node.parent || node.parent.type !== 'CallExpression';
+                if (isFunction && isNotMethod && isNotArgument) {
+                    return node;
+                }
+                scope = scope.upper;
+            }
+            return null;
+        },
+        getRelatedComponent: function (node) {
+            let currentNode = node;
+            let i;
+            let j;
+            let k;
+            let l;
+            const componentPath = [];
+            while (currentNode) {
+                if (currentNode.property &&
+                    currentNode.property.type === 'Identifier') {
+                    componentPath.push(currentNode.property.name);
+                }
+                if (currentNode.object && currentNode.object.type === 'Identifier') {
+                    componentPath.push(currentNode.object.name);
+                }
+                currentNode = currentNode.object;
+            }
+            componentPath.reverse();
+            const variableName = componentPath.shift();
+            if (!variableName) {
+                return null;
+            }
+            let variableInScope;
+            const { variables } = (context.sourceCode || context).getScope(node);
+            for (i = 0, j = variables.length; i < j; i++) {
+                if (variables[i].name === variableName) {
+                    variableInScope = variables[i];
+                    break;
+                }
+            }
+            if (!variableInScope) {
+                return null;
+            }
+            let defInScope;
+            const { defs } = variableInScope;
+            for (i = 0, j = defs.length; i < j; i++) {
+                if (defs[i].type === 'ClassName' ||
+                    defs[i].type === 'FunctionName' ||
+                    defs[i].type === 'Variable') {
+                    defInScope = defs[i];
+                    break;
+                }
+            }
+            if (!defInScope) {
+                return null;
+            }
+            currentNode = defInScope.node.init || defInScope.node;
+            for (i = 0, j = componentPath.length; i < j; i++) {
+                if (!currentNode.properties) {
+                    continue;
+                }
+                // @ts-ignore
+                for (k = 0, l = currentNode.properties.length; k < l; k++) {
+                    if (currentNode.properties[k].key.name === componentPath[i]) {
+                        currentNode = currentNode.properties[k];
+                        break;
+                    }
+                }
+                if (!currentNode) {
+                    return null;
+                }
+                currentNode = currentNode.value;
+            }
+            return components.get(currentNode);
+        },
+    };
+    const detectionInstructions = {
+        ClassDeclaration: function (node) {
+            if (!utils.isES6Component(node)) {
+                return;
+            }
+            components.add(node, 2);
+        },
+        ClassProperty: function (_n) {
+            const node = utils.getParentComponent(_n);
+            if (!node) {
+                return;
+            }
+            components.add(node, 2);
+        },
+        ObjectExpression: function (node) {
+            if (!utils.isES5Component(node)) {
+                return;
+            }
+            components.add(node, 2);
+        },
+        FunctionExpression: function (_n) {
+            const node = utils.getParentComponent(_n);
+            if (!node) {
+                return;
+            }
+            components.add(node, 1);
+        },
+        FunctionDeclaration: function (_n) {
+            const node = utils.getParentComponent(_n);
+            if (!node) {
+                return;
+            }
+            components.add(node, 1);
+        },
+        ArrowFunctionExpression: function (_n) {
+            const node = utils.getParentComponent(_n);
+            if (!node) {
+                return;
+            }
+            if (node.expression && utils.isReturningJSX(node)) {
+                components.add(node, 2);
+            }
+            else {
+                components.add(node, 1);
+            }
+        },
+        ThisExpression: function (_n) {
+            const node = utils.getParentComponent(_n);
+            if (!node || !/Function/.test(node.type)) {
+                return;
+            }
+            components.add(node, 0);
+        },
+        ReturnStatement: function (node) {
+            if (!utils.isReturningJSX(node)) {
+                return;
+            }
+            const parentNode = utils.getParentComponent(node);
+            if (!parentNode) {
+                return;
+            }
+            components.add(parentNode, 2);
+        },
+    };
+    const ruleInstructions = rule(context, components, utils);
+    const updatedRuleInstructions = { ...ruleInstructions };
+    Object.keys(detectionInstructions).forEach((instruction) => {
+        updatedRuleInstructions[instruction] = (node) => {
+            detectionInstructions[instruction](node);
+            return ruleInstructions[instruction]
+                ? ruleInstructions[instruction](node)
+                : undefined;
+        };
+    });
+    return updatedRuleInstructions;
+}
+export function detect(rule) {
+    return function (context) {
+        return componentRule(rule, context);
+    };
+}

package/dist/util/stylesheet.js

@@ -0,0 +1,365 @@
+export class StyleSheets {
+    constructor() {
+        this.styleSheets = {};
+        this.colorLiterals = [];
+        this.objectExpressions = [];
+    }
+    add(styleSheetName, properties) {
+        this.styleSheets[styleSheetName] = properties;
+    }
+    markAsUsed(fullyQualifiedName) {
+        const nameSplit = fullyQualifiedName.split('.');
+        const styleSheetName = nameSplit[0];
+        const styleSheetProperty = nameSplit[1];
+        if (this.styleSheets[styleSheetName]) {
+            this.styleSheets[styleSheetName] = this.styleSheets[styleSheetName].filter((property) => property.key.name !== styleSheetProperty);
+        }
+    }
+    getUnusedReferences() {
+        return this.styleSheets;
+    }
+    addColorLiterals(expressions) {
+        this.colorLiterals = this.colorLiterals.concat(expressions);
+    }
+    getColorLiterals() {
+        return this.colorLiterals;
+    }
+    addObjectExpressions(expressions) {
+        this.objectExpressions = this.objectExpressions.concat(expressions);
+    }
+    getObjectExpressions() {
+        return this.objectExpressions;
+    }
+}
+let currentContent;
+const getSourceCode = (node) => currentContent.sourceCode.getText(node);
+const getStyleSheetObjectNames = (settings) => settings['react-native/style-sheet-object-names'] || ['StyleSheet'];
+export const astHelpers = {
+    containsStyleSheetObject: function (node, objectNames) {
+        return Boolean(node &&
+            node.type === 'CallExpression' &&
+            node.callee &&
+            node.callee.object &&
+            node.callee.object.name &&
+            objectNames.includes(node.callee.object.name));
+    },
+    containsCreateCall: function (node) {
+        return Boolean(node &&
+            node.callee &&
+            node.callee.property &&
+            node.callee.property.name === 'create');
+    },
+    isStyleSheetDeclaration: function (node, settings) {
+        const objectNames = getStyleSheetObjectNames(settings);
+        return Boolean(astHelpers.containsStyleSheetObject(node, objectNames) &&
+            astHelpers.containsCreateCall(node));
+    },
+    getStyleSheetName: function (node) {
+        if (node && node.parent && node.parent.id) {
+            return node.parent.id.name;
+        }
+    },
+    getStyleDeclarations: function (node) {
+        if (node &&
+            node.type === 'CallExpression' &&
+            node.arguments &&
+            node.arguments[0] &&
+            node.arguments[0].properties) {
+            return node.arguments[0].properties.filter((property) => property.type === 'Property');
+        }
+        return [];
+    },
+    getStyleDeclarationsChunks: function (node) {
+        if (node &&
+            node.type === 'CallExpression' &&
+            node.arguments &&
+            node.arguments[0] &&
+            node.arguments[0].properties) {
+            const { properties } = node.arguments[0];
+            const result = [];
+            let chunk = [];
+            for (let i = 0; i < properties.length; i += 1) {
+                const property = properties[i];
+                if (property.type === 'Property') {
+                    chunk.push(property);
+                }
+                else if (chunk.length) {
+                    result.push(chunk);
+                    chunk = [];
+                }
+            }
+            if (chunk.length) {
+                result.push(chunk);
+            }
+            return result;
+        }
+        return [];
+    },
+    getPropertiesChunks: function (properties) {
+        const result = [];
+        let chunk = [];
+        for (let i = 0; i < properties.length; i += 1) {
+            const property = properties[i];
+            if (property.type === 'Property') {
+                chunk.push(property);
+            }
+            else if (chunk.length) {
+                result.push(chunk);
+                chunk = [];
+            }
+        }
+        if (chunk.length) {
+            result.push(chunk);
+        }
+        return result;
+    },
+    getExpressionIdentifier: function (node) {
+        if (node) {
+            switch (node.type) {
+                case 'Identifier':
+                    return node.name;
+                case 'Literal':
+                    return node.value;
+                case 'TemplateLiteral':
+                    return node.quasis.reduce((result, quasi, index) => result +
+                        quasi.value.cooked +
+                        astHelpers.getExpressionIdentifier(node.expressions[index]), '');
+                default:
+                    return '';
+            }
+        }
+        return '';
+    },
+    getStylePropertyIdentifier: function (node) {
+        if (node && node.key) {
+            return astHelpers.getExpressionIdentifier(node.key);
+        }
+    },
+    isStyleAttribute: function (node) {
+        return Boolean(node.type === 'JSXAttribute' &&
+            node.name &&
+            node.name.name &&
+            node.name.name.toLowerCase().includes('style'));
+    },
+    collectStyleObjectExpressions: function (node, context) {
+        currentContent = context;
+        if (astHelpers.hasArrayOfStyleReferences(node)) {
+            const styleReferenceContainers = node.expression.elements;
+            return astHelpers.collectStyleObjectExpressionFromContainers(styleReferenceContainers);
+        }
+        if (node && node.expression) {
+            return astHelpers.getStyleObjectExpressionFromNode(node.expression);
+        }
+        return [];
+    },
+    collectColorLiterals: function (node, context) {
+        if (!node) {
+            return [];
+        }
+        currentContent = context;
+        if (astHelpers.hasArrayOfStyleReferences(node)) {
+            const styleReferenceContainers = node.expression.elements;
+            return astHelpers.collectColorLiteralsFromContainers(styleReferenceContainers);
+        }
+        if (node.type === 'ObjectExpression') {
+            return astHelpers.getColorLiteralsFromNode(node);
+        }
+        return astHelpers.getColorLiteralsFromNode(node.expression);
+    },
+    collectStyleObjectExpressionFromContainers: function (nodes) {
+        let objectExpressions = [];
+        nodes.forEach((node) => {
+            objectExpressions = objectExpressions.concat(astHelpers.getStyleObjectExpressionFromNode(node));
+        });
+        return objectExpressions;
+    },
+    collectColorLiteralsFromContainers: function (nodes) {
+        let colorLiterals = [];
+        nodes.forEach((node) => {
+            colorLiterals = colorLiterals.concat(astHelpers.getColorLiteralsFromNode(node));
+        });
+        return colorLiterals;
+    },
+    getStyleReferenceFromNode: function (node) {
+        let styleReference;
+        let leftStyleReferences;
+        let rightStyleReferences;
+        if (!node) {
+            return [];
+        }
+        switch (node.type) {
+            case 'MemberExpression':
+                styleReference = astHelpers.getStyleReferenceFromExpression(node);
+                return [styleReference];
+            case 'LogicalExpression':
+                leftStyleReferences = astHelpers.getStyleReferenceFromNode(node.left);
+                rightStyleReferences = astHelpers.getStyleReferenceFromNode(node.right);
+                return [].concat(leftStyleReferences).concat(rightStyleReferences);
+            case 'ConditionalExpression':
+                leftStyleReferences = astHelpers.getStyleReferenceFromNode(node.consequent);
+                rightStyleReferences = astHelpers.getStyleReferenceFromNode(node.alternate);
+                return [].concat(leftStyleReferences).concat(rightStyleReferences);
+            default:
+                return [];
+        }
+    },
+    getStyleObjectExpressionFromNode: function (node) {
+        let leftStyleObjectExpression;
+        let rightStyleObjectExpression;
+        if (!node) {
+            return [];
+        }
+        if (node.type === 'ObjectExpression') {
+            return [astHelpers.getStyleObjectFromExpression(node)];
+        }
+        switch (node.type) {
+            case 'LogicalExpression':
+                leftStyleObjectExpression = astHelpers.getStyleObjectExpressionFromNode(node.left);
+                rightStyleObjectExpression = astHelpers.getStyleObjectExpressionFromNode(node.right);
+                return []
+                    .concat(leftStyleObjectExpression)
+                    .concat(rightStyleObjectExpression);
+            case 'ConditionalExpression':
+                leftStyleObjectExpression = astHelpers.getStyleObjectExpressionFromNode(node.consequent);
+                rightStyleObjectExpression = astHelpers.getStyleObjectExpressionFromNode(node.alternate);
+                return []
+                    .concat(leftStyleObjectExpression)
+                    .concat(rightStyleObjectExpression);
+            default:
+                return [];
+        }
+    },
+    getColorLiteralsFromNode: function (node) {
+        let leftColorLiterals;
+        let rightColorLiterals;
+        if (!node) {
+            return [];
+        }
+        if (node.type === 'ObjectExpression') {
+            return [astHelpers.getColorLiteralsFromExpression(node)];
+        }
+        switch (node.type) {
+            case 'LogicalExpression':
+                leftColorLiterals = astHelpers.getColorLiteralsFromNode(node.left);
+                rightColorLiterals = astHelpers.getColorLiteralsFromNode(node.right);
+                return [].concat(leftColorLiterals).concat(rightColorLiterals);
+            case 'ConditionalExpression':
+                leftColorLiterals = astHelpers.getColorLiteralsFromNode(node.consequent);
+                rightColorLiterals = astHelpers.getColorLiteralsFromNode(node.alternate);
+                return [].concat(leftColorLiterals).concat(rightColorLiterals);
+            default:
+                return [];
+        }
+    },
+    hasArrayOfStyleReferences: function (node) {
+        return (node &&
+            Boolean(node.type === 'JSXExpressionContainer' &&
+                node.expression &&
+                node.expression.type === 'ArrayExpression'));
+    },
+    getStyleReferenceFromExpression: function (node) {
+        const result = [];
+        const name = astHelpers.getObjectName(node);
+        if (name) {
+            result.push(name);
+        }
+        const property = astHelpers.getPropertyName(node);
+        if (property) {
+            result.push(property);
+        }
+        return result.join('.');
+    },
+    getStyleObjectFromExpression: function (node) {
+        const obj = {};
+        let invalid = false;
+        if (node.properties && node.properties.length) {
+            node.properties.forEach((p) => {
+                if (!p.value || !p.key) {
+                    return;
+                }
+                if (p.value.type === 'Literal') {
+                    invalid = true;
+                    obj[p.key.name] = p.value.value;
+                }
+                else if (p.value.type === 'ConditionalExpression') {
+                    const innerNode = p.value;
+                    if (innerNode.consequent.type === 'Literal' ||
+                        innerNode.alternate.type === 'Literal') {
+                        invalid = true;
+                        obj[p.key.name] = getSourceCode(innerNode);
+                    }
+                }
+                else if (p.value.type === 'UnaryExpression' &&
+                    p.value.operator === '-' &&
+                    p.value.argument.type === 'Literal') {
+                    invalid = true;
+                    obj[p.key.name] = -1 * p.value.argument.value;
+                }
+                else if (p.value.type === 'UnaryExpression' &&
+                    p.value.operator === '+' &&
+                    p.value.argument.type === 'Literal') {
+                    invalid = true;
+                    obj[p.key.name] = p.value.argument.value;
+                }
+            });
+        }
+        return invalid ? { expression: obj, node: node } : undefined;
+    },
+    getColorLiteralsFromExpression: function (node) {
+        const obj = {};
+        let invalid = false;
+        if (node.properties && node.properties.length) {
+            node.properties.forEach((p) => {
+                if (p.key &&
+                    p.key.name &&
+                    p.key.name.toLowerCase().indexOf('color') !== -1) {
+                    if (p.value.type === 'Literal') {
+                        invalid = true;
+                        obj[p.key.name] = p.value.value;
+                    }
+                    else if (p.value.type === 'ConditionalExpression') {
+                        const innerNode = p.value;
+                        if (innerNode.consequent.type === 'Literal' ||
+                            innerNode.alternate.type === 'Literal') {
+                            invalid = true;
+                            obj[p.key.name] = getSourceCode(innerNode);
+                        }
+                    }
+                }
+            });
+        }
+        return invalid ? { expression: obj, node: node } : undefined;
+    },
+    getObjectName: function (node) {
+        if (node && node.object && node.object.name) {
+            return node.object.name;
+        }
+    },
+    getPropertyName: function (node) {
+        if (node && node.property && node.property.name) {
+            return node.property.name;
+        }
+    },
+    getPotentialStyleReferenceFromMemberExpression: function (node) {
+        if (node &&
+            node.object &&
+            node.object.type === 'Identifier' &&
+            node.object.name &&
+            node.property &&
+            node.property.type === 'Identifier' &&
+            node.property.name &&
+            node.parent.type !== 'MemberExpression') {
+            return [node.object.name, node.property.name].join('.');
+        }
+    },
+    isEitherShortHand: function (property1, property2) {
+        const shorthands = ['margin', 'padding', 'border', 'flex'];
+        if (shorthands.includes(property1)) {
+            return property2.startsWith(property1);
+        }
+        if (shorthands.includes(property2)) {
+            return property1.startsWith(property2);
+        }
+        return false;
+    },
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "oxlint-plugin-react-native",
+  "version": "0.0.1",
+  "description": "React Native specific linting rules for Oxlint",
+  "keywords": [
+    "oxlint",
+    "oxlint-plugin",
+    "oxlintplugin",
+    "react",
+    "react native",
+    "react-native"
+  ],
+  "homepage": "https://github.com/huextrat/oxlint-plugin-react-native",
+  "bugs": "https://github.com/huextrat/oxlint-plugin-react-native/issues",
+  "license": "MIT",
+  "author": "Hugo Extrat <extrat.h@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/huextrat/oxlint-plugin-react-native"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc",
+    "lint": "oxlint --type-aware --type-check --report-unused-disable-directives",
+    "lint:fix": "oxlint --type-aware --type-check --report-unused-disable-directives --fix",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "dependencies": {
+    "@oxlint/plugins": "1.43.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.29.0",
+    "@babel/preset-env": "7.29.0",
+    "@babel/preset-typescript": "7.28.5",
+    "@types/jest": "30.0.0",
+    "@types/node": "25.2.0",
+    "jest": "30.2.0",
+    "oxfmt": "^0.28.0",
+    "oxlint": "1.43.0",
+    "oxlint-tsgolint": "^0.11.4",
+    "typescript": "5.9.3"
+  },
+  "peerDependencies": {
+    "oxlint": ">=1.0.0"
+  }
+}