build(sass): add sass theme to distribution

BREAKING CHANGE: components source are not distributed. use sass from dist folder.
stasson · Dec 4, 2017 · 3f66f4e · 3f66f4e
1 parent 385ca64
commit 3f66f4e
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 23 deletions.
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -36,24 +36,24 @@ The distribution comes in two flavors:
 
 #### standalone plugin
 
-| distribution                 | env         | description               |
-| ---------------------------- | ----------- | ------------------------- |
-| dist/vue-mdc-adapter.js      | development | plugin (injected styles)  |
-| dist/vue-mdc-adapter.min.js  | production  | minified plugin (ES5)     |
-| dist/vue-mdc-adapter.min.css | production  | minified stylesheet (CSS) |
+| distribution                 | env         | description                |
+| ---------------------------- | ----------- | -------------------------- |
+| dist/vue-mdc-adapter.js      | development | plugin (ES5)               |
+| dist/vue-mdc-adapter.css     | development | stylesheet (CSS)           |
+| dist/vue-mdc-adapter.min.js  | production  | minified plugin (ES5)      |
+| dist/vue-mdc-adapter.min.css | production  | minified stylesheet (CSS)  |
 
 #### _a la carte_  plugins
 
-| distribution                   | env         | description                  |
-| ------------------------------ | ----------- | ---------------------------- |
-| dist/[plugin]/[plugin].js      | development | plugin (styles are injected) |
-| dist/[plugin]/[plugin].min.js  | production  | minified plugin (ES5)        |
-| dist/[plugin]/[plugin].min.css | production  | minified stylesheet (CCS)    |
+| distribution                   | env         | description                |
+| ------------------------------ | ----------- | -------------------------- |
+| dist/[plugin]/[plugin].js      | development | plugin (ES5)               |
+| dist/[plugin]/[plugin].css     | development | stylesheet (CCS)           |
+| dist/[plugin]/[plugin].min.js  | production  | minified plugin (ES5)      |
+| dist/[plugin]/[plugin].min.css | production  | minified stylesheet (CCS)  |
 
 #### Using the CDN
 
-> development
-
 ```html
 <head>
   <!-- import reset and material stylesheets -->
@@ -70,7 +70,7 @@ The distribution comes in two flavors:
 <body>
 ```
 
-> production
+> You may want to use the split distribution and freeze the version used:
 
 ```html
 <head>
@@ -93,6 +93,13 @@ The distribution comes in two flavors:
 > The following guide assumes you have a valid Vue.js/Webpack congig.
 > refer to [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) for more.
 
+| module                          | type  |
+| ------------------------------- | ----- |
+| vue-mdc-adapter                 | ESM   |
+| vue-mdc-adapter/styles          | SASS  |
+| vue-mdc-adapter[plugin]         | ESM   |
+| vue-mdc-adapter/[plugin]/styles | SASS  |
+
 #### install vue, vue-mdc-adapter and eventually vue-router
 
 ```bash
@@ -118,29 +125,28 @@ npm install vue-mdc-adapter
   </body>
 ```
 
-#### _standalone_ plugin
+#### import _standalone_ plugin
 
 ```javascript
 import Vue from 'vue'
 import VueMDCAdapter from 'vue-mdc-adapter'
 Vue.use(VueMdcAdapter)
 ```
 
-#### _a la carte_  plugins
+#### import _a la carte_  plugins
 
 ```javascript
 import Vue from 'vue'
 import VueMDCButton from 'vue-mdc-adapter/button'
 Vue.use(VueMDCButton)
 ```
 
-#### _a la carte_ SFC mixins
+#### import _a la carte_ SFC mixins
 
 ```html
 <!-- my-component.vue -->
 <template>
     <div class="my-own-component">
-        <mdc-display >Display</mdc-display>
         <mdc-headline>Headline</mdc-headline>
         <mdc-title>Title <mdc-caption>Caption</mdc-caption></mdc-title>
         <mdc-subheading >Subheading</mdc-subheading>
@@ -157,28 +163,44 @@ Vue.use(VueMDCButton)
 </script>
 ```
 
-#### Create your own theme file:
+#### Create your own SASS Theme
 
 > Material Components styles come as a highly themable SASS framework.
 > refer to the [MDC Theming Guide](https://material.io/components/web/docs/theming/) 
 > for more.
 
+Configure Webpack with sass-loader and make sure sass modules can be resolved:
+
 ```javascript
-  //  add node_modules includes to sass loader config
+// sass loader config
   {
     loader: 'sass-loader',
     options: {
       sourceMap: false,
-      includePaths: [path.resolve(__dirname,'./node_modules')],
+      includePaths: [path.resolve(__dirname,'node_modules')],
     },
   },
 ```
 
+import styles
+
+```scss
+/* theme.scss */
+$mdc-theme-primary: #212121;
+$mdc-theme-accent: #41B883;
+$mdc-theme-background: #fff;
+
+@import "vue-mdc-adapter/dist/styles";
+```
+
+or _a la carte_
+
 ```scss
 /* theme.scss */
 $mdc-theme-primary: #212121;
 $mdc-theme-accent: #41B883;
-$mdc-theme-background: #FFFFFF;
+$mdc-theme-background: #fff;
 
-@import "@material/theme/mdc-theme";
+@import "vue-mdc-adapter/dist/button/styles";
+@import "vue-mdc-adapter/dist/fab/styles";
 ```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,6 @@
   "files": [
     "dist",
     "static",
-    "components",
     "LICENSE",
     "README.md"
   ],
@@ -36,12 +35,14 @@
     "dev": "cross-env NODE_ENV=development webpack-dev-server",
     "test": "jest --runInBand",
     "build": "run-s build:**",
+    "build:copy": "copyup components/styles.scss components/*/styles.scss dist",
     "build:demo": "cross-env NODE_ENV=production webpack",
     "build:dist": "rollup -c",
     "lint": "run-s lint:**",
     "lint:es": "eslint --ext .js,.vue components demo",
     "lint:style": "stylelint \"components/**/*{.scss,.vue}\" ",
     "clean": "run-s clean:**",
+    "clean:demo": "rimraf public/*",
     "clean:dist": "rimraf dist/*",
     "reset:modules": "rimraf node_modules/* && npm install",
     "changelog": "standard-changelog -i CHANGELOG.md -k package.json -w",
@@ -78,6 +79,7 @@
     "canvas": "^1.6.7",
     "clean-webpack-plugin": "^0.1.17",
     "copy-webpack-plugin": "^4.2.3",
+    "copyfiles": "^1.2.0",
     "cross-env": "^5.1.1",
     "css-loader": "^0.28.7",
     "cz-conventional-changelog": "^2.1.0",