This commit is contained in:
chrosey
2017-09-13 07:52:34 +02:00
parent a1f16c37f4
commit 2340b0226b
24621 changed files with 2912161 additions and 149 deletions
+15
View File
@@ -0,0 +1,15 @@
<!-- Before creating an issue please make sure you are using the latest version of style-loader. -->
**Do you want to request a *feature* or report a *bug*?**
<!-- Please ask questions on StackOverflow or the webpack Gitter (https://gitter.im/webpack/webpack). Questions will be closed. -->
**What is the current behavior?**
**If the current behavior is a bug, please provide the steps to reproduce.**
<!-- A great way to do this is to provide your configuration via a GitHub gist. -->
**What is the expected behavior?**
**If this is a feature request, what is motivation or use case for changing the behavior?**
**Please mention other relevant information such as your webpack version, Node.js version and Operating System.**
+18
View File
@@ -0,0 +1,18 @@
<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. -->
**What kind of change does this PR introduce?**
<!-- E.g. a bugfix, feature, refactoring, build related change, etc… -->
**Did you add tests for your changes?**
**If relevant, did you update the README?**
**Summary**
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
<!-- Try to link to an open issue for more information. -->
**Does this PR introduce a breaking change?**
<!-- If this PR introduces a breaking change, please describe the impact and a migration path for existing applications. -->
**Other information**
+1
View File
@@ -0,0 +1 @@
fixtures/
+20
View File
@@ -0,0 +1,20 @@
Copyright JS Foundation and other contributors
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+19
View File
@@ -0,0 +1,19 @@
# 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)
This is a fork based on [style-loader](https://github.com/webpack/style-loader). Similar to `style-loader`, you can chain it after `css-loader` to dynamically inject CSS into the document as style tags. However, since this is included as a dependency and used by default in `vue-loader`, in most cases you don't need to configure this loader yourself.
### 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
- 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.
- Fixed the issue that root-relative URLs are interpreted against chrome:// urls and make source map URLs work for injected `<style>` tags in Chrome.
## License
MIT
+64
View File
@@ -0,0 +1,64 @@
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
Modified by Evan You @yyx990803
*/
var loaderUtils = require('loader-utils')
var path = require('path')
var hash = require('hash-sum')
module.exports = function () {}
module.exports.pitch = function (remainingRequest) {
if (this.cacheable) this.cacheable()
var isServer = this.target === 'node'
var isProduction = this.minimize || process.env.NODE_ENV === 'production'
var addStylesClientPath = loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'lib/addStylesClient.js'))
var addStylesServerPath = loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'lib/addStylesServer.js'))
var request = loaderUtils.stringifyRequest(this, '!!' + remainingRequest)
var id = JSON.stringify(hash(request))
var shared = [
'// style-loader: Adds some css to the DOM by adding a <style> tag',
'',
'// load the styles',
'var content = require(' + request + ');',
// content list format is [id, css, media, sourceMap]
"if(typeof content === 'string') content = [[module.id, content, '']];",
'if(content.locals) module.exports = content.locals;'
]
if (!isServer) {
// on the client: dynamic inject + hot-reload
var code = [
'// add the styles to the DOM',
'var update = require(' + addStylesClientPath + ')(' + id + ', content, ' + isProduction + ');'
]
if (!isProduction) {
code = code.concat([
'// Hot Module Replacement',
'if(module.hot) {',
' // When the styles change, update the <style> tags',
' if(!content.locals) {',
' module.hot.accept(' + request + ', function() {',
' var newContent = require(' + request + ');',
" if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
' update(newContent);',
' });',
' }',
' // When the module is disposed, remove the <style> tags',
' module.hot.dispose(function() { update(); });',
'}'
])
}
return shared.concat(code).join('\n')
} else {
// on the server: attach to Vue SSR context
return shared.concat([
'// add CSS to SSR context',
'require(' + addStylesServerPath + ')(' + id + ', content, ' + isProduction + ');'
]).join('\n')
}
}
+215
View File
@@ -0,0 +1,215 @@
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
Modified by Evan You @yyx990803
*/
var hasDocument = typeof document !== 'undefined'
if (typeof DEBUG !== 'undefined' && DEBUG) {
if (!hasDocument) {
throw new Error(
'vue-style-loader cannot be used in a non-browser environment. ' +
"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
) }
}
var listToStyles = require('./listToStyles')
/*
type StyleObject = {
id: number;
parts: Array<StyleObjectPart>
}
type StyleObjectPart = {
css: string;
media: string;
sourceMap: ?string
}
*/
var stylesInDom = {/*
[id: number]: {
id: number,
refs: number,
parts: Array<(obj?: StyleObjectPart) => void>
}
*/}
var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
var singletonElement = null
var singletonCounter = 0
var isProduction = false
var noop = function () {}
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
module.exports = function (parentId, list, _isProduction) {
isProduction = _isProduction
var styles = listToStyles(parentId, list)
addStylesToDom(styles)
return function update (newList) {
var mayRemove = []
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var domStyle = stylesInDom[item.id]
domStyle.refs--
mayRemove.push(domStyle)
}
if (newList) {
styles = listToStyles(parentId, newList)
addStylesToDom(styles)
} else {
styles = []
}
for (var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i]
if (domStyle.refs === 0) {
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j]()
}
delete stylesInDom[domStyle.id]
}
}
}
}
function addStylesToDom (styles /* Array<StyleObject> */) {
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var domStyle = stylesInDom[item.id]
if (domStyle) {
domStyle.refs++
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j])
}
for (; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j]))
}
if (domStyle.parts.length > item.parts.length) {
domStyle.parts.length = item.parts.length
}
} else {
var parts = []
for (var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j]))
}
stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
}
}
}
function createStyleElement () {
var styleElement = document.createElement('style')
styleElement.type = 'text/css'
head.appendChild(styleElement)
return styleElement
}
function addStyle (obj /* StyleObjectPart */) {
var update, remove
var styleElement = document.querySelector('style[data-vue-ssr-id~="' + obj.id + '"]')
if (styleElement) {
if (isProduction) {
// has SSR styles and in production mode.
// simply do nothing.
return noop
} else {
// has SSR styles but in dev mode.
// for some reason Chrome can't handle source map in server-rendered
// style tags - source maps in <style> only works if the style tag is
// created and inserted dynamically. So we remove the server rendered
// styles and inject new ones.
styleElement.parentNode.removeChild(styleElement)
}
}
if (isOldIE) {
// use singleton mode for IE9.
var styleIndex = singletonCounter++
styleElement = singletonElement || (singletonElement = createStyleElement())
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
} else {
// use multi-style-tag mode in all other cases
styleElement = createStyleElement()
update = applyToTag.bind(null, styleElement)
remove = function () {
styleElement.parentNode.removeChild(styleElement)
}
}
update(obj)
return function updateStyle (newObj /* StyleObjectPart */) {
if (newObj) {
if (newObj.css === obj.css &&
newObj.media === obj.media &&
newObj.sourceMap === obj.sourceMap) {
return
}
update(obj = newObj)
} else {
remove()
}
}
}
var replaceText = (function () {
var textStore = []
return function (index, replacement) {
textStore[index] = replacement
return textStore.filter(Boolean).join('\n')
}
})()
function applyToSingletonTag (styleElement, index, remove, obj) {
var css = remove ? '' : obj.css
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css)
} else {
var cssNode = document.createTextNode(css)
var childNodes = styleElement.childNodes
if (childNodes[index]) styleElement.removeChild(childNodes[index])
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index])
} else {
styleElement.appendChild(cssNode)
}
}
}
function applyToTag (styleElement, obj) {
var css = obj.css
var media = obj.media
var sourceMap = obj.sourceMap
if (media) {
styleElement.setAttribute('media', media)
}
if (sourceMap) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
// http://stackoverflow.com/a/26603875
css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
}
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css
} else {
while (styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild)
}
styleElement.appendChild(document.createTextNode(css))
}
}
+79
View File
@@ -0,0 +1,79 @@
var listToStyles = require('./listToStyles')
module.exports = function (parentId, list, isProduction) {
if (typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
var context = __VUE_SSR_CONTEXT__
var styles = context._styles
if (!styles) {
styles = context._styles = {}
Object.defineProperty(context, 'styles', {
enumberable: true,
get : function() {
return (
context._renderedStyles ||
(context._renderedStyles = renderStyles(styles))
)
}
})
}
list = listToStyles(parentId, list)
if (isProduction) {
addStyleProd(styles, list)
} else {
addStyleDev(styles, list)
}
}
}
// In production, render as few style tags as possible.
// (mostly because IE9 has a limit on number of style tags)
function addStyleProd (styles, list) {
for (var i = 0; i < list.length; i++) {
var parts = list[i].parts
for (var j = 0; j < parts.length; j++) {
var part = parts[j]
// group style tags by media types.
var id = part.media || 'default'
var style = styles[id]
if (style) {
style.ids.push(part.id)
style.css += '\n' + part.css
} else {
styles[id] = {
ids: [part.id],
css: part.css,
media: part.media
}
}
}
}
}
// In dev we use individual style tag for each module for hot-reload
// and source maps.
function addStyleDev (styles, list) {
for (var i = 0; i < list.length; i++) {
var parts = list[i].parts
for (var j = 0; j < parts.length; j++) {
var part = parts[j]
styles[part.id] = {
ids: [part.id],
css: part.css,
media: part.media
}
}
}
}
function renderStyles (styles) {
var css = ''
for (var key in styles) {
var style = styles[key]
css += '<style data-vue-ssr-id="' + style.ids.join(' ') + '"' +
(style.media ? ( ' media="' + style.media + '"' ) : '') + '>' +
style.css + '</style>'
}
return css
}
+27
View File
@@ -0,0 +1,27 @@
/**
* Translates the list format produced by css-loader into something
* easier to manipulate.
*/
module.exports = function listToStyles (parentId, list) {
var styles = []
var newStyles = {}
for (var i = 0; i < list.length; i++) {
var item = list[i]
var id = item[0]
var css = item[1]
var media = item[2]
var sourceMap = item[3]
var part = {
id: parentId + ':' + i,
css: css,
media: media,
sourceMap: sourceMap
}
if (!newStyles[id]) {
styles.push(newStyles[id] = { id: id, parts: [part] })
} else {
newStyles[id].parts.push(part)
}
}
return styles
}
+18
View File
@@ -0,0 +1,18 @@
# Change Log
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
<a name="1.1.0"></a>
# [1.1.0](https://github.com/webpack/loader-utils/compare/v1.0.4...v1.1.0) (2017-03-16)
### Features
* **automatic-release:** Generation of automatic release ([7484d13](https://github.com/webpack/loader-utils/commit/7484d13))
* **parseQuery:** export parseQuery ([ddf64e4](https://github.com/webpack/loader-utils/commit/ddf64e4))
# Change Log
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+20
View File
@@ -0,0 +1,20 @@
Copyright JS Foundation and other contributors
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+229
View File
@@ -0,0 +1,229 @@
# loader-utils
## Methods
### `getOptions`
Recommended way to retrieve the options of a loader invocation:
```javascript
// inside your loader
const options = loaderUtils.getOptions(this);
```
1. If `this.query` is a string:
- Tries to parse the query string and returns a new object
- Throws if it's not a valid query string
2. If `this.query` is object-like, it just returns `this.query`
3. In any other case, it just returns `null`
**Please note:** The returned `options` object is *read-only*. It may be re-used across multiple invocations.
If you pass it on to another library, make sure to make a *deep copy* of it:
```javascript
const options = Object.assign(
{},
loaderUtils.getOptions(this), // it is safe to pass null to Object.assign()
defaultOptions
);
// don't forget nested objects or arrays
options.obj = Object.assign({}, options.obj);
options.arr = options.arr.slice();
someLibrary(options);
```
[clone-deep](https://www.npmjs.com/package/clone-deep) is a good library to make a deep copy of the options.
#### Options as query strings
If the loader options have been passed as loader query string (`loader?some&params`), the string is parsed by using [`parseQuery`](#parsequery).
### `parseQuery`
Parses a passed string (e.g. `loaderContext.resourceQuery`) as a query string, and returns an object.
``` javascript
const params = loaderUtils.parseQuery(this.resourceQuery); // resource: `file?param1=foo`
if (params.param1 === "foo") {
// do something
}
```
The string is parsed like this:
``` text
-> Error
? -> {}
?flag -> { flag: true }
?+flag -> { flag: true }
?-flag -> { flag: false }
?xyz=test -> { xyz: "test" }
?xyz=1 -> { xyz: "1" } // numbers are NOT parsed
?xyz[]=a -> { xyz: ["a"] }
?flag1&flag2 -> { flag1: true, flag2: true }
?+flag1,-flag2 -> { flag1: true, flag2: false }
?xyz[]=a,xyz[]=b -> { xyz: ["a", "b"] }
?a%2C%26b=c%2C%26d -> { "a,&b": "c,&d" }
?{data:{a:1},isJSON5:true} -> { data: { a: 1 }, isJSON5: true }
```
### `stringifyRequest`
Turns a request into a string that can be used inside `require()` or `import` while avoiding absolute paths.
Use it instead of `JSON.stringify(...)` if you're generating code inside a loader.
**Why is this necessary?** Since webpack calculates the hash before module paths are translated into module ids, we must avoid absolute paths to ensure
consistent hashes across different compilations.
This function:
- resolves absolute requests into relative requests if the request and the module are on the same hard drive
- replaces `\` with `/` if the request and the module are on the same hard drive
- won't change the path at all if the request and the module are on different hard drives
- applies `JSON.stringify` to the result
```javascript
loaderUtils.stringifyRequest(this, "./test.js");
// "\"./test.js\""
loaderUtils.stringifyRequest(this, ".\\test.js");
// "\"./test.js\""
loaderUtils.stringifyRequest(this, "test");
// "\"test\""
loaderUtils.stringifyRequest(this, "test/lib/index.js");
// "\"test/lib/index.js\""
loaderUtils.stringifyRequest(this, "otherLoader?andConfig!test?someConfig");
// "\"otherLoader?andConfig!test?someConfig\""
loaderUtils.stringifyRequest(this, require.resolve("test"));
// "\"../node_modules/some-loader/lib/test.js\""
loaderUtils.stringifyRequest(this, "C:\\module\\test.js");
// "\"../../test.js\"" (on Windows, in case the module and the request are on the same drive)
loaderUtils.stringifyRequest(this, "C:\\module\\test.js");
// "\"C:\\module\\test.js\"" (on Windows, in case the module and the request are on different drives)
loaderUtils.stringifyRequest(this, "\\\\network-drive\\test.js");
// "\"\\\\network-drive\\\\test.js\"" (on Windows, in case the module and the request are on different drives)
```
### `urlToRequest`
Converts some resource URL to a webpack module request.
```javascript
const url = "path/to/module.js";
const request = loaderUtils.urlToRequest(url); // "./path/to/module.js"
```
#### Module URLs
Any URL containing a `~` will be interpreted as a module request. Anything after the `~` will be considered the request path.
```javascript
const url = "~path/to/module.js";
const request = loaderUtils.urlToRequest(url); // "path/to/module.js"
```
#### Root-relative URLs
URLs that are root-relative (start with `/`) can be resolved relative to some arbitrary path by using the `root` parameter:
```javascript
const url = "/path/to/module.js";
const root = "./root";
const request = loaderUtils.urlToRequest(url, root); // "./root/path/to/module.js"
```
To convert a root-relative URL into a module URL, specify a `root` value that starts with `~`:
```javascript
const url = "/path/to/module.js";
const root = "~";
const request = loaderUtils.urlToRequest(url, root); // "path/to/module.js"
```
### `interpolateName`
Interpolates a filename template using multiple placeholders and/or a regular expression.
The template and regular expression are set as query params called `name` and `regExp` on the current loader's context.
```javascript
const interpolatedName = loaderUtils.interpolateName(loaderContext, name, options);
```
The following tokens are replaced in the `name` parameter:
* `[ext]` the extension of the resource
* `[name]` the basename of the resource
* `[path]` the path of the resource relative to the `context` query parameter or option.
* `[folder]` the folder of the resource is in.
* `[emoji]` a random emoji representation of `options.content`
* `[emoji:<length>]` same as above, but with a customizable number of emojis
* `[hash]` the hash of `options.content` (Buffer) (by default it's the hex digest of the md5 hash)
* `[<hashType>:hash:<digestType>:<length>]` optionally one can configure
* other `hashType`s, i. e. `sha1`, `md5`, `sha256`, `sha512`
* other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
* and `length` the length in chars
* `[N]` the N-th match obtained from matching the current file name against `options.regExp`
Examples
``` javascript
// loaderContext.resourcePath = "/app/js/javascript.js"
loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext]", { content: ... });
// => js/9473fdd0d880a43c21b7778d34872157.script.js
// loaderContext.resourcePath = "/app/page.html"
loaderUtils.interpolateName(loaderContext, "html-[hash:6].html", { content: ... });
// => html-9473fd.html
// loaderContext.resourcePath = "/app/flash.txt"
loaderUtils.interpolateName(loaderContext, "[hash]", { content: ... });
// => c31e9820c001c9c4a86bce33ce43b679
// loaderContext.resourcePath = "/app/img/image.gif"
loaderUtils.interpolateName(loaderContext, "[emoji]", { content: ... });
// => 👍
// loaderContext.resourcePath = "/app/img/image.gif"
loaderUtils.interpolateName(loaderContext, "[emoji:4]", { content: ... });
// => 🙍🏢📤🐝
// loaderContext.resourcePath = "/app/img/image.png"
loaderUtils.interpolateName(loaderContext, "[sha512:hash:base64:7].[ext]", { content: ... });
// => 2BKDTjl.png
// use sha512 hash instead of md5 and with only 7 chars of base64
// loaderContext.resourcePath = "/app/img/myself.png"
// loaderContext.query.name =
loaderUtils.interpolateName(loaderContext, "picture.png");
// => picture.png
// loaderContext.resourcePath = "/app/dir/file.png"
loaderUtils.interpolateName(loaderContext, "[path][name].[ext]?[hash]", { content: ... });
// => /app/dir/file.png?9473fdd0d880a43c21b7778d34872157
// loaderContext.resourcePath = "/app/js/page-home.js"
loaderUtils.interpolateName(loaderContext, "script-[1].[ext]", { regExp: "page-(.*)\\.js", content: ... });
// => script-home.js
```
### `getHashDigest`
``` javascript
const digestString = loaderUtils.getHashDigest(buffer, hashType, digestType, maxLength);
```
* `buffer` the content that should be hashed
* `hashType` one of `sha1`, `md5`, `sha256`, `sha512` or any other node.js supported hash type
* `digestType` one of `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
* `maxLength` the maximum length in chars
## License
MIT (http://www.opensource.org/licenses/mit-license.php)
@@ -0,0 +1,13 @@
"use strict";
function getCurrentRequest(loaderContext) {
if(loaderContext.currentRequest)
return loaderContext.currentRequest;
const request = loaderContext.loaders
.slice(loaderContext.loaderIndex)
.map(obj => obj.request)
.concat([loaderContext.resource]);
return request.join("!");
}
module.exports = getCurrentRequest;
@@ -0,0 +1,53 @@
"use strict";
const baseEncodeTables = {
26: "abcdefghijklmnopqrstuvwxyz",
32: "123456789abcdefghjkmnpqrstuvwxyz", // no 0lio
36: "0123456789abcdefghijklmnopqrstuvwxyz",
49: "abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ", // no lIO
52: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
58: "123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ", // no 0lIO
62: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
64: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_"
};
function encodeBufferToBase(buffer, base) {
const encodeTable = baseEncodeTables[base];
if(!encodeTable) throw new Error("Unknown encoding base" + base);
const readLength = buffer.length;
const Big = require("big.js");
Big.RM = Big.DP = 0;
let b = new Big(0);
for(let i = readLength - 1; i >= 0; i--) {
b = b.times(256).plus(buffer[i]);
}
let output = "";
while(b.gt(0)) {
output = encodeTable[b.mod(base)] + output;
b = b.div(base);
}
Big.DP = 20;
Big.RM = 1;
return output;
}
function getHashDigest(buffer, hashType, digestType, maxLength) {
hashType = hashType || "md5";
maxLength = maxLength || 9999;
const hash = require("crypto").createHash(hashType);
hash.update(buffer);
if(digestType === "base26" || digestType === "base32" || digestType === "base36" ||
digestType === "base49" || digestType === "base52" || digestType === "base58" ||
digestType === "base62" || digestType === "base64") {
return encodeBufferToBase(hash.digest(), digestType.substr(4)).substr(0, maxLength);
} else {
return hash.digest(digestType || "hex").substr(0, maxLength);
}
}
module.exports = getHashDigest;
@@ -0,0 +1,17 @@
"use strict";
const parseQuery = require("./parseQuery");
function getOptions(loaderContext) {
const query = loaderContext.query;
if(typeof query === "string" && query !== "") {
return parseQuery(loaderContext.query);
}
if(!query || typeof query !== "object") {
// Not object-like queries are not supported.
return null;
}
return query;
}
module.exports = getOptions;
@@ -0,0 +1,13 @@
"use strict";
function getRemainingRequest(loaderContext) {
if(loaderContext.remainingRequest)
return loaderContext.remainingRequest;
const request = loaderContext.loaders
.slice(loaderContext.loaderIndex + 1)
.map(obj => obj.request)
.concat([loaderContext.resource]);
return request.join("!");
}
module.exports = getRemainingRequest;
+23
View File
@@ -0,0 +1,23 @@
"use strict";
const getOptions = require("./getOptions");
const parseQuery = require("./parseQuery");
const stringifyRequest = require("./stringifyRequest");
const getRemainingRequest = require("./getRemainingRequest");
const getCurrentRequest = require("./getCurrentRequest");
const isUrlRequest = require("./isUrlRequest");
const urlToRequest = require("./urlToRequest");
const parseString = require("./parseString");
const getHashDigest = require("./getHashDigest");
const interpolateName = require("./interpolateName");
exports.getOptions = getOptions;
exports.parseQuery = parseQuery;
exports.stringifyRequest = stringifyRequest;
exports.getRemainingRequest = getRemainingRequest;
exports.getCurrentRequest = getCurrentRequest;
exports.isUrlRequest = isUrlRequest;
exports.urlToRequest = urlToRequest;
exports.parseString = parseString;
exports.getHashDigest = getHashDigest;
exports.interpolateName = interpolateName;
@@ -0,0 +1,95 @@
"use strict";
const path = require("path");
const emojisList = require("emojis-list");
const getHashDigest = require("./getHashDigest");
const emojiRegex = /[\uD800-\uDFFF]./;
const emojiList = emojisList.filter(emoji => emojiRegex.test(emoji));
const emojiCache = {};
function encodeStringToEmoji(content, length) {
if(emojiCache[content]) return emojiCache[content];
length = length || 1;
const emojis = [];
do {
const index = Math.floor(Math.random() * emojiList.length);
emojis.push(emojiList[index]);
emojiList.splice(index, 1);
} while(--length > 0);
const emojiEncoding = emojis.join("");
emojiCache[content] = emojiEncoding;
return emojiEncoding;
}
function interpolateName(loaderContext, name, options) {
let filename;
if(typeof name === "function") {
filename = name(loaderContext.resourcePath);
} else {
filename = name || "[hash].[ext]";
}
const context = options.context;
const content = options.content;
const regExp = options.regExp;
let ext = "bin";
let basename = "file";
let directory = "";
let folder = "";
if(loaderContext.resourcePath) {
const parsed = path.parse(loaderContext.resourcePath);
let resourcePath = loaderContext.resourcePath;
if(parsed.ext) {
ext = parsed.ext.substr(1);
}
if(parsed.dir) {
basename = parsed.name;
resourcePath = parsed.dir + path.sep;
}
if(typeof context !== "undefined") {
directory = path.relative(context, resourcePath + "_").replace(/\\/g, "/").replace(/\.\.(\/)?/g, "_$1");
directory = directory.substr(0, directory.length - 1);
} else {
directory = resourcePath.replace(/\\/g, "/").replace(/\.\.(\/)?/g, "_$1");
}
if(directory.length === 1) {
directory = "";
} else if(directory.length > 1) {
folder = path.basename(directory);
}
}
let url = filename;
if(content) {
// Match hash template
url = url
.replace(
/\[(?:(\w+):)?hash(?::([a-z]+\d*))?(?::(\d+))?\]/ig,
(all, hashType, digestType, maxLength) => getHashDigest(content, hashType, digestType, parseInt(maxLength, 10))
)
.replace(
/\[emoji(?::(\d+))?\]/ig,
(all, length) => encodeStringToEmoji(content, length)
);
}
url = url
.replace(/\[ext\]/ig, () => ext)
.replace(/\[name\]/ig, () => basename)
.replace(/\[path\]/ig, () => directory)
.replace(/\[folder\]/ig, () => folder);
if(regExp && loaderContext.resourcePath) {
const match = loaderContext.resourcePath.match(new RegExp(regExp));
match && match.forEach((matched, i) => {
url = url.replace(
new RegExp("\\[" + i + "\\]", "ig"),
matched
);
});
}
if(typeof loaderContext.options === "object" && typeof loaderContext.options.customInterpolateName === "function") {
url = loaderContext.options.customInterpolateName.call(loaderContext, url, name, options);
}
return url;
}
module.exports = interpolateName;
@@ -0,0 +1,14 @@
"use strict";
function isUrlRequest(url, root) {
// An URL is not an request if
// 1. it's a Data Url
// 2. it's an absolute url or and protocol-relative
// 3. it's some kind of url for a template
if(/^data:|^chrome-extension:|^(https?:)?\/\/|^[\{\}\[\]#*;,'§\$%&\(=?`´\^°<>]/.test(url)) return false;
// 4. It's also not an request if root isn't set and it's a root-relative url
if((root === undefined || root === false) && /^\//.test(url)) return false;
return true;
}
module.exports = isUrlRequest;
@@ -0,0 +1,54 @@
"use strict";
const JSON5 = require("json5");
const specialValues = {
"null": null,
"true": true,
"false": false
};
function parseQuery(query) {
if(query.substr(0, 1) !== "?") {
throw new Error("A valid query string passed to parseQuery should begin with '?'");
}
query = query.substr(1);
if(!query) {
return {};
}
if(query.substr(0, 1) === "{" && query.substr(-1) === "}") {
return JSON5.parse(query);
}
const queryArgs = query.split(/[,&]/g);
const result = {};
queryArgs.forEach(arg => {
const idx = arg.indexOf("=");
if(idx >= 0) {
let name = arg.substr(0, idx);
let value = decodeURIComponent(arg.substr(idx + 1));
if(specialValues.hasOwnProperty(value)) {
value = specialValues[value];
}
if(name.substr(-2) === "[]") {
name = decodeURIComponent(name.substr(0, name.length - 2));
if(!Array.isArray(result[name]))
result[name] = [];
result[name].push(value);
} else {
name = decodeURIComponent(name);
result[name] = value;
}
} else {
if(arg.substr(0, 1) === "-") {
result[decodeURIComponent(arg.substr(1))] = false;
} else if(arg.substr(0, 1) === "+") {
result[decodeURIComponent(arg.substr(1))] = true;
} else {
result[decodeURIComponent(arg)] = true;
}
}
});
return result;
}
module.exports = parseQuery;
@@ -0,0 +1,19 @@
"use strict";
function parseString(str) {
try {
if(str[0] === "\"") return JSON.parse(str);
if(str[0] === "'" && str.substr(str.length - 1) === "'") {
return parseString(
str
.replace(/\\.|"/g, x => x === "\"" ? "\\\"" : x)
.replace(/^'|'$/g, "\"")
);
}
return JSON.parse("\"" + str + "\"");
} catch(e) {
return str;
}
}
module.exports = parseString;
@@ -0,0 +1,40 @@
"use strict";
const path = require("path");
const matchRelativePath = /^\.\.?[/\\]/;
function isAbsolutePath(str) {
return path.posix.isAbsolute(str) || path.win32.isAbsolute(str);
}
function isRelativePath(str) {
return matchRelativePath.test(str);
}
function stringifyRequest(loaderContext, request) {
const splitted = request.split("!");
const context = loaderContext.context || (loaderContext.options && loaderContext.options.context);
return JSON.stringify(splitted.map(part => {
// First, separate singlePath from query, because the query might contain paths again
const splittedPart = part.match(/^(.*?)(\?.*)/);
let singlePath = splittedPart ? splittedPart[1] : part;
const query = splittedPart ? splittedPart[2] : "";
if(isAbsolutePath(singlePath) && context) {
singlePath = path.relative(context, singlePath);
if(isAbsolutePath(singlePath)) {
// If singlePath still matches an absolute path, singlePath was on a different drive than context.
// In this case, we leave the path platform-specific without replacing any separators.
// @see https://github.com/webpack/loader-utils/pull/14
return singlePath + query;
}
if(isRelativePath(singlePath) === false) {
// Ensure that the relative path starts at least with ./ otherwise it would be a request into the modules directory (like node_modules).
singlePath = "./" + singlePath;
}
}
return singlePath.replace(/\\/g, "/") + query;
}).join("!"));
}
module.exports = stringifyRequest;
@@ -0,0 +1,49 @@
"use strict";
// we can't use path.win32.isAbsolute because it also matches paths starting with a forward slash
const matchNativeWin32Path = /^[A-Z]:[/\\]|^\\\\/i;
function urlToRequest(url, root) {
const moduleRequestRegex = /^[^?]*~/;
let request;
if(matchNativeWin32Path.test(url)) {
// absolute windows path, keep it
request = url;
} else if(root !== undefined && root !== false && /^\//.test(url)) {
// if root is set and the url is root-relative
switch(typeof root) {
// 1. root is a string: root is prefixed to the url
case "string":
// special case: `~` roots convert to module request
if(moduleRequestRegex.test(root)) {
request = root.replace(/([^~\/])$/, "$1/") + url.slice(1);
} else {
request = root + url;
}
break;
// 2. root is `true`: absolute paths are allowed
// *nix only, windows-style absolute paths are always allowed as they doesn't start with a `/`
case "boolean":
request = url;
break;
default:
throw new Error("Unexpected parameters to loader-utils 'urlToRequest': url = " + url + ", root = " + root + ".");
}
} else if(/^\.\.?\//.test(url)) {
// A relative url stays
request = url;
} else {
// every other url is threaded like a relative url
request = "./" + url;
}
// A `~` makes the url an module
if(moduleRequestRegex.test(request)) {
request = request.replace(moduleRequestRegex, "");
}
return request;
}
module.exports = urlToRequest;
+109
View File
@@ -0,0 +1,109 @@
{
"_args": [
[
{
"raw": "loader-utils@^1.0.2",
"scope": null,
"escapedName": "loader-utils",
"name": "loader-utils",
"rawSpec": "^1.0.2",
"spec": ">=1.0.2 <2.0.0",
"type": "range"
},
"c:\\xampp\\htdocs\\laravel\\node_modules\\vue-style-loader"
]
],
"_from": "loader-utils@>=1.0.2 <2.0.0",
"_id": "loader-utils@1.1.0",
"_inCache": true,
"_location": "/vue-style-loader/loader-utils",
"_nodeVersion": "7.7.3",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/loader-utils-1.1.0.tgz_1489673126296_0.2887681087013334"
},
"_npmUser": {
"name": "jhnns",
"email": "mail@johannesewald.de"
},
"_npmVersion": "4.1.2",
"_phantomChildren": {},
"_requested": {
"raw": "loader-utils@^1.0.2",
"scope": null,
"escapedName": "loader-utils",
"name": "loader-utils",
"rawSpec": "^1.0.2",
"spec": ">=1.0.2 <2.0.0",
"type": "range"
},
"_requiredBy": [
"/vue-style-loader"
],
"_resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
"_shasum": "c98aef488bcceda2ffb5e2de646d6a754429f5cd",
"_shrinkwrap": null,
"_spec": "loader-utils@^1.0.2",
"_where": "c:\\xampp\\htdocs\\laravel\\node_modules\\vue-style-loader",
"author": {
"name": "Tobias Koppers @sokra"
},
"bugs": {
"url": "https://github.com/webpack/loader-utils/issues"
},
"dependencies": {
"big.js": "^3.1.3",
"emojis-list": "^2.0.0",
"json5": "^0.5.0"
},
"description": "utils for webpack loaders",
"devDependencies": {
"coveralls": "^2.11.2",
"eslint": "^3.15.0",
"eslint-plugin-node": "^4.0.1",
"istanbul": "^0.3.14",
"mocha": "^1.21.4",
"standard-version": "^4.0.0"
},
"directories": {},
"dist": {
"shasum": "c98aef488bcceda2ffb5e2de646d6a754429f5cd",
"tarball": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz"
},
"engines": {
"node": ">=4.0.0"
},
"files": [
"lib"
],
"gitHead": "a5602addda0c5e98e70d067b8dd050d5e4153f1d",
"homepage": "https://github.com/webpack/loader-utils#readme",
"license": "MIT",
"main": "lib/index.js",
"maintainers": [
{
"name": "jhnns",
"email": "mail@johannesewald.de"
},
{
"name": "sokra",
"email": "tobias.koppers@googlemail.com"
}
],
"name": "loader-utils",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/webpack/loader-utils.git"
},
"scripts": {
"cover": "istanbul cover -x *.runtime.js node_modules/mocha/bin/_mocha",
"lint": "eslint lib test",
"posttest": "npm run lint",
"release": "npm test && standard-version",
"test": "mocha",
"travis": "npm run cover -- --report lcovonly"
},
"version": "1.1.0"
}
+91
View File
@@ -0,0 +1,91 @@
{
"_args": [
[
{
"raw": "vue-style-loader@^2.0.0",
"scope": null,
"escapedName": "vue-style-loader",
"name": "vue-style-loader",
"rawSpec": "^2.0.0",
"spec": ">=2.0.0 <3.0.0",
"type": "range"
},
"c:\\xampp\\htdocs\\laravel\\node_modules\\vue-loader"
]
],
"_from": "vue-style-loader@>=2.0.0 <3.0.0",
"_id": "vue-style-loader@2.0.5",
"_inCache": true,
"_location": "/vue-style-loader",
"_nodeVersion": "7.4.0",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/vue-style-loader-2.0.5.tgz_1490707015744_0.46847168053500354"
},
"_npmUser": {
"name": "yyx990803",
"email": "yyx990803@gmail.com"
},
"_npmVersion": "4.0.5",
"_phantomChildren": {
"big.js": "3.1.3",
"emojis-list": "2.1.0",
"json5": "0.5.1"
},
"_requested": {
"raw": "vue-style-loader@^2.0.0",
"scope": null,
"escapedName": "vue-style-loader",
"name": "vue-style-loader",
"rawSpec": "^2.0.0",
"spec": ">=2.0.0 <3.0.0",
"type": "range"
},
"_requiredBy": [
"/vue-loader"
],
"_resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-2.0.5.tgz",
"_shasum": "f0efac992febe3f12e493e334edb13cd235a3d22",
"_shrinkwrap": null,
"_spec": "vue-style-loader@^2.0.0",
"_where": "c:\\xampp\\htdocs\\laravel\\node_modules\\vue-loader",
"author": {
"name": "Evan You"
},
"bugs": {
"url": "https://github.com/vuejs/vue-style-loader/issues"
},
"dependencies": {
"hash-sum": "^1.0.2",
"loader-utils": "^1.0.2"
},
"description": "Vue.js style loader module for webpack",
"devDependencies": {
"jest": "^18.1.0"
},
"directories": {},
"dist": {
"shasum": "f0efac992febe3f12e493e334edb13cd235a3d22",
"tarball": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-2.0.5.tgz"
},
"gitHead": "cbee333db40576cd1ec252298173547ff7b3aadc",
"homepage": "https://github.com/vuejs/vue-style-loader#readme",
"license": "MIT",
"maintainers": [
{
"name": "yyx990803",
"email": "yyx990803@gmail.com"
}
],
"name": "vue-style-loader",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/vuejs/vue-style-loader.git"
},
"scripts": {
"test": "jest"
},
"version": "2.0.5"
}
+94
View File
@@ -0,0 +1,94 @@
const addStylesClient = require('../lib/addStylesClient')
const addStylesServer = require('../lib/addStylesServer')
const mockedList = [
[1, 'h1 { color: red; }', ''],
[1, 'p { color: green; }', ''],
[2, 'span { color: blue; }', ''],
[2, 'span { color: blue; }', 'print']
]
test('addStylesClient (dev)', () => {
const update = addStylesClient('foo', mockedList, false)
assertStylesMatch(mockedList)
const mockedList2 = mockedList.slice(1, 3)
update(mockedList2)
assertStylesMatch(mockedList2)
update()
expect(document.querySelectorAll('style').length).toBe(0)
})
test('addStylesClient (prod)', () => {
const update = addStylesClient('foo', mockedList, true)
assertStylesMatch(mockedList)
const mockedList2 = mockedList.slice(2)
update(mockedList2)
assertStylesMatch(mockedList2)
update()
expect(document.querySelectorAll('style').length).toBe(0)
})
test('addStylesClient (dev + ssr)', () => {
mockSSRTags(mockedList, 'foo')
const update = addStylesClient('foo', mockedList, false)
assertStylesMatch(mockedList)
update()
expect(document.querySelectorAll('style').length).toBe(0)
})
test('addStylesClient (prod + ssr)', () => {
mockProdSSRTags(mockedList, 'foo')
const update = addStylesClient('foo', mockedList, true)
expect(document.querySelectorAll('style').length).toBe(1)
})
test('addStylesServer (dev)', () => {
const context = global.__VUE_SSR_CONTEXT__ = {}
addStylesServer('foo', mockedList, false)
expect(context.styles).toBe(
`<style data-vue-ssr-id="foo:0">h1 { color: red; }</style>` +
`<style data-vue-ssr-id="foo:1">p { color: green; }</style>` +
`<style data-vue-ssr-id="foo:2">span { color: blue; }</style>` +
`<style data-vue-ssr-id="foo:3" media="print">span { color: blue; }</style>`
)
})
test('addStylesServer (prod)', () => {
const context = global.__VUE_SSR_CONTEXT__ = {}
addStylesServer('foo', mockedList, true)
expect(context.styles).toBe(
`<style data-vue-ssr-id="foo:0 foo:1 foo:2">` +
`h1 { color: red; }\np { color: green; }\nspan { color: blue; }` +
`</style>` +
`<style data-vue-ssr-id="foo:3" media="print">span { color: blue; }</style>`
)
})
// --- helpers ---
function assertStylesMatch (list) {
const styles = document.querySelectorAll('style')
expect(styles.length).toBe(list.length)
;[].forEach.call(styles, (style, i) => {
expect(style.textContent.indexOf(list[i][1]) > -1).toBe(true)
})
}
function mockSSRTags (list, parentId) {
list.forEach((item, i) => {
const style = document.createElement('style')
style.setAttribute('data-vue-ssr-id', `${parentId}:${i}`)
style.textContent = item[1]
if (item[2]) {
style.setAttribute('media', item[2])
}
document.head.appendChild(style)
})
}
function mockProdSSRTags (list, parentId) {
const style = document.createElement('style')
style.setAttribute('data-vue-ssr-id', list.map((item, i) => `${parentId}:${i}`).join(' '))
style.textContent = list.map(item => item[1]).join('\n')
document.head.appendChild(style)
}
+2038
View File
File diff suppressed because it is too large Load Diff