package/package.json 000644 0000001242 3560116604 011545 0 ustar 00 000000 000000 {
"name": "vue-style-loader",
"version": "4.1.2",
"author": "Evan You",
"description": "Vue.js style loader module for webpack",
"repository": {
"type": "git",
"url": "git@github.com:vuejs/vue-style-loader.git"
},
"scripts": {
"test": "jest",
"prepublishOnly": "conventional-changelog -p angular -r 2 -i CHANGELOG.md -s"
},
"license": "MIT",
"dependencies": {
"hash-sum": "^1.0.2",
"loader-utils": "^1.0.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-jest": "^22.1.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"conventional-changelog-cli": "^2.0.1",
"jest": "^22.1.4"
}
}
package/.babelrc 000644 0000000067 3560116604 010656 0 ustar 00 000000 000000 {
"plugins": ["transform-es2015-modules-commonjs"]
}
package/CHANGELOG.md 000644 0000003433 3560116604 011074 0 ustar 00 000000 000000
## [4.1.2](https://github.com/vuejs/vue-style-loader/compare/v4.1.1...v4.1.2) (2018-08-13)
### Bug Fixes
* fix inconsistent hashes between Windows and POSIX systems ([#28](https://github.com/vuejs/vue-style-loader/issues/28)) ([cf8b6e8](https://github.com/vuejs/vue-style-loader/commit/cf8b6e8))
## [4.1.1](https://github.com/vuejs/vue-style-loader/compare/v4.1.0...v4.1.1) (2018-07-17)
### Bug Fixes
* fix addStyleShadow when same style object is inserted multiple times ([12846a6](https://github.com/vuejs/vue-style-loader/commit/12846a6))
# [4.1.0](https://github.com/vuejs/vue-style-loader/compare/v4.0.2...v4.1.0) (2018-03-20)
### Features
* support vue-loader 15 ([0c7ee9d](https://github.com/vuejs/vue-style-loader/commit/0c7ee9d))
## [4.0.2](https://github.com/vuejs/vue-style-loader/compare/v4.0.1...v4.0.2) (2018-02-13)
## [4.0.1](https://github.com/vuejs/vue-style-loader/compare/v4.0.0...v4.0.1) (2018-01-31)
### Bug Fixes
* typo ([00087b7](https://github.com/vuejs/vue-style-loader/commit/00087b7))
# [4.0.0](https://github.com/vuejs/vue-style-loader/compare/v3.1.1...v4.0.0) (2018-01-31)
### Features
* shadowMode ([94737e5](https://github.com/vuejs/vue-style-loader/commit/94737e5))
* use ESM for runtime files ([18d0ae4](https://github.com/vuejs/vue-style-loader/commit/18d0ae4))
## [3.1.1](https://github.com/vuejs/vue-style-loader/compare/v3.1.0...v3.1.1) (2018-01-24)
# [3.1.0](https://github.com/vuejs/vue-style-loader/compare/v3.0.3...v3.1.0) (2018-01-24)
### Features
* add `ssrId` option for rendering ssr id on client ([5281305](https://github.com/vuejs/vue-style-loader/commit/5281305))
package/index.js 000644 0000007525 3560116604 010736 0 ustar 00 000000 000000 /*
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')
var qs = require('querystring')
module.exports = function () {}
module.exports.pitch = function (remainingRequest) {
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 addStylesShadowPath = loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'lib/addStylesShadow.js'))
var request = loaderUtils.stringifyRequest(this, '!!' + remainingRequest)
var relPath = path.relative(__dirname, this.resourcePath).replace(/\\/g, '/')
var id = JSON.stringify(hash(request + relPath))
var options = loaderUtils.getOptions(this) || {}
// 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) ||
options.manualInject ||
qs.parse(this.resourceQuery.slice(1)).vue != null
)
var shared = [
'// style-loader: Adds some css to the DOM by adding a '
}
return css
}
package/lib/addStylesShadow.js 000644 0000003564 3560116604 013476 0 ustar 00 000000 000000 import listToStyles from './listToStyles'
export default function addStylesToShadowDOM (parentId, list, shadowRoot) {
var styles = listToStyles(parentId, list)
addStyles(styles, shadowRoot)
}
/*
type StyleObject = {
id: number;
parts: Array
}
type StyleObjectPart = {
css: string;
media: string;
sourceMap: ?string
}
*/
function addStyles (styles /* Array */, shadowRoot) {
const injectedStyles =
shadowRoot._injectedStyles ||
(shadowRoot._injectedStyles = {})
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var style = injectedStyles[item.id]
if (!style) {
for (var j = 0; j < item.parts.length; j++) {
addStyle(item.parts[j], shadowRoot)
}
injectedStyles[item.id] = true
}
}
}
function createStyleElement (shadowRoot) {
var styleElement = document.createElement('style')
styleElement.type = 'text/css'
shadowRoot.appendChild(styleElement)
return styleElement
}
function addStyle (obj /* StyleObjectPart */, shadowRoot) {
var styleElement = createStyleElement(shadowRoot)
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))
}
}
package/lib/listToStyles.js 000644 0000001175 3560116604 013052 0 ustar 00 000000 000000 /**
* Translates the list format produced by css-loader into something
* easier to manipulate.
*/
export default 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
}
package/test/test.js 000644 0000005751 3560116604 011564 0 ustar 00 000000 000000 import addStylesClient from '../lib/addStylesClient'
import addStylesServer from '../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(
`` +
`` +
`` +
``
)
})
test('addStylesServer (prod)', () => {
const context = global.__VUE_SSR_CONTEXT__ = {}
addStylesServer('foo', mockedList, true)
expect(context.styles).toBe(
`` +
``
)
})
// --- 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)
}