Migrate StyleSheet/*.js to use export statements (#48609)

Summary: Pull Request resolved: #48609 # Motivation This is an attempt at modernizing the export syntax in some of the files in `Libraries/StyleSheet/`. It will allow these files to get properly ingested by modern Flow tooling. # This diff - Migrates the use of `module.exports` into `export default` for files located in `Libraries/StyleSheet/*.js`. Some files were omitted due to ballooning complexity, but will be addressed in other Diffs. - Updating internal *require*s to use ".default", no product code seems to be affected. - Migrating `require`s into `import`s where applicable, taking into account the performance implications (context: https://fb.workplace.com/groups/react.technologies.discussions/permalink/3638114866420225/) - Updates the current iteration of API snapshots (intended). - Updates `react-native-codegen`'s require of processColorArray, analogous to D42346452. Changelog: [General][Breaking] - Deep imports from some files in `StyleSheet/` can break when using the `require()` syntax, but can be easily fixed by appending `.default` Reviewed By: javache Differential Revision: D68017325 fbshipit-source-id: 3c5b94742f101db0b2914c91efab6003dba2b61a

Author: iwoplaza

packages/react-native-codegen/e2e/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap

@@ -31,7 +31,7 @@ export const __INTERNAL_VIEW_CONFIG = {
  radii: true,
 
  colors: {
- process: require('react-native/Libraries/StyleSheet/processColorArray'),
+ process: require('react-native/Libraries/StyleSheet/processColorArray').default,
  },
 
  srcs: true,

packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js

@@ -91,7 +91,7 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) {
  switch (typeAnnotation.elementType.name) {
  case 'ColorPrimitive':
  return j.template
- .expression`{ process: require('react-native/Libraries/StyleSheet/processColorArray') }`;
+ .expression`{ process: require('react-native/Libraries/StyleSheet/processColorArray').default }`;
  case 'ImageSourcePrimitive':
  case 'PointPrimitive':
  case 'EdgeInsetsPrimitive':

packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap

@@ -31,7 +31,7 @@ export const __INTERNAL_VIEW_CONFIG = {
  radii: true,
 
  colors: {
- process: require('react-native/Libraries/StyleSheet/processColorArray'),
+ process: require('react-native/Libraries/StyleSheet/processColorArray').default,
  },
 
  srcs: true,

packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -17,7 +17,7 @@ const resolveAssetSource = require('../Image/resolveAssetSource');
 const processBackgroundImage =
  require('../StyleSheet/processBackgroundImage').default;
 const processColor = require('../StyleSheet/processColor').default;
-const processColorArray = require('../StyleSheet/processColorArray');
+const processColorArray = require('../StyleSheet/processColorArray').default;
 const processFilter = require('../StyleSheet/processFilter').default;
 const insetsDiffer = require('../Utilities/differ/insetsDiffer');
 const matricesDiffer = require('../Utilities/differ/matricesDiffer');

packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.ios.js

@@ -56,7 +56,7 @@ const _normalizeColorObject = (
  // an ios semantic color
  return color;
  } else if ('dynamic' in color && color.dynamic !== undefined) {
- const normalizeColor = require('./normalizeColor');
+ const normalizeColor = require('./normalizeColor').default;
 
  // a dynamic, appearance aware color
  const dynamic = color.dynamic;

packages/react-native/Libraries/StyleSheet/__flowtests__/StyleSheet-flowtest.js

@@ -12,7 +12,8 @@
 
 import type {ImageStyleProp, TextStyleProp} from '../StyleSheet';
 
-const StyleSheet = require('../StyleSheet');
+import * as StyleSheet from '../StyleSheet';
+
 const imageStyle = {tintColor: 'rgb(0, 0, 0)'};
 const textStyle = {color: 'rgb(0, 0, 0)'};
 

packages/react-native/Libraries/StyleSheet/__tests__/normalizeColor-test.js

@@ -11,12 +11,12 @@
 'use strict';
 
 const {OS} = require('../../Utilities/Platform');
-const normalizeColor = require('../normalizeColor');
+const normalizeColor = require('../normalizeColor').default;
 
 it('forwards calls to @react-native/normalize-colors', () => {
  jest.resetModules().mock('@react-native/normalize-colors', () => jest.fn());
 
- expect(require('../normalizeColor')('#abc')).not.toBe(null);
+ expect(require('../normalizeColor').default('#abc')).not.toBe(null);
  expect(require('@react-native/normalize-colors')).toBeCalled();
 });
 

packages/react-native/Libraries/StyleSheet/__tests__/processAspectRatio-test.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const processAspectRatio = require('../processAspectRatio');
+import processAspectRatio from '../processAspectRatio';
 
 describe('processAspectRatio', () => {
  it('should accept numbers', () => {

packages/react-native/Libraries/StyleSheet/__tests__/processColorArray-test.js

@@ -17,7 +17,7 @@ const PlatformColorIOS =
  require('../PlatformColorValueTypes.ios').PlatformColor;
 const DynamicColorIOS =
  require('../PlatformColorValueTypesIOS.ios').DynamicColorIOS;
-const processColorArray = require('../processColorArray');
+const processColorArray = require('../processColorArray').default;
 
 const platformSpecific =
  OS === 'android'

packages/react-native/Libraries/StyleSheet/__tests__/processFontVariant-test.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const processFontVariant = require('../processFontVariant');
+const processFontVariant = require('../processFontVariant').default;
 
 describe('processFontVariant', () => {
  it('should accept arrays', () => {