vue-template-loader - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

 {
   "name": "vue-template-loader",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Vue.js 2.0 template loader for webpack",
-  "main": "lib/index.js",
+  "main": "lib/template-loader.js",
   "files": [
@@ -26,8 +26,13 @@ "lib"
   "scripts": {
-    "test": "jasmine JASMINE_CONFIG_PATH=test/jasmine.json"
+    "example": "webpack --config example/webpack.config.js",
+    "lint": "eslint lib test",
+    "test": "npm run lint && jasmine JASMINE_CONFIG_PATH=test/jasmine.json",
+    "prepublish": "npm run test"
   },
   "dependencies": {
+    "postcss": "^5.2.8",
+    "postcss-selector-parser": "^2.2.2",
     "vue-hot-reload-api": "^2.0.6",
-    "vue-template-compiler": "^2.1.6",
-    "vue-template-es2015-compiler": "^1.4.0"
+    "vue-template-compiler": "^2.1.8",
+    "vue-template-es2015-compiler": "^1.4.2"
   },
@@ -39,9 +44,13 @@ "devDependencies": {
     "babel-register": "^6.18.0",
+    "css-loader": "^0.26.1",
     "eslint": "^3.12.2",
     "eslint-config-ktsn": "^1.0.0",
     "jasmine": "^2.5.2",
+    "loader-utils": "^0.2.16",
     "require-from-string": "^1.2.1",
-    "vue": "^2.1.6",
-    "vue-class-component": "^4.4.0"
+    "style-loader": "^0.13.1",
+    "vue": "^2.1.8",
+    "vue-class-component": "^4.4.0",
+    "webpack": "^2.2.0-rc.3"
   }
 }

README.md

@@ -12,2 +12,3 @@ # vue-template-loader
 - Insert a render function to a component options object
+- vue-loader like scoped css and css modules support
 - HMR support for a template
@@ -18,2 +19,4 @@ - Decorator syntax support (can be used with [vue-class-component](https://github.com/vuejs/vue-class-component) or other class style components)
 
+### Loading Template
+
 Just add a loader option for vue-template-loader to your webpack configuration.
@@ -24,4 +27,4 @@
   module: {
-    loaders: [
-      { test: /\.html$/, loader: 'vue-template-loader' }
+    rules: [
+      { test: /\.html$/, use: 'vue-template-loader' }
     ]
@@ -32,2 +35,45 @@ }
 
+### Loading Scoped Styles
+
+You need to specify scoped flag and loaders for style files such as `style-loader` and `css-loader`. Note that they must be `enforce: post` to inject scope id into styles before they are processed by them.
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        use: 'vue-template-loader?scoped' // add `scoped` flag
+      },
+      {
+        enforce: 'post', // required
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  }
+}
+```
+
+### Loading CSS Modules
+
+All what you have to do is enable `modules` flag of `css-loader`. vue-template-loader will add `$style` property and you can use hashed classes through it.
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        use: 'vue-template-loader'
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader?modules'] // Enable CSS Modules
+      }
+    ]
+  }
+}
+```
+
 ## Example
@@ -45,7 +91,7 @@
 
-Import it as a function and pass a component option to the function.
+Import it as a function and pass a component option to the function. If you also would like to load a style file, add `style` query and specify the style file path.
 
 ```js
 // app.js
-import withRender from './app.html'
+import withRender from './app.html?style=./app.css'
 
@@ -91,4 +137,4 @@ export default withRender({
   interface WithRender {
-    (options: Vue.ComponentOptions<Vue>): Vue.ComponentOptions<Vue>
-    (component: typeof Vue): typeof Vue
+    <V extends Vue>(options: Vue.ComponentOptions<V>): Vue.ComponentOptions<V>
+    <V extends typeof Vue>(component: V): V
   }
@@ -95,0 +141,0 @@ const withRender: WithRender

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10215

increased by65.48%

Number of package files

7

increased by40%

Lines of code

140

increased by129.51%

Number of lines in readme file

143

increased by47.42%

Worsened metrics

Dependency count

5

increased by66.67%

Dev dependency count

14

increased by40%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedpostcss@^5.2.8

• + Addedpostcss-selector-parser@^2.2.2

• + Addedansi-regex@2.1.1(transitive)

• + Addedansi-styles@2.2.1(transitive)

• + Addedchalk@1.1.3(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedflatten@1.0.3(transitive)

• + Addedhas-ansi@2.0.0(transitive)

• + Addedhas-flag@1.0.0(transitive)

• + Addedindexes-of@1.0.1(transitive)

• + Addedjs-base64@2.6.4(transitive)

• + Addedpostcss@5.2.18(transitive)

• + Addedpostcss-selector-parser@2.2.3(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedstrip-ansi@3.0.1(transitive)

• + Addedsupports-color@2.0.03.2.3(transitive)

• + Addeduniq@1.0.1(transitive)

• Updatedvue-template-compiler@^2.1.8

• Updatedvue-template-es2015-compiler@^1.4.2