Merge pull request #843 from nathanredblur/master

remove injectCss

Author: alex3165

README.md

@@ -50,11 +50,13 @@ Example:
 ```jsx
 // ES6
 import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
 
 // ES5
 var ReactMapboxGl = require('react-mapbox-gl');
 var Layer = ReactMapboxGl.Layer;
 var Feature = ReactMapboxGl.Feature;
+require('mapbox-gl/dist/mapbox-gl.css');
 
 const Map = ReactMapboxGl({
   accessToken:

src/__tests__/map.test.tsx

@@ -31,14 +31,14 @@ describe('Map', () => {
   });
 
   it('Should render the map correctly', () => {
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
     mount(<MapboxMap style="" />);
   });
 
   it('Should call fitBounds with the right parameters', () => {
     const fitBoundsValues: FitBounds = [[0, 1], [2, 3]];
     const fitBoundsOptions = { linear: true };
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
 
     mount(
       <MapboxMap
@@ -58,7 +58,7 @@ describe('Map', () => {
     const fitBoundsValues: FitBounds = [[0, 1], [2, 3]];
     const fitBoundsOptions = { offset: [150, 0] as [number, number] };
     const newFitBoundsOptions = { offset: [0, 0] };
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
 
     const wrapper = mount(
       <MapboxMap
@@ -82,7 +82,7 @@ describe('Map', () => {
 
   it('Should calc the center from fitbounds if center is not given', () => {
     const fitBoundsValues: FitBounds = [[0, 3], [2, 9]];
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
 
     mount(<MapboxMap style="" fitBounds={fitBoundsValues} />);
 
@@ -92,7 +92,7 @@ describe('Map', () => {
   });
 
   it('Should listen onStyleLoad event', () => {
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
 
     mount(<MapboxMap style="" onStyleLoad={jest.fn()} />);
 
@@ -102,7 +102,7 @@ describe('Map', () => {
   it('Should update the map center position', () => {
     const flyTo = jest.fn();
     const center = [3, 4];
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
 
     const wrapper = mount(<MapboxMap style="" center={[1, 2]} />);
 
@@ -123,7 +123,7 @@ describe('Map', () => {
     const maxBoundsProps = [[1, 0], [0, 1]];
     const mockMaxBounds = jest.fn();
 
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
     const wrapper = mount(<MapboxMap style="" />);
     wrapper.setState({
       map: {
@@ -139,7 +139,7 @@ describe('Map', () => {
 
   // Handling zoom prop
   it('Should not update zoom when using same reference equality', () => {
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
     const flyTo = jest.fn();
     const zoom: [number] = [3];
 
@@ -158,7 +158,7 @@ describe('Map', () => {
 
   it('Should update the zoom on broken reference equality', () => {
     const flyTo = jest.fn();
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
 
     const wrapper = mount(<MapboxMap style="" zoom={[1]} />);
 
@@ -175,7 +175,7 @@ describe('Map', () => {
 
   // Handling bearing prop
   it('Should not update bearing when using same reference equality', () => {
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
     const flyTo = jest.fn();
     const bearing: [number] = [3];
 
@@ -194,7 +194,7 @@ describe('Map', () => {
 
   it('Should update the bearing on broken reference equality', () => {
     const flyTo = jest.fn();
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
 
     const wrapper = mount(<MapboxMap style="" bearing={[1]} />);
 
@@ -211,7 +211,7 @@ describe('Map', () => {
 
   // Handling pitch prop
   it('Should not update pitch when using same reference equality', () => {
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
     const flyTo = jest.fn();
     const pitch: [number] = [3];
 
@@ -230,7 +230,7 @@ describe('Map', () => {
 
   it('Should update the pitch on broken reference equality', () => {
     const flyTo = jest.fn();
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
 
     const wrapper = mount(<MapboxMap style="" pitch={[1]} />);
 
@@ -246,7 +246,7 @@ describe('Map', () => {
   });
 
   it('Should pass animation options and flyTo options', () => {
-    const MapboxMap = ReactMapboxGl({ accessToken: '', injectCSS: false });
+    const MapboxMap = ReactMapboxGl({ accessToken: '' });
     const flyTo = jest.fn();
     const zoom: [number] = [3];
     const flyToOptions = {

src/cluster.tsx

@@ -14,7 +14,7 @@ export interface Props {
     getLeaves: (
       limit?: number,
       offset?: number
-    ) => Array<React.ReactElement<MarkerProps>>
+    ) => Array<React.ReactElement<MarkerProps> | undefined>
   ): React.ReactElement<MarkerProps>;
   radius?: number;
   maxZoom?: number;

src/map.tsx

@@ -97,7 +97,6 @@ export interface FactoryParameters {
   refreshExpiredTiles?: boolean;
   failIfMajorPerformanceCaveat?: boolean;
   bearingSnap?: number;
-  injectCSS?: boolean;
   transformRequest?: RequestTransformFunction;
   antialias?: boolean;
 }
@@ -141,15 +140,9 @@ const ReactMapboxFactory = ({
   refreshExpiredTiles = true,
   failIfMajorPerformanceCaveat = false,
   bearingSnap = 7,
-  injectCSS = true,
   antialias = false,
   transformRequest
 }: FactoryParameters) => {
-  if (injectCSS) {
-    // tslint:disable-next-line:no-submodule-imports
-    require('mapbox-gl/dist/mapbox-gl.css');
-  }
-
   return class ReactMapboxGl extends React.Component<Props & Events, State> {
     public static defaultProps = {
       // tslint:disable-next-line:no-any