vue-style-loader - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

index.js

@@ -21,8 +21,9 @@ /*
   var request = loaderUtils.stringifyRequest(this, '!!' + remainingRequest)
-  var id = JSON.stringify(hash(request))
+  var id = JSON.stringify(hash(request + this.resourcePath))
+  var options = loaderUtils.getOptions(this) || {}
 
-  // direct css import from js --> direct (how does this work when inside an async chunk? ...just don't do it)
+  // direct css import from js --> direct, or manually call `styles.__inject__(ssrContext)` with `manualInject` option
   // css import from vue file --> component lifecycle linked
   // style embedded in vue file --> component lifecycle linked
-  var isVue = /"vue":true/.test(remainingRequest)
+  var isVue = /"vue":true/.test(remainingRequest) || options.manualInject
 
@@ -39,2 +40,3 @@ var shared = [
 
+  var options = loaderUtils.getOptions(this)
   if (!isServer) {
@@ -44,3 +46,3 @@ // on the client: dynamic inject + hot-reload
       '// add the styles to the DOM',
-      'var update = require(' + addStylesClientPath + ')(' + id + ', content, ' + isProduction + ');'
+      'var update = require(' + addStylesClientPath + ')(' + id + ', content, ' + isProduction + ', ' + JSON.stringify(options) + ');'
     ]
@@ -47,0 +49,0 @@ if (!isProduction) {

lib/addStylesClient.js

@@ -45,2 +45,4 @@ /*
 var noop = function () {}
+var options = null
+var ssrIdKey = 'data-vue-ssr-id'
 
@@ -51,5 +53,7 @@ // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
 
-module.exports = function (parentId, list, _isProduction) {
+module.exports = function (parentId, list, _isProduction, _options) {
   isProduction = _isProduction
 
+  options = _options || {}
+
   var styles = listToStyles(parentId, list)
@@ -118,3 +122,3 @@ addStylesToDom(styles)
   var update, remove
-  var styleElement = document.querySelector('style[data-vue-ssr-id~="' + obj.id + '"]')
+  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
 
@@ -201,2 +205,5 @@ if (styleElement) {
   }
+  if (options.ssrId) {
+    styleElement.setAttribute(ssridKey, obj.id)
+  }
 
@@ -203,0 +210,0 @@ if (sourceMap) {

package.json

 {
   "name": "vue-style-loader",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "author": "Evan You",
@@ -5,0 +5,0 @@ "description": "Vue.js style loader module for webpack",

README.md

@@ -5,9 +5,37 @@ # vue-style-loader [![Build Status](https://circleci.com/gh/vuejs/vue-style-loader/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-loader/tree/master) [![npm package](https://img.shields.io/npm/v/vue-style-loader.svg)](https://www.npmjs.com/package/vue-style-loader)
 
-### Differences from `style-loader`
+## Options
 
-#### Server-Side Rendering Support
+- **manualInject** (3.1.0+):
 
+  Type: `boolean`. When importing the style from a non-vue-file, by default the style is injected as a side effect of the import. When `manualInject` is true, the imported style object exposes a `__inject__` method, which can then be called manually at appropriate timing. If called on the server, the method expects one argument which is the `ssrContext` to attach styles to.
+
+  ``` js
+  import styles from 'styles.scss'
+
+  export default {
+    beforeCreate() { // or create a mixin for this purpose
+      if(styles.__inject__) {
+        styles.__inject__(this.$ssrContext)
+      }
+    }
+
+    render() {
+      return <div class={styles.heading}>Hello World</div>
+    }
+  }
+  ```
+
+  Note this behavior is enabled automatically when `vue-style-loader` is used on styles imported within a `*.vue` file. The option is only exposed for advanced usage.
+
+- **ssrId** (3.1.0+):
+
+  Type: `boolean`. Add `data-vue-ssr-id` attribute to injected `<style>` tags even when not in Node.js. This can be used with pre-rendering (instead of SSR) to avoid duplicate style injection on hydration.
+
+## Differences from `style-loader`
+
+### Server-Side Rendering Support
+
 When bundling with `target: 'node'`, the styles in all rendered components are collected and exposed on the Vue render context object as `context.styles`, which you can simply inline into your markup's `<head>`. If you are building a Vue SSR app, you probably should use this loader for CSS imported from JavaScript files too.
 
-#### Misc
+### Misc
 
@@ -14,0 +42,0 @@ - Does not support url mode and reference counting mode. Also removed `singleton` and `insertAt` query options. It always automatically pick the style insertion mechanism that makes most sense. If you need these capabilities you should probably use the original `style-loader` instead.

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

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

20944

increased by27.77%

Number of package files

10

increased by11.11%

Lines of code

456

increased by24.93%

Number of lines in readme file

48

increased by140%

No dependency changes