eslint-plugin-react-native icon indicating copy to clipboard operation
eslint-plugin-react-native copied to clipboard

no-unused-styles fails when passing through the entire StyleSheet

Open CostachescuCristinel opened this issue 4 years ago • 0 comments

The rule no-unused-styles is unable to discriminate between actually unused styles, and an entire StyleSheet object being passed through to a component.

In particular, I am using react-native-htmlview, which accepts a stylesheet prop containing an object created through StyleSheet.create( ... ). When I pass the entire stylesheet to this prop, the no-unused-styles fails. See the example below:

const customHTMLStyles = StyleSheet.create({
    a: { color: "red", textDecorationStyle: "solid", textDecorationLine: "underline" }, // Unused style detected
    li: { paddingHorizontal: 15 },  // Unused style detected
    p: { marginBottom: 5 }  // Unused style detected
});

const styles = StyleSheet.create({
    container: { flex: 1, padding: 15 }
});

function CustomHTMLView(props) {
    return <HTMLView
        style={styles.container}
        stylesheet={customHTMLStyles}
        {...props}
    />;
}

The only solution is to wrap the StyleSheet.create( ... ) portion within eslint-disable and eslint-enable rules:

/* eslint-disable react-native/no-unused-styles */
const customHTMLStyles = StyleSheet.create({
    a: { color: "red", textDecorationStyle: "solid", textDecorationLine: "underline" },
    li: { paddingHorizontal: 15 },
    p: { marginBottom: 5 }
});
// no more 'Unused style detected'
/* eslint-enable react-native/no-unused-styles */

const styles = StyleSheet.create({
    container: { flex: 1, padding: 15 }
});

function CustomHTMLView(props) {
    return <HTMLView
        style={styles.container}
        stylesheet={customHTMLStyles}
        {...props}
    />;
}

It is not a major issue, as you can see it can easily be worked around.
However it's still annoying, and I'd like not to have to care about this.

CostachescuCristinel avatar Jun 15 '21 23:06 CostachescuCristinel