Implement automatic style importing

Author: wojtekmaj

.gitignore

@@ -4,6 +4,7 @@ coverage
 node_modules
 sample/build
 sample/package-lock.json
+src/Calendar.css
 test/build
 test/package-lock.json
 npm-debug.log

README.md

@@ -8,7 +8,6 @@ Ultimate date picker for your React application.
 ## tl;dr
 * Install by executing `npm install react-calendar` or `yarn add react-calendar`.
 * Import by adding `import Calendar from 'react-calendar'`.
-* Import styles by adding `import 'react-calendar/build/Calendar.less'`. Precompiled `Calendar.css` file is also available. If you don't want to use default styles, you can style the calendar on your own.
 * Use by adding `<Calendar />`. Use `onChange` prop for getting new values.
 
 ## Demo
@@ -49,7 +48,6 @@ Here's an example of basic usage:
 ```js
 import React, { Component } from 'react';
 import Calendar from 'react-calendar';
-import 'react-calendar/build/Calendar.less';
 
 class MyApp extends Component {
   state = {
@@ -70,6 +68,10 @@ class MyApp extends Component {
 }
 ```
 
+### Custom styling
+
+If you don't want to use default React-Calendar styling to build upon it, you can import React-Calendar by using `import Calendar from 'react-calendar/build/entry.nostyle';` instead.
+
 ## User guide
 
 ### Calendar

copy-styles.js

@@ -5,5 +5,13 @@ fs.copyFile('./src/Calendar.less', 'build/Calendar.less', (error) => {
     throw error;
   }
   // eslint-disable-next-line no-console
-  console.log('Styles copied successfully.');
+  console.log('Calendar.less copied successfully.');
+});
+
+fs.copyFile('./src/Calendar.css', 'build/Calendar.css', (error) => {
+  if (error) {
+    throw error;
+  }
+  // eslint-disable-next-line no-console
+  console.log('Calendar.css copied successfully.');
 });

package.json

@@ -5,10 +5,10 @@
   "main": "build/entry.js",
   "es6": "src/entry.js",
   "scripts": {
-    "build": "npm run build-js && npm run copy-styles && npm run compile-styles",
+    "build": "npm run build-js && npm run build-styles && npm run copy-styles",
     "build-js": "babel src -d build --ignore **/__tests__",
+    "build-styles": "lessc ./src/Calendar.less ./src/Calendar.css",
     "copy-styles": "node ./copy-styles.js",
-    "compile-styles": "lessc ./build/Calendar.less ./build/Calendar.css",
     "prepublishOnly": "npm run build",
     "test": "npm run test-eslint && npm run test-jest",
     "test-eslint": "eslint ./src",

sample/Sample.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { render } from 'react-dom';
 import Calendar from 'react-calendar';
-import 'react-calendar/build/Calendar.less';
 
 import './Sample.less';
 

sample/webpack.config.js

@@ -24,6 +24,13 @@ module.exports = {
           'less-loader',
         ],
       },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          'css-loader',
+        ],
+      },
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,

src/entry.js

@@ -4,6 +4,8 @@ import DecadeView from './DecadeView';
 import YearView from './YearView';
 import MonthView from './MonthView';
 
+import './Calendar.css';
+
 export default Calendar;
 
 export {

src/entry.nostyle.js

@@ -0,0 +1,15 @@
+import Calendar from './Calendar';
+import CenturyView from './CenturyView';
+import DecadeView from './DecadeView';
+import YearView from './YearView';
+import MonthView from './MonthView';
+
+export default Calendar;
+
+export {
+  Calendar,
+  CenturyView,
+  DecadeView,
+  YearView,
+  MonthView,
+};

test/Test.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import Calendar from 'react-calendar/src/entry';
-import 'react-calendar/src/Calendar.less';
 
 import DateBonduariesOptions from './DateBonduariesOptions';
 import MaxDetailOptions from './MaxDetailOptions';

test/webpack.config.hot.js

@@ -25,6 +25,13 @@ module.exports = {
           'less-loader',
         ],
       },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          'css-loader',
+        ],
+      },
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,