Remove unused styles (#22083)

Summary: Removes unused styles. NOTE: Lint rule `react-native/no-unused-styles` not added because of custom lint rule internally at Facebook that does this. Pull Request resolved: https://github.com/facebook/react-native/pull/22083 Differential Revision: D12929443 Pulled By: TheSavior fbshipit-source-id: d42b0be3db745e445447e65df3b78b61f53e4229
2025-02-20 13:18:07 +00:00 · 2018-11-05 13:55:46 -08:00 · 2018-11-05 13:55:46 -08:00 · ffd7195543
commit ffd7195543
parent 84c5416617
18 changed files with 44 additions and 122 deletions
--- a/Libraries/Inspector/BoxInspector.js
+++ b/Libraries/Inspector/BoxInspector.js
@ -87,12 +87,6 @@ const styles = StyleSheet.create({
    textAlign: 'left',
    top: -3,
  },
-  buffer: {
-    fontSize: 10,
-    color: 'yellow',
-    flex: 1,
-    textAlign: 'center',
-  },
  innerText: {
    color: 'yellow',
    fontSize: 12,
--- a/Libraries/Inspector/StyleInspector.js
+++ b/Libraries/Inspector/StyleInspector.js
@ -53,11 +53,6 @@ const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-around',
-  },
  attr: {
    fontSize: 10,
    color: '#ccc',
--- a/RNTester/js/AssetScaledImageExample.js
+++ b/RNTester/js/AssetScaledImageExample.js
@ -57,10 +57,6 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    alignSelf: 'center',
  },
-  textColumn: {
-    flex: 1,
-    flexDirection: 'column',
-  },
  imageWide: {
    borderWidth: 1,
    borderColor: 'black',
--- a/RNTester/js/CameraRollView.js
+++ b/RNTester/js/CameraRollView.js
@ -259,16 +259,9 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    flex: 1,
  },
-  url: {
-    fontSize: 9,
-    marginBottom: 14,
-  },
  image: {
    margin: 4,
  },
-  info: {
-    flex: 1,
-  },
  container: {
    flex: 1,
  },
--- a/RNTester/js/ImageCapInsetsExample.js
+++ b/RNTester/js/ImageCapInsetsExample.js
@ -57,17 +57,11 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    alignItems: 'center',
  },
-  horizontal: {
-    flexDirection: 'row',
-  },
  storyBackground: {
    width: 250,
    height: 150,
    borderWidth: 1,
  },
-  text: {
-    fontSize: 13.5,
-  },
 });

 module.exports = ImageCapInsetsExample;
--- a/RNTester/js/LayoutAnimationExample.js
+++ b/RNTester/js/LayoutAnimationExample.js
@ -156,9 +156,6 @@ const styles = StyleSheet.create({
    padding: 10,
    marginBottom: 10,
  },
-  buttonText: {
-    fontSize: 16,
-  },
  viewContainer: {
    flex: 1,
    flexDirection: 'row',
--- a/RNTester/js/LinkingExample.js
+++ b/RNTester/js/LinkingExample.js
@ -65,12 +65,6 @@ class IntentAndroidExample extends React.Component {
 }

 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-    padding: 10,
-    paddingTop: 30,
-  },
  button: {
    padding: 10,
    backgroundColor: '#3B5998',
--- a/RNTester/js/ListViewPagingExample.js
+++ b/RNTester/js/ListViewPagingExample.js
@ -223,13 +223,6 @@ const styles = StyleSheet.create({
    color: 'white',
    paddingHorizontal: 8,
  },
-  rowText: {
-    color: '#888888',
-  },
-  thumbText: {
-    fontSize: 20,
-    color: '#888888',
-  },
  buttonContents: {
    flexDirection: 'row',
    justifyContent: 'center',
--- a/RNTester/js/PermissionsExampleAndroid.android.js
+++ b/RNTester/js/PermissionsExampleAndroid.android.js
@ -119,10 +119,6 @@ const styles = StyleSheet.create({
    flex: 1,
    backgroundColor: 'white',
  },
-  singleLine: {
-    fontSize: 16,
-    padding: 4,
-  },
  text: {
    margin: 10,
  },
--- a/RNTester/js/PointerEventsExample.js
+++ b/RNTester/js/PointerEventsExample.js
@ -230,9 +230,6 @@ const styles = StyleSheet.create({
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9',
  },
-  bottomSpacer: {
-    marginBottom: 100,
-  },
 });

 exports.framework = 'React';
--- a/RNTester/js/RNTesterBlock.js
+++ b/RNTester/js/RNTesterBlock.js
@ -69,16 +69,6 @@ const styles = StyleSheet.create({
  descriptionText: {
    fontSize: 14,
  },
-  disclosure: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    padding: 10,
-  },
-  disclosureIcon: {
-    width: 12,
-    height: 8,
-  },
  children: {
    margin: 10,
  },
--- a/RNTester/js/SliderExample.js
+++ b/RNTester/js/SliderExample.js
@ -69,10 +69,6 @@ class SlidingCompleteExample extends React.Component<
 }

 const styles = StyleSheet.create({
-  slider: {
-    height: 10,
-    margin: 10,
-  },
  text: {
    fontSize: 14,
    textAlign: 'center',
--- a/RNTester/js/StatusBarExample.js
+++ b/RNTester/js/StatusBarExample.js
@ -518,11 +518,6 @@ const styles = StyleSheet.create({
    backgroundColor: '#eeeeee',
    padding: 10,
  },
-  title: {
-    marginTop: 16,
-    marginBottom: 8,
-    fontWeight: 'bold',
-  },
  modalButton: {
    marginTop: 10,
  },
--- a/RNTester/js/TextInputExample.ios.js
+++ b/RNTester/js/TextInputExample.ios.js
@ -490,9 +490,6 @@ class AutogrowingTextInputExample extends React.Component<
 }

 const styles = StyleSheet.create({
-  page: {
-    paddingBottom: 300,
-  },
  default: {
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#0f0f0f',
@ -520,13 +517,6 @@ const styles = StyleSheet.create({
    fontFamily: 'Cochin',
    height: 60,
  },
-  multilineChild: {
-    width: 50,
-    height: 40,
-    position: 'absolute',
-    right: 5,
-    backgroundColor: 'red',
-  },
  eventLabel: {
    margin: 3,
    fontSize: 12,
--- a/RNTester/js/TouchableExample.js
+++ b/RNTester/js/TouchableExample.js
@ -467,10 +467,6 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    flexDirection: 'row',
  },
-  icon: {
-    width: 24,
-    height: 24,
-  },
  image: {
    width: 50,
    height: 50,
--- a/RNTester/js/WebViewExample.js
+++ b/RNTester/js/WebViewExample.js
@ -362,10 +362,6 @@ const styles = StyleSheet.create({
    color: 'white',
    fontSize: 13,
  },
-  spinner: {
-    width: 20,
-    marginRight: 6,
-  },
  buttons: {
    flexDirection: 'row',
    height: 30,
--- a/ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js
+++ b/ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js
@ -21,32 +21,31 @@ const ClippableView = requireNativeComponent('ClippableView');

 class ClippingSample1 extends React.Component {
  render() {
-    const styles = sample1Styles;
    return (
      <View>
        <ClippableView
          clippableViewID="outer"
-          style={styles.outer}
+          style={sample1Styles.outer}
          removeClippedSubviews={true}>
          <ClippableView
            clippableViewID="inner1"
-            style={[styles.inner, styles.inner1]}
+            style={[sample1Styles.inner, sample1Styles.inner1]}
          />
          <ClippableView
            clippableViewID="inner2"
-            style={[styles.inner, styles.inner2]}
+            style={[sample1Styles.inner, sample1Styles.inner2]}
          />
          <ClippableView
            clippableViewID="inner3"
-            style={[styles.inner, styles.inner3]}
+            style={[sample1Styles.inner, sample1Styles.inner3]}
          />
          <ClippableView
            clippableViewID="inner4"
-            style={[styles.inner, styles.inner4]}
+            style={[sample1Styles.inner, sample1Styles.inner4]}
          />
          <ClippableView
            clippableViewID="inner5"
-            style={[styles.inner, styles.inner5]}
+            style={[sample1Styles.inner, sample1Styles.inner5]}
          />
        </ClippableView>
      </View>
@ -90,32 +89,31 @@ const sample1Styles = StyleSheet.create({

 class ClippingSample2 extends React.Component {
  render() {
-    const styles = sample2Styles;
    return (
      <View>
        <ClippableView
          clippableViewID="outer"
-          style={styles.outer}
+          style={sample2Styles.outer}
          removeClippedSubviews={true}>
          <ClippableView
            clippableViewID="complexInner"
-            style={styles.complexInner}
+            style={sample2Styles.complexInner}
            removeClippedSubviews={true}>
            <ClippableView
              clippableViewID="inner1"
-              style={[styles.inner, styles.inner1]}
+              style={[sample2Styles.inner, sample2Styles.inner1]}
            />
            <ClippableView
              clippableViewID="inner2"
-              style={[styles.inner, styles.inner2]}
+              style={[sample2Styles.inner, sample2Styles.inner2]}
            />
            <ClippableView
              clippableViewID="inner3"
-              style={[styles.inner, styles.inner3]}
+              style={[sample2Styles.inner, sample2Styles.inner3]}
            />
            <ClippableView
              clippableViewID="inner4"
-              style={[styles.inner, styles.inner4]}
+              style={[sample2Styles.inner, sample2Styles.inner4]}
            />
          </ClippableView>
        </ClippableView>
@ -164,17 +162,21 @@ const sample2Styles = StyleSheet.create({

 class UpdatingSample1 extends React.Component {
  render() {
-    const styles = updating1Styles;
    const inner1Styles = [
-      styles.inner1,
+      updating1Styles.inner1,
      {height: this.props.update1 ? 200 : 100},
    ];
-    const inner2Styles = [styles.inner2, {top: this.props.update2 ? 200 : 50}];
+
+    const inner2Styles = [
+      updating1Styles.inner2,
+      {top: this.props.update2 ? 200 : 50},
+    ];
+
    return (
      <View>
        <ClippableView
          clippableViewID="outer"
-          style={styles.outer}
+          style={updating1Styles.outer}
          removeClippedSubviews={true}>
          <ClippableView clippableViewID="inner1" style={inner1Styles} />
          <ClippableView clippableViewID="inner2" style={inner2Styles} />
@ -210,15 +212,21 @@ const updating1Styles = StyleSheet.create({

 class UpdatingSample2 extends React.Component {
  render() {
-    const styles = updating2Styles;
-    const outerStyles = [styles.outer, {height: this.props.update ? 200 : 100}];
+    const outerStyles = [
+      updating2Styles.outer,
+      {height: this.props.update ? 200 : 100},
+    ];
+
    return (
      <View>
        <ClippableView
          clippableViewID="outer"
          style={outerStyles}
          removeClippedSubviews={true}>
-          <ClippableView clippableViewID="inner" style={styles.inner} />
+          <ClippableView
+            clippableViewID="inner"
+            style={updating2Styles.inner}
+          />
        </ClippableView>
      </View>
    );
@ -242,11 +250,14 @@ const updating2Styles = StyleSheet.create({

 class ScrollViewTest extends React.Component {
  render() {
-    const styles = scrollTestStyles;
    const children = [];
    for (let i = 0; i < 4; i++) {
      children[i] = (
-        <ClippableView key={i} style={styles.row} clippableViewID={'' + i} />
+        <ClippableView
+          key={i}
+          style={scrollTestStyles.row}
+          clippableViewID={'' + i}
+        />
      );
    }
    for (let i = 4; i < 6; i++) {
@ -254,11 +265,17 @@ class ScrollViewTest extends React.Component {
      children[i] = (
        <ClippableView
          key={i}
-          style={styles.complex}
+          style={scrollTestStyles.complex}
          clippableViewID={viewID}
          removeClippedSubviews={true}>
-          <ClippableView style={styles.inner} clippableViewID={viewID + '.1'} />
-          <ClippableView style={styles.inner} clippableViewID={viewID + '.2'} />
+          <ClippableView
+            style={scrollTestStyles.inner}
+            clippableViewID={viewID + '.1'}
+          />
+          <ClippableView
+            style={scrollTestStyles.inner}
+            clippableViewID={viewID + '.2'}
+          />
        </ClippableView>
      );
    }
@ -266,7 +283,7 @@ class ScrollViewTest extends React.Component {
    return (
      <ScrollView
        removeClippedSubviews={true}
-        style={styles.scrollView}
+        style={scrollTestStyles.scrollView}
        testID="scroll_view">
        {children}
      </ScrollView>
--- a/ReactAndroid/src/androidTest/js/UIManagerTestModule.js
+++ b/ReactAndroid/src/androidTest/js/UIManagerTestModule.js
@ -48,13 +48,6 @@ const FlexTestAppStyles = StyleSheet.create({
  child: {
    flex: 1,
  },
-  absolute: {
-    position: 'absolute',
-    top: 15,
-    left: 10,
-    width: 50,
-    height: 60,
-  },
  bgRed: {
    backgroundColor: '#ff0000',
  },