feat: migrated away from style-loader

This library no longer uses style-loader to add the necessary style for
the lightbox. You will instead need to load it as shown in the README.
This was done to allow for easier style customization, as well as
streamline usage in server-side rendered apps.

BREAKING CHANGE: you must you must import the css for the component yourself,
using `import 'react-image-lightbox/style.css';`. You only need to do this
once in your application.

BREAKING CHANGE: Versions of IE earlier than IE 11 are no longer supported.

.gitignore

@@ -15,3 +15,5 @@ npm-debug.log
 # Build directories (Will be preserved by npm)
 dist
 build
+/style.css
+/style.css.map

README.md

@@ -21,6 +21,7 @@ Features
 ```jsx
 import React, { Component } from 'react';
 import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 
 const images = [
   '//placekitten.com/1500/500',

examples/cats/app.js

@@ -1,6 +1,11 @@
 import React, { Component } from 'react';
-import Lightbox from '../../src/react-image-lightbox';
-import styles from './stylesheets/app.scss';
+import Lightbox from '../../src';
+// import Lightbox from 'react-image-lightbox';
+// In your own app, you would need to use import styles once in the app
+// import 'react-image-lightbox/styles.css';
+import './stylesheets/vendor/stylesheet.css';
+import './stylesheets/vendor/github-light.css';
+import './stylesheets/app.css';
 import image1 from './images/1.jpg';
 import image2 from './images/2.jpg';
 import image3 from './images/3.jpg';
@@ -22,11 +27,11 @@ const titles = [
   '',
   <span>
     by&nbsp;
-    <a className={styles.creditLink} href="http://flickr.com/photos/titrans/">
+    <a className="creditLink" href="http://flickr.com/photos/titrans/">
       quatre mains
     </a>
     &nbsp; (<a
-      className={styles.creditLink}
+      className="creditLink"
       href="http://creativecommons.org/licenses/by/2.0/"
       title="Attribution License"
     >
@@ -35,14 +40,11 @@ const titles = [
   </span>,
   <span>
     by&nbsp;
-    <a
-      className={styles.creditLink}
-      href="http://flickr.com/photos/lachlanrogers/"
-    >
+    <a className="creditLink" href="http://flickr.com/photos/lachlanrogers/">
       latch.r
     </a>
     &nbsp; (<a
-      className={styles.creditLink}
+      className="creditLink"
       href="http://creativecommons.org/licenses/by-sa/2.0/"
       title="Attribution-ShareAlike License"
     >
@@ -51,11 +53,11 @@ const titles = [
   </span>,
   <span>
     by&nbsp;
-    <a className={styles.creditLink} href="http://flickr.com/photos/fazen/">
+    <a className="creditLink" href="http://flickr.com/photos/fazen/">
       fazen
     </a>
     &nbsp; (<a
-      className={styles.creditLink}
+      className="creditLink"
       href="http://creativecommons.org/licenses/by/2.0/"
       title="Attribution License"
     >
@@ -101,13 +103,6 @@ class App extends Component {
     this.movePrev = this.movePrev.bind(this);
   }
 
-  componentDidMount() {
-    if (typeof window !== 'undefined') {
-      // eslint-disable-next-line no-underscore-dangle
-      styles._insertCss();
-    }
-  }
-
   openLightbox() {
     this.setState({ isOpen: true });
   }
@@ -153,22 +148,22 @@ class App extends Component {
 
     return (
       <div>
-        <section className={styles['page-header']}>
-          <h1 className={styles['project-name']}>React Image Lightbox</h1>
+        <section className="page-header">
+          <h1 className="project-name">React Image Lightbox</h1>
 
-          <h2 className={styles['project-tagline']}>
+          <h2 className="project-tagline">
             Flexible lightbox component for displaying images with React
           </h2>
         </section>
 
-        <section className={styles['main-content']}>
+        <section className="main-content">
           <h2>Demo</h2>
 
           <div>
             <button
               type="button"
               id="open-lightbox"
-              className={styles.demoButton}
+              className="demoButton"
               onClick={this.openLightbox}
             >
               Open Lightbox
@@ -193,15 +188,15 @@ class App extends Component {
             Examples and Documentation on Github
           </a>
 
-          <footer className={styles['site-footer']}>
-            <span className={styles['site-footer-owner']}>
+          <footer className="site-footer">
+            <span className="site-footer-owner">
               <a href="https://github.com/fritz-c/react-image-lightbox">
                 React Image Lightbox
               </a>{' '}
               is maintained by <a href="https://github.com/fritz-c">fritz-c</a>.
             </span>
 
-            <span className={styles['site-footer-credits']}>
+            <span className="site-footer-credits">
               This page was generated by{' '}
               <a href="https://pages.github.com">GitHub Pages</a> using the{' '}
               <a href="https://github.com/jasonlong/cayman-theme">

examples/cats/stylesheets/app.scss → examples/cats/stylesheets/app.css

@@ -1,6 +1,3 @@
-@import './vendor/stylesheet';
-@import './vendor/github-light';
-
 .page-header {
   padding: 1rem 6rem;
 }
@@ -12,10 +9,9 @@
 .creditLink {
   color: #1e6bb8;
   text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
+}
+.creditLink:hover {
+  text-decoration: underline;
 }
 
 .demoButton {
@@ -27,17 +23,14 @@
   color: #fff;
   outline: none;
   padding: 8px 15px;
-
-  &:hover {
-    background-color: #000;
-    text-shadow: 0 0 6px #fff;
-  }
-
-  &:active {
-    text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff;
-  }
-
-  &:focus {
-    box-shadow: 0 0 3px 2px #999;
-  }
+}
+.demoButton:hover {
+  background-color: #000;
+  text-shadow: 0 0 6px #fff;
+}
+.demoButton:active {
+  text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff;
+}
+.demoButton:focus {
+  box-shadow: 0 0 3px 2px #999;
 }