add stylesheet paths to package.json exports field

Close #87

docs/README.md

@@ -46,13 +46,13 @@ npm install --save-dev vanillajs-datepicker
 import Datepicker from 'path/to/node_modules/vanillajs-datepicker/js/Datepicker.js';
 ```
 
-_Or if you use a bundler that supports [pkg.module](https://github.com/rollup/rollup/wiki/pkg.module) (e.g. [Rollup](https://rollupjs.org/) with [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) plugin, [webpack](https://webpack.js.org/))_
+_Or if you use a bundler that supports [pkg.module](https://github.com/rollup/rollup/wiki/pkg.module)_
 
 ```javascript
 import { Datepicker } from 'vanillajs-datepicker';
 ```
 
-_Or if your bundler supports [package entry points](https://nodejs.org/api/packages.html#packages_package_entry_points) (e.g. Rollup with node-resolve plugin v8.4+, webpack v5+), you can also do this._
+_Or if your bundler supports [package.json "exports" field](https://nodejs.org/api/packages.html#packages_package_entry_points), you can also do this._
 
 ```javascript
 import Datepicker from 'vanillajs-datepicker/Datepicker';
@@ -111,13 +111,13 @@ const datepicker = new Datepicker(elem, {
 import DateRangePicker from 'path/to/node_modules/vanillajs-datepicker/js/DateRangePicker.js';
 ```
 
-_Or if you use a bundler that supports [pkg.module](https://github.com/rollup/rollup/wiki/pkg.module) (e.g. [Rollup](https://rollupjs.org/) with [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) plugin, [webpack](https://webpack.js.org/))_
+_Or if you use a bundler that supports [pkg.module](https://github.com/rollup/rollup/wiki/pkg.module)_
 
 ```javascript
 import { DateRangePicker } from 'vanillajs-datepicker';
 ```
 
-_Or if your bundler supports [package entry points](https://nodejs.org/api/packages.html#packages_package_entry_points) (e.g. Rollup with node-resolve plugin v8.4+, webpack v5+), you can also do this._
+_Or if your bundler supports [package.json "exports" field](https://nodejs.org/api/packages.html#packages_package_entry_points), you can also do this._
 
 ```javascript
 import DateRangePicker from 'vanillajs-datepicker/DateRangePicker';
@@ -142,6 +142,14 @@ const rangepicker = new DateRangePicker(elem, {
 @import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker';
 ```
 
+_The path to node_modules can be omitted if your bundler can resolve node_modules path or you configure Sass with the "[loadPaths](https://sass-lang.com/documentation/js-api/interfaces/Options#loadPaths)" option (for legacy options, "[includePaths](https://sass-lang.com/documentation/js-api/interfaces/LegacySharedOptions#includePaths)")_
+
+_Alternatively, if your bundler can load stylesheet exported with [package.json "exports" field](https://nodejs.org/api/packages.html#packages_package_entry_points), you can import precompiled css file to your js file._
+
+```javascript
+import 'vanillajs-datepicker/css/datepicker.css';
+```
+
 ### Using with CSS framework
 
 #### Bulma
@@ -152,6 +160,12 @@ const rangepicker = new DateRangePicker(elem, {
 @import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-bulma';
 ```
 
+_To import precompiled css file to your js file_
+
+```javascript
+import 'vanillajs-datepicker/css/datepicker-bulma.css';
+```
+
 #### Bootstrap
 
 1. use `buttonClass: 'btn'` option to call `Datepicker`/`DateRangePicker` constructor.
@@ -174,6 +188,14 @@ _Or if your Bootstrap's version is v4.x_
 @import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-bs4';
 ```
 
+_To import precompiled css file to your js file_
+
+```javascript
+import 'vanillajs-datepicker/css/datepicker-bs5.css';
+// ...or, for v4.x
+import 'vanillajs-datepicker/css/datepicker-bs4.css';
+```
+
 #### Foundation
 
 1. import scss file for Foundation instead.
@@ -182,6 +204,12 @@ _Or if your Bootstrap's version is v4.x_
 @import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-foundation';
 ```
 
+_To import precompiled css file to your js file_
+
+```javascript
+import 'vanillajs-datepicker/css/datepicker-foundation.css';
+```
+
 #### Other frameworks
 
  1. If the framework uses a specific class for button elements, set it to the `buttonClass` option to call `Datepicker`/`DateRangePicker` constructor.

docs/i18n.md

@@ -18,7 +18,7 @@ import zhCN from 'path/to/node_modules/vanillajs-datepicker/js/i18n/locales/zh-C
 Object.assign(Datepicker.locales, es, fr, zhCN);
 ```
 
-_Or if you use a bundler that supports [package entry points](https://nodejs.org/api/packages.html#packages_package_entry_points) (e.g. [Rollup](https://rollupjs.org/) with [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) plugin v8.4+, [webpack](https://webpack.js.org/) v5+)_
+_Or if you use a bundler that supports [package.json "exports" field](https://nodejs.org/api/packages.html#packages_package_entry_points)_
 
 ```javascript
 import Datepicker from 'vanillajs-datepicker/Datepicker';

package.json

@@ -9,7 +9,8 @@
     "./Datepicker": "./js/Datepicker.js",
     "./DateRangePicker": "./js/DateRangePicker.js",
     "./locales/*": "./js/i18n/locales/*.js",
-    "./locales/": "./js/i18n/locales/"
+    "./sass/*": "./sass/*",
+    "./css/*": "./dist/css/*"
   },
   "scripts": {
     "build:js": "rollup -c",

sass/index-bs4.scss

@@ -1,5 +1,5 @@
-@import '../node_modules/bootstrap4/scss/functions';
-@import '../node_modules/bootstrap4/scss/variables';
-@import '../node_modules/bootstrap4/scss/mixins';
+@import 'bootstrap4/scss/functions';
+@import 'bootstrap4/scss/variables';
+@import 'bootstrap4/scss/mixins';
 
 @import 'datepicker-bs4';

sass/index-bs5.scss

@@ -1,5 +1,5 @@
-@import '../node_modules/bootstrap/scss/functions';
-@import '../node_modules/bootstrap/scss/variables';
-@import '../node_modules/bootstrap/scss/mixins';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
 
 @import 'datepicker-bs5';

sass/index-bulma.scss

@@ -1,6 +1,6 @@
-@import '../node_modules/bulma/sass/utilities/initial-variables';
-@import '../node_modules/bulma/sass/utilities/functions';
-@import '../node_modules/bulma/sass/utilities/derived-variables';
-@import '../node_modules/bulma/sass/utilities/mixins';
+@import 'bulma/sass/utilities/initial-variables';
+@import 'bulma/sass/utilities/functions';
+@import 'bulma/sass/utilities/derived-variables';
+@import 'bulma/sass/utilities/mixins';
 
 @import 'datepicker-bulma';

sass/index-foundation.scss

@@ -1,3 +1,3 @@
-@import '../node_modules/foundation-sites/scss/global';
+@import 'foundation-sites/scss/global';
 
 @import 'datepicker-foundation';

scripts/build-css.js

@@ -22,7 +22,9 @@ if (!fs.existsSync(distDir)) {
 Promise.all(files.map((entry) => {
   return new Promise((resolve) => {
     const from = `${srcDir}/${entry.in}`;
-    const css = sass.renderSync({file: from}).css.toString();
+    const css = sass.compile(from, {
+      loadPaths: [`${rootDir}/node_modules`],
+    }).css.toString();
 
     postcss([autoprefixer, prettify])
       .process(css, {from, map: false})