css - 如何在 React 中找到未使用的样式定义？

Question

有没有办法在基于 React 的元素中自动找到未使用的样式定义，就像在这个例子中一样？

之前:

const styles = StyleSheet.create({
  name: {
    color: '#e5e5e5'
  }
});

const Hello = React.createClass({
  render: function() {
    return <Text style={styles.name}>Hello {this.props.name}</Text>;
  }
});

之后:

开发人员已更改样式，不再需要“名称”。怎么能自动找到这种死风格的代码？

const styles = StyleSheet.create({
  name: { // Redundant now!
    color: '#e5e5e5'
  },
  foo: {
    color: '#e2e3b5'
  }
});

const Hello = React.createClass({
  render: function() {
    return <Text style={styles.foo}>Hello {this.props.name}</Text>;
  }
});

Answer 1

可能的解决方案

1) helpers.js

// helpers.js
import ReactTestUtils from 'react-addons-test-utils'

export function unusedStyles(component, styles) {
    const renderer = ReactTestUtils.createRenderer();
    renderer.render(component);
    const rendered = renderer.getRenderOutput();
    const myStylesInUse = stylesInUse(rendered);
    return filterStyles(styles, myStylesInUse);
}

function stylesInUse(el) {
    var arr = [];

    function go(el) {
        const { children, style } = el.props;
        const childrenType = Object.prototype.toString.call(children);
        style && arr.push(style)
        if(childrenType === '[object Object]') {
            go(children);
        } else if(childrenType === '[object Array]') {
            children.forEach(child => { go(child) });
        }
    }

    go(el);

    return arr;
}

function filterStyles(styles, compStyles) {
    const arr = [];

    for(let key in styles) {
        const found = compStyles.find(item => item === styles[key]);
        if(!found) arr.push(key)
    }

    return arr;
}

2) 组件.js

import { unusedStyles } from './helpers';

const styles = StyleSheet.create({
  one: {
    color: 'one'
  },
  two: {
    color: 'two'
  },
  three: {
    color: 'three'
  }
});

class Hello extends Component {

  render() {
    return (
      <div style={styles.one}>
        <div style={style.two}>Hello!</div>
      </div>
    )
  }

}

// here you can test your styles
const myUnusedStyles = unusedStyles(<Hello />, styles)
// => ['three']

if(myUnusedStyles.length) {
  console.log('UNUSED STYLES DETECTED', myUnusedStyles);
}

export default Hello