From 93cc92caf887ca6627378c056a4b9b6f303d1487 Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Sun, 1 Oct 2017 10:48:44 +0200 Subject: [PATCH] Implement automatic style importing --- .gitignore | 1 + README.md | 6 ++++-- copy-styles.js | 10 +++++++++- package.json | 4 ++-- sample/Sample.jsx | 1 - sample/webpack.config.js | 7 +++++++ src/entry.js | 2 ++ src/entry.nostyle.js | 15 +++++++++++++++ test/Test.jsx | 1 - test/webpack.config.hot.js | 7 +++++++ test/webpack.config.js | 7 +++++++ 11 files changed, 54 insertions(+), 7 deletions(-) create mode 100644 src/entry.nostyle.js diff --git a/.gitignore b/.gitignore index 798174bd..90df5ac3 100644 --- a/.gitignore +++ b/.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 diff --git a/README.md b/README.md index f5b4eec8..e4215bd6 100644 --- a/README.md +++ b/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 ``. 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 diff --git a/copy-styles.js b/copy-styles.js index 5c5dfe68..a9dd1fd0 100644 --- a/copy-styles.js +++ b/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.'); }); diff --git a/package.json b/package.json index 4e020a54..24e85bfb 100644 --- a/package.json +++ b/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", diff --git a/sample/Sample.jsx b/sample/Sample.jsx index 1225f566..35e3158b 100644 --- a/sample/Sample.jsx +++ b/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'; diff --git a/sample/webpack.config.js b/sample/webpack.config.js index 08270326..e7de516e 100644 --- a/sample/webpack.config.js +++ b/sample/webpack.config.js @@ -24,6 +24,13 @@ module.exports = { 'less-loader', ], }, + { + test: /\.css$/, + use: [ + 'style-loader', + 'css-loader', + ], + }, { test: /\.jsx?$/, exclude: /node_modules/, diff --git a/src/entry.js b/src/entry.js index 351a047f..4cd85886 100644 --- a/src/entry.js +++ b/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 { diff --git a/src/entry.nostyle.js b/src/entry.nostyle.js new file mode 100644 index 00000000..351a047f --- /dev/null +++ b/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, +}; diff --git a/test/Test.jsx b/test/Test.jsx index 2e82519b..e7d2f226 100644 --- a/test/Test.jsx +++ b/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'; diff --git a/test/webpack.config.hot.js b/test/webpack.config.hot.js index e0dbdbf1..898247c1 100644 --- a/test/webpack.config.hot.js +++ b/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/, diff --git a/test/webpack.config.js b/test/webpack.config.js index bbf5aca6..6b4c8639 100644 --- a/test/webpack.config.js +++ b/test/webpack.config.js @@ -24,6 +24,13 @@ module.exports = { 'less-loader', ], }, + { + test: /\.css$/, + use: [ + 'style-loader', + 'css-loader', + ], + }, { test: /\.jsx?$/, exclude: /node_modules/,