Release v3.0.0

.travis.yml

@@ -4,7 +4,7 @@ node_js:
   - "node"
 env:
   - WEBPACK_VERSION= # Current, from package.json
-  - WEBPACK_VERSION=3
+  - WEBPACK_VERSION=4
 install:
   # Use npm 5.7.x since it has introduced `npm ci`
   - if [[ `npm -v` != 5.7* ]]; then npm install -g npm@'>=5.7.1'; fi

README.md

@@ -12,45 +12,45 @@ The tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](http
 
 ## Features
 
-- A set of interconnected patterns & practices for you and your team.
-- A well thought-out terminology, naming conventions, and hierarchy.
-- Get an automated overview of how your design system progresses over time.
-- Global design tokens in YAML format that you can use inside any component.
-- Automatic generation of living, user editable documentation.
-- Easily export and use your Design System as an NPM dependency in another Vue.js project.
-- Create a token, an element, or a pattern, and it’s immediately available across all components.
-- Pre-configured Prettier setup for auto-formatting code on both save and before commit.
-- Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.
-- Documentation and the app logic are separated, so you can have public docs while the app itself stays private.
-- [And more…](https://vueds.com/)
+* A set of interconnected patterns & practices for you and your team.
+* A well thought-out terminology, naming conventions, and hierarchy.
+* Get an automated overview of how your design system progresses over time.
+* Global design tokens in YAML format that you can use inside any component.
+* Automatic generation of living, user editable documentation.
+* Easily export and use your Design System as an NPM dependency in another Vue.js project.
+* Create a token, an element, or a pattern, and it’s immediately available across all components.
+* Pre-configured Prettier setup for auto-formatting code on both save and before commit.
+* Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.
+* Documentation and the app logic are separated, so you can have public docs while the app itself stays private.
+* [And more…](https://vueds.com/)
 
 ## Documentation
 
-- **[Getting Started](https://github.com/viljamis/vue-design-system/wiki/getting-started): How to install and run Vue Design System.**
-- [Terminology](https://github.com/viljamis/vue-design-system/wiki/terminology): Introduction to the system concepts and its hierarchy.
-- [Naming of Things](https://github.com/viljamis/vue-design-system/wiki/naming-of-Things): Naming is hard, so it’s good to have clear guidelines.
-- [Directory Structure](https://github.com/viljamis/vue-design-system/wiki/directory-structure): What goes where and why.
-- [Working with the System](https://github.com/viljamis/vue-design-system/wiki/working-with-the-system): Concrete examples on how to work with `Tokens`, `Elements` , `Patterns` and `Templates`.
-- [Editing Living Documentation](https://github.com/viljamis/vue-design-system/wiki/editing-living-documentation): How to customize the living system documentation.
-- [Spacing](https://github.com/viljamis/vue-design-system/wiki/spacing): A framework for creating a predictable and harmonious spacing.
-- [Component Status](https://github.com/viljamis/vue-design-system/wiki/Component-Status): Clear labels that reflect the state of completion.
-- [Component QA](https://github.com/viljamis/vue-design-system/wiki/Component-QA): How to review new components and keep the quality high.
-- [Contributing](https://github.com/viljamis/vue-design-system/blob/master/CONTRIBUTING.md): A set of guidelines for contributing to the system.
-- [Code of Conduct](https://github.com/viljamis/vue-design-system/blob/master/CODE_OF_CONDUCT.md): By participating you agree to abide by its terms.
-- [Frequently Asked Questions](<https://github.com/viljamis/vue-design-system/wiki/frequently-asked-questions-(FAQ)>): How to use icons, how to use font-face, etc.
+* **[Getting Started](https://github.com/viljamis/vue-design-system/wiki/getting-started): How to install and run Vue Design System.**
+* [Terminology](https://github.com/viljamis/vue-design-system/wiki/terminology): Introduction to the system concepts and its hierarchy.
+* [Naming of Things](https://github.com/viljamis/vue-design-system/wiki/naming-of-Things): Naming is hard, so it’s good to have clear guidelines.
+* [Directory Structure](https://github.com/viljamis/vue-design-system/wiki/directory-structure): What goes where and why.
+* [Working with the System](https://github.com/viljamis/vue-design-system/wiki/working-with-the-system): Concrete examples on how to work with `Tokens`, `Elements` , `Patterns` and `Templates`.
+* [Editing Living Documentation](https://github.com/viljamis/vue-design-system/wiki/editing-living-documentation): How to customize the living system documentation.
+* [Spacing](https://github.com/viljamis/vue-design-system/wiki/spacing): A framework for creating a predictable and harmonious spacing.
+* [Component Status](https://github.com/viljamis/vue-design-system/wiki/Component-Status): Clear labels that reflect the state of completion.
+* [Component QA](https://github.com/viljamis/vue-design-system/wiki/Component-QA): How to review new components and keep the quality high.
+* [Contributing](https://github.com/viljamis/vue-design-system/blob/master/CONTRIBUTING.md): A set of guidelines for contributing to the system.
+* [Code of Conduct](https://github.com/viljamis/vue-design-system/blob/master/CODE_OF_CONDUCT.md): By participating you agree to abide by its terms.
+* [Frequently Asked Questions](<https://github.com/viljamis/vue-design-system/wiki/frequently-asked-questions-(FAQ)>): How to use icons, how to use font-face, etc.
 
 ## Examples
 
-- **[Official example](https://vueds.com/example)**
+* **[Official example](https://vueds.com/example)**
 
 ## Roadmap
 
-- See [Roadmap tag](https://github.com/viljamis/vue-design-system/issues?q=is%3Aissue+is%3Aopen+label%3Aroadmap) in the issues.
+* See [Roadmap tag](https://github.com/viljamis/vue-design-system/issues?q=is%3Aissue+is%3Aopen+label%3Aroadmap) in the issues.
 
 ## Changelog
 
-- `2.1.4` is the latest release.
-- See [Releases page](https://github.com/viljamis/vue-design-system/releases) for the full changelog.
+* `3.0.0` is the latest release.
+* See [Releases page](https://github.com/viljamis/vue-design-system/releases) for the full changelog.
 
 ## Authors and License
 

build/utils.js

@@ -1,7 +1,7 @@
 "use strict"
 const path = require("path")
 const config = require("../config")
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 const packageConfig = require("../package.json")
 
 exports.assetsPath = function(_path) {
@@ -33,7 +33,21 @@ exports.cssLoaders = function(options) {
 
   // generate loader string to be used with extract text plugin
   function generateLoaders(loader, loaderOptions) {
-    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+    const loaders = []
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      loaders.push(MiniCssExtractPlugin.loader)
+    } else {
+      loaders.push("vue-style-loader")
+    }
+
+    loaders.push(cssLoader)
+
+    if (options.usePostCSS) {
+      loaders.push(postcssLoader)
+    }
 
     if (loader) {
       loaders.push({
@@ -44,30 +58,30 @@ exports.cssLoaders = function(options) {
       })
     }
 
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: "vue-style-loader",
-      })
-    } else {
-      return ["vue-style-loader"].concat(loaders)
-    }
+    return loaders
+  }
+
+  const sassResourcesConfig = {
+    loader: "sass-resources-loader",
+    options: {
+      resources: [
+        path.resolve(__dirname, "../src/assets/tokens/tokens.scss"),
+        path.resolve(__dirname, "../src/assets/tokens/tokens.map.scss"),
+        path.resolve(__dirname, "../src/styles/styles.scss"),
+      ],
+    },
   }
 
-  var sassOptions = {
-    includePaths: ["./src/assets/tokens/", "./src/styles"],
-    data: "@import 'tokens.scss'; @import 'tokens.map.scss'; @import 'styles.scss';",
+  const sassOptions = {
     outputStyle: "compressed",
   }
 
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
-    sass: generateLoaders("sass", Object.assign({ indentedSyntax: true }, sassOptions)),
-    scss: generateLoaders("sass", sassOptions),
+    sass: generateLoaders("sass", Object.assign({ indentedSyntax: true }, sassOptions)).concat(sassResourcesConfig),
+    scss: generateLoaders("sass", sassOptions).concat(sassResourcesConfig),
   }
 }
 

build/webpack.base.conf.js

@@ -2,14 +2,15 @@
 const path = require("path")
 const utils = require("./utils")
 const config = require("../config")
-const vueLoaderConfig = require("./vue-loader.conf")
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const { VueLoaderPlugin } = require("vue-loader")
 
 function resolve(dir) {
   return path.join(__dirname, "..", dir)
 }
 
 module.exports = {
+  mode: process.env.NODE_ENV === "production" ? config.build.mode : config.dev.mode,
   context: path.resolve(__dirname, "../"),
   entry: {
     app: "./src/main.js",
@@ -31,12 +32,20 @@ module.exports = {
       {
         test: /\.vue$/,
         loader: "vue-loader",
-        options: vueLoaderConfig,
+        options: {
+          cacheBusting: config.dev.cacheBusting,
+          transformAssetUrls: {
+            video: ["src", "poster"],
+            source: "src",
+            img: "src",
+            image: "xlink:href",
+          },
+        },
       },
       {
         test: /\.js$/,
         loader: "babel-loader",
-        include: [resolve("src"), resolve("test"), resolve("node_modules/webpack-dev-server/client")],
+        include: [resolve("docs"), resolve("src"), resolve("test"), resolve("node_modules/webpack-dev-server/client")],
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
@@ -64,7 +73,7 @@ module.exports = {
       },
     ],
   },
-  plugins: [new ExtractTextPlugin("style.css")],
+  plugins: [new VueLoaderPlugin(), new MiniCssExtractPlugin("style.css")],
   node: {
     // prevent webpack from injecting useless setImmediate polyfill because Vue
     // source contains it (although only uses it if it's native).

build/webpack.dev.conf.js

@@ -14,6 +14,7 @@ const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)
 
 const devWebpackConfig = merge(baseWebpackConfig, {
+  mode: "development",
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }),
   },
@@ -45,8 +46,6 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       "process.env": require("../config/dev.env"),
     }),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: "index.html",
@@ -62,6 +61,10 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       },
     ]),
   ],
+  optimization: {
+    namedModules: true,
+    noEmitOnErrors: true,
+  },
 })
 
 module.exports = new Promise((resolve, reject) => {

build/webpack.prod.conf.js

@@ -7,13 +7,14 @@ const merge = require("webpack-merge")
 const baseWebpackConfig = require("./webpack.base.conf")
 const CopyWebpackPlugin = require("copy-webpack-plugin")
 const HtmlWebpackPlugin = require("html-webpack-plugin")
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin")
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
 
 const env = require("../config/prod.env")
 
 const webpackConfig = merge(baseWebpackConfig, {
+  mode: "production",
   module: {
     rules: utils.styleLoaders({
       sourceMap: config.build.productionSourceMap,
@@ -25,30 +26,15 @@ const webpackConfig = merge(baseWebpackConfig, {
   output: {
     path: config.build.assetsRoot,
     filename: utils.assetsPath("js/[name].[chunkhash].js"),
-    chunkFilename: utils.assetsPath("js/[id].[chunkhash].js"),
   },
   plugins: [
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
       "process.env": env,
     }),
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        compress: {
-          warnings: false,
-        },
-      },
-      sourceMap: config.build.productionSourceMap,
-      parallel: true,
-    }),
     // extract css into its own file
-    new ExtractTextPlugin({
-      filename: utils.assetsPath("css/[name].[contenthash].css"),
-      // Setting the following option to `false` will not extract CSS from codesplit chunks.
-      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
-      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-      allChunks: true,
+    new MiniCssExtractPlugin({
+      filename: utils.assetsPath("css/[name].[chunkhash].css"),
     }),
     // Compress extracted CSS. We are using this plugin so that possible
     // duplicated CSS from different components can be deduped.
@@ -69,40 +55,12 @@ const webpackConfig = merge(baseWebpackConfig, {
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
       },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      // necessary to consistently work with multiple chunks
       chunksSortMode: "dependency",
     }),
     // keep module.id stable when vendor modules does not change
+    new webpack.NamedChunksPlugin(),
     new webpack.HashedModuleIdsPlugin(),
-    // enable scope hoisting
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: "vendor",
-      minChunks(module) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0
-        )
-      },
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: "manifest",
-      minChunks: Infinity,
-    }),
-    // This instance extracts shared chunks from code splitted chunks and bundles them
-    // in a separate chunk, similar to the vendor chunk
-    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
-    new webpack.optimize.CommonsChunkPlugin({
-      name: "app",
-      async: "vendor-async",
-      children: true,
-      minChunks: 3,
-    }),
 
     // copy custom static assets
     new CopyWebpackPlugin([
@@ -113,6 +71,31 @@ const webpackConfig = merge(baseWebpackConfig, {
       },
     ]),
   ],
+  optimization: {
+    concatenateModules: true,
+    splitChunks: {
+      chunks: "all",
+      cacheGroups: {
+        vendor: {
+          name: "vendor",
+          test: /[\\/]node_modules[\\/]/,
+          enforce: true,
+        },
+      },
+    },
+    runtimeChunk: "single",
+    minimizer: [
+      new UglifyJsPlugin({
+        uglifyOptions: {
+          compress: {
+            warnings: false,
+          },
+        },
+        sourceMap: config.build.productionSourceMap,
+        parallel: true,
+      }),
+    ],
+  },
 })
 
 if (config.build.productionGzip) {