Socket
Socket
Sign inDemoInstall

style-loader

Package Overview
Dependencies
Maintainers
8
Versions
76
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

style-loader - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

dist/runtime/getTarget.js
dist/runtime/insertStyleElement.js
dist/runtime/isOldIE.js
dist/runtime/singletonStyleDomAPI.js
dist/runtime/styleDomAPI.js
dist/utils.js

2

dist/cjs.js
"use strict";
const loader = require('./index');
const loader = require("./index");
module.exports = loader.default;

274

dist/index.js

@@ -8,10 +8,4 @@ "use strict";

var _path = _interopRequireDefault(require("path"));
var _utils = require("./utils");
var _loaderUtils = _interopRequireDefault(require("loader-utils"));
var _schemaUtils = require("schema-utils");
var _isEqualLocals = _interopRequireDefault(require("./runtime/isEqualLocals"));
var _options = _interopRequireDefault(require("./options.json"));

@@ -21,15 +15,13 @@

const loaderApi = () => {};
const loaderAPI = () => {};
loaderApi.pitch = function loader(request) {
const options = _loaderUtils.default.getOptions(this);
(0, _schemaUtils.validate)(_options.default, options, {
name: 'Style Loader',
baseDataPath: 'options'
});
const insert = typeof options.insert === 'undefined' ? '"head"' : typeof options.insert === 'string' ? JSON.stringify(options.insert) : options.insert.toString();
const injectType = options.injectType || 'styleTag';
const esModule = typeof options.esModule !== 'undefined' ? options.esModule : true;
const namedExport = esModule && options.modules && options.modules.namedExport;
loaderAPI.pitch = function loader(request) {
const options = this.getOptions(_options.default);
const insert = typeof options.insert === "string" ? JSON.stringify(options.insert) : '"head"';
const insertIsFunction = typeof options.insert === "function";
const injectType = options.injectType || "styleTag";
const {
styleTagTransform
} = options;
const esModule = typeof options.esModule !== "undefined" ? options.esModule : true;
const runtimeOptions = {

@@ -41,94 +33,99 @@ injectType: options.injectType,

};
let setAttributesFn;
switch (injectType) {
case 'linkTag':
{
const hmrCode = this.hot ? `
if (module.hot) {
module.hot.accept(
${_loaderUtils.default.stringifyRequest(this, `!!${request}`)},
function() {
${esModule ? 'update(content);' : `content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
if (typeof options.attributes !== "undefined") {
setAttributesFn = typeof options.attributes.nonce === "undefined" ? `function(style, attributes) {
var nonce =
typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
content = content.__esModule ? content.default : content;
if (nonce) {
attributes.nonce = nonce;
}
update(content);`}
Object.keys(attributes).forEach((key) => {
style.setAttribute(key, attributes[key]);
});
}` : `function(style, attributes) {
Object.keys(attributes).forEach((key) => {
style.setAttribute(key, attributes[key]);
});
}`;
} else {
setAttributesFn = `function(style) {
var nonce =
typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
if (nonce) {
style.setAttribute("nonce", nonce);
}
}`;
}
const insertFn = insertIsFunction ? options.insert.toString() : `function(style){
var target = getTarget(${insert});
if (!target) {
throw new Error(
"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
);
}
);
module.hot.dispose(function() {
update();
});
}` : '';
return `${esModule ? `import api from ${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoLinkTag.js')}`)};
import content from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : `var api = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoLinkTag.js')}`)});
var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
target.appendChild(style);
}`;
const styleTagTransformFn = typeof styleTagTransform === "function" ? styleTagTransform.toString() : `function(css, style){
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
while (style.firstChild) {
style.removeChild(style.firstChild);
}
content = content.__esModule ? content.default : content;`}
style.appendChild(document.createTextNode(css));
}
}`;
switch (injectType) {
case "linkTag":
{
const hmrCode = this.hot ? (0, _utils.getLinkHmrCode)(esModule, this, request) : "";
return `
${(0, _utils.getImportLinkAPICode)(esModule, this)}
${(0, _utils.getImportGetTargetCode)(esModule, this, insertIsFunction)}
${(0, _utils.getImportLinkContentCode)(esModule, this, request)}
${esModule ? "" : `content = content.__esModule ? content.default : content;`}
var options = ${JSON.stringify(runtimeOptions)};
options.insert = ${insert};
options.insert = ${insertFn};
var update = api(content, options);
var update = API(content, options);
${hmrCode}
${esModule ? 'export default {}' : ''}`;
${esModule ? "export default {}" : ""}`;
}
case 'lazyStyleTag':
case 'lazySingletonStyleTag':
case "lazyStyleTag":
case "lazyAutoStyleTag":
case "lazySingletonStyleTag":
{
const isSingleton = injectType === 'lazySingletonStyleTag';
const hmrCode = this.hot ? `
if (module.hot) {
if (!content.locals || module.hot.invalidate) {
var isEqualLocals = ${_isEqualLocals.default.toString()};
var oldLocals = ${namedExport ? 'locals' : 'content.locals'};
const isSingleton = injectType === "lazySingletonStyleTag";
const isAuto = injectType === "lazyAutoStyleTag";
const hmrCode = this.hot ? (0, _utils.getStyleHmrCode)(esModule, this, request, true) : "";
return `
var exported = {};
module.hot.accept(
${_loaderUtils.default.stringifyRequest(this, `!!${request}`)},
function () {
${esModule ? `if (!isEqualLocals(oldLocals, ${namedExport ? 'locals' : 'content.locals'}, ${namedExport})) {
module.hot.invalidate();
${(0, _utils.getImportStyleAPICode)(esModule, this)}
${(0, _utils.getImportStyleDomAPICode)(esModule, this, isSingleton, isAuto)}
${(0, _utils.getImportGetTargetCode)(esModule, this, insertIsFunction)}
${(0, _utils.getImportInsertStyleElementCode)(esModule, this)}
${(0, _utils.getImportStyleContentCode)(esModule, this, request)}
${isAuto ? (0, _utils.getImportIsOldIECode)(esModule, this) : ""}
${esModule ? `if (content && content.locals) {
exported.locals = content.locals;
}
` : `content = content.__esModule ? content.default : content;
return;
}
exported.locals = content.locals || {};`}
oldLocals = ${namedExport ? 'locals' : 'content.locals'};
if (update && refs > 0) {
update(content);
}` : `content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
content = content.__esModule ? content.default : content;
if (!isEqualLocals(oldLocals, content.locals)) {
module.hot.invalidate();
return;
}
oldLocals = content.locals;
if (update && refs > 0) {
update(content);
}`}
}
)
}
module.hot.dispose(function() {
if (update) {
update();
}
});
}` : '';
return `${esModule ? `import api from ${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)};
import content${namedExport ? ', * as locals' : ''} from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : `var api = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)});
var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
content = content.__esModule ? content.default : content;`}
var refs = 0;

@@ -138,11 +135,11 @@ var update;

options.insert = ${insert};
options.singleton = ${isSingleton};
${(0, _utils.getStyleTagTransformFn)(styleTagTransformFn, isSingleton)};
options.setAttributes = ${setAttributesFn};
options.insert = ${insertFn};
options.domAPI = ${(0, _utils.getdomAPI)(isAuto)};
options.insertStyleElement = insertStyleElement;
var exported = {};
${namedExport ? '' : 'exported.locals = content.locals || {};'}
exported.use = function() {
if (!(refs++)) {
update = api(content, options);
update = API(content, options);
}

@@ -161,70 +158,37 @@

${esModule ? `${namedExport ? `export * from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : ''};
export default exported;` : 'module.exports = exported;'}
${(0, _utils.getExportLazyStyleCode)(esModule, this, request)}
`;
}
case 'styleTag':
case 'singletonStyleTag':
case "styleTag":
case "autoStyleTag":
case "singletonStyleTag":
default:
{
const isSingleton = injectType === 'singletonStyleTag';
const hmrCode = this.hot ? `
if (module.hot) {
if (!content.locals || module.hot.invalidate) {
var isEqualLocals = ${_isEqualLocals.default.toString()};
var oldLocals = ${namedExport ? 'locals' : 'content.locals'};
const isSingleton = injectType === "singletonStyleTag";
const isAuto = injectType === "autoStyleTag";
const hmrCode = this.hot ? (0, _utils.getStyleHmrCode)(esModule, this, request, false) : "";
return `
${(0, _utils.getImportStyleAPICode)(esModule, this)}
${(0, _utils.getImportStyleDomAPICode)(esModule, this, isSingleton, isAuto)}
${(0, _utils.getImportGetTargetCode)(esModule, this, insertIsFunction)}
${(0, _utils.getImportInsertStyleElementCode)(esModule, this)}
${(0, _utils.getImportStyleContentCode)(esModule, this, request)}
${isAuto ? (0, _utils.getImportIsOldIECode)(esModule, this) : ""}
${esModule ? "" : `content = content.__esModule ? content.default : content;`}
module.hot.accept(
${_loaderUtils.default.stringifyRequest(this, `!!${request}`)},
function () {
${esModule ? `if (!isEqualLocals(oldLocals, ${namedExport ? 'locals' : 'content.locals'}, ${namedExport})) {
module.hot.invalidate();
return;
}
oldLocals = ${namedExport ? 'locals' : 'content.locals'};
update(content);` : `content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
content = content.__esModule ? content.default : content;
if (typeof content === 'string') {
content = [[module.id, content, '']];
}
if (!isEqualLocals(oldLocals, content.locals)) {
module.hot.invalidate();
return;
}
oldLocals = content.locals;
update(content);`}
}
)
}
module.hot.dispose(function() {
update();
});
}` : '';
return `${esModule ? `import api from ${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)};
import content${namedExport ? ', * as locals' : ''} from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : `var api = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)});
var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
content = content.__esModule ? content.default : content;`}
var options = ${JSON.stringify(runtimeOptions)};
options.insert = ${insert};
options.singleton = ${isSingleton};
${(0, _utils.getStyleTagTransformFn)(styleTagTransformFn, isSingleton)};
options.setAttributes = ${setAttributesFn};
options.insert = ${insertFn};
options.domAPI = ${(0, _utils.getdomAPI)(isAuto)};
options.insertStyleElement = insertStyleElement;
var update = api(content, options);
var update = API(content, options);
${hmrCode}
${esModule ? namedExport ? `export * from ${_loaderUtils.default.stringifyRequest(this, `!!${request}`)};` : 'export default content.locals || {};' : 'module.exports = content.locals || {};'}`;
${(0, _utils.getExportStyleCode)(esModule, this, request)}
`;
}

@@ -234,3 +198,3 @@ }

var _default = loaderApi;
var _default = loaderAPI;
exports.default = _default;

15

dist/options.json
{
"title": "Style Loader options",
"type": "object",

@@ -9,4 +10,6 @@ "properties": {

"singletonStyleTag",
"autoStyleTag",
"lazyStyleTag",
"lazySingletonStyleTag",
"lazyAutoStyleTag",
"linkTag"

@@ -38,11 +41,5 @@ ]

},
"modules": {
"type": "object",
"additionalProperties": false,
"properties": {
"namedExport": {
"description": "Enables/disables ES modules named export for locals (https://webpack.js.org/plugins/mini-css-extract-plugin/#namedexport).",
"type": "boolean"
}
}
"styleTagTransform": {
"description": "Transform tag and css when insert 'style' tag into the DOM",
"instanceof": "Function"
}

@@ -49,0 +46,0 @@ },

50

dist/runtime/injectStylesIntoLinkTag.js
"use strict";
var getTarget = function getTarget() {
var memo = {};
return function memorize(target) {
if (typeof memo[target] === 'undefined') {
var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
try {
// This will throw an exception if access to iframe is blocked
// due to cross-origin restrictions
styleTarget = styleTarget.contentDocument.head;
} catch (e) {
// istanbul ignore next
styleTarget = null;
}
}
memo[target] = styleTarget;
}
return memo[target];
};
}();
module.exports = function (url, options) {
options = options || {};
options.attributes = typeof options.attributes === 'object' ? options.attributes : {};
options.attributes = typeof options.attributes === "object" ? options.attributes : {};
if (typeof options.attributes.nonce === 'undefined') {
var nonce = typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
if (typeof options.attributes.nonce === "undefined") {
var nonce = typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;

@@ -39,4 +15,4 @@ if (nonce) {

var link = document.createElement('link');
link.rel = 'stylesheet';
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;

@@ -46,17 +22,5 @@ Object.keys(options.attributes).forEach(function (key) {

});
if (typeof options.insert === 'function') {
options.insert(link);
} else {
var target = getTarget(options.insert || 'head');
if (!target) {
throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
}
target.appendChild(link);
}
options.insert(link);
return function (newUrl) {
if (typeof newUrl === 'string') {
if (typeof newUrl === "string") {
link.href = newUrl;

@@ -63,0 +27,0 @@ } else {

182

dist/runtime/injectStylesIntoStyleTag.js
"use strict";
var isOldIE = function isOldIE() {
var memo;
return function memorize() {
if (typeof memo === 'undefined') {
// Test for IE <= 9 as proposed by Browserhacks
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
// Tests for existence of standard globals is to allow style-loader
// to operate correctly into non-standard environments
// @see https://github.com/webpack-contrib/style-loader/issues/177
memo = Boolean(window && document && document.all && !window.atob);
}
return memo;
};
}();
var getTarget = function getTarget() {
var memo = {};
return function memorize(target) {
if (typeof memo[target] === 'undefined') {
var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
try {
// This will throw an exception if access to iframe is blocked
// due to cross-origin restrictions
styleTarget = styleTarget.contentDocument.head;
} catch (e) {
// istanbul ignore next
styleTarget = null;
}
}
memo[target] = styleTarget;
}
return memo[target];
};
}();
var stylesInDom = [];

@@ -92,127 +52,5 @@

function insertStyleElement(options) {
var style = document.createElement('style');
var attributes = options.attributes || {};
if (typeof attributes.nonce === 'undefined') {
var nonce = typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
if (nonce) {
attributes.nonce = nonce;
}
}
Object.keys(attributes).forEach(function (key) {
style.setAttribute(key, attributes[key]);
});
if (typeof options.insert === 'function') {
options.insert(style);
} else {
var target = getTarget(options.insert || 'head');
if (!target) {
throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
}
target.appendChild(style);
}
return style;
}
function removeStyleElement(style) {
// istanbul ignore if
if (style.parentNode === null) {
return false;
}
style.parentNode.removeChild(style);
}
/* istanbul ignore next */
var replaceText = function replaceText() {
var textStore = [];
return function replace(index, replacement) {
textStore[index] = replacement;
return textStore.filter(Boolean).join('\n');
};
}();
function applyToSingletonTag(style, index, remove, obj) {
var css = remove ? '' : obj.media ? "@media ".concat(obj.media, " {").concat(obj.css, "}") : obj.css; // For old IE
/* istanbul ignore if */
if (style.styleSheet) {
style.styleSheet.cssText = replaceText(index, css);
} else {
var cssNode = document.createTextNode(css);
var childNodes = style.childNodes;
if (childNodes[index]) {
style.removeChild(childNodes[index]);
}
if (childNodes.length) {
style.insertBefore(cssNode, childNodes[index]);
} else {
style.appendChild(cssNode);
}
}
}
function applyToTag(style, options, obj) {
var css = obj.css;
var media = obj.media;
var sourceMap = obj.sourceMap;
if (media) {
style.setAttribute('media', media);
} else {
style.removeAttribute('media');
}
if (sourceMap && typeof btoa !== 'undefined') {
css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
} // For old IE
/* istanbul ignore if */
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
while (style.firstChild) {
style.removeChild(style.firstChild);
}
style.appendChild(document.createTextNode(css));
}
}
var singleton = null;
var singletonCounter = 0;
function addStyle(obj, options) {
var style;
var update;
var remove;
if (options.singleton) {
var styleIndex = singletonCounter++;
style = singleton || (singleton = insertStyleElement(options));
update = applyToSingletonTag.bind(null, style, styleIndex, false);
remove = applyToSingletonTag.bind(null, style, styleIndex, true);
} else {
style = insertStyleElement(options);
update = applyToTag.bind(null, style, options);
remove = function remove() {
removeStyleElement(style);
};
}
update(obj);
var api = options.domAPI(options);
api.update(obj);
return function updateStyle(newObj) {

@@ -224,5 +62,5 @@ if (newObj) {

update(obj = newObj);
api.update(obj = newObj);
} else {
remove();
api.remove();
}

@@ -233,9 +71,3 @@ };

module.exports = function (list, options) {
options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (!options.singleton && typeof options.singleton !== 'boolean') {
options.singleton = isOldIE();
}
options = options || {};
list = list || [];

@@ -246,6 +78,2 @@ var lastIdentifiers = modulesToDom(list, options);

if (Object.prototype.toString.call(newList) !== '[object Array]') {
return;
}
for (var i = 0; i < lastIdentifiers.length; i++) {

@@ -252,0 +80,0 @@ var identifier = lastIdentifiers[i];

4

dist/runtime/isEqualLocals.js

@@ -11,3 +11,3 @@ "use strict";

for (p in a) {
if (isNamedExport && p === 'default') {
if (isNamedExport && p === "default") {
// eslint-disable-next-line no-continue

@@ -23,3 +23,3 @@ continue;

for (p in b) {
if (isNamedExport && p === 'default') {
if (isNamedExport && p === "default") {
// eslint-disable-next-line no-continue

@@ -26,0 +26,0 @@ continue;

74

package.json
{
"name": "style-loader",
"version": "2.0.0",
"version": "3.0.0",
"description": "style loader module for webpack",

@@ -16,3 +16,3 @@ "license": "MIT",

"engines": {
"node": ">= 10.13.0"
"node": ">= 12.13.0"
},

@@ -27,3 +27,3 @@ "scripts": {

"commitlint": "commitlint --from=master",
"security": "npm audit",
"security": "npm audit --production",
"lint:prettier": "prettier --list-different .",

@@ -35,8 +35,7 @@ "lint:js": "eslint --cache .",

"test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
"test:manual": "npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
"test:manual": "npm run build && webpack serve ./test/manual/src/index.js --open --config test/manual/webpack.config.js",
"pretest": "npm run lint",
"test": "npm run test:coverage",
"prepare": "npm run build",
"release": "standard-version",
"defaults": "webpack-defaults"
"prepare": "husky install && npm run build",
"release": "standard-version"
},

@@ -47,40 +46,35 @@ "files": [

"peerDependencies": {
"webpack": "^4.0.0 || ^5.0.0"
"webpack": "^5.0.0"
},
"dependencies": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"devDependencies": {
"@babel/cli": "^7.11.6",
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^11.0.0",
"@webpack-contrib/defaults": "^6.3.0",
"@babel/cli": "^7.14.5",
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.5",
"@commitlint/cli": "^12.1.4",
"@commitlint/config-conventional": "^12.1.4",
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
"babel-jest": "^26.5.2",
"cross-env": "^7.0.2",
"css-loader": "^4.3.0",
"babel-jest": "^27.0.5",
"cross-env": "^7.0.3",
"css-loader": "^5.2.4",
"del": "^6.0.0",
"del-cli": "^3.0.1",
"es-check": "^5.1.1",
"eslint": "^7.10.0",
"eslint-config-prettier": "^6.12.0",
"eslint-plugin-import": "^2.22.1",
"file-loader": "^6.1.0",
"husky": "^4.3.0",
"jest": "^26.5.2",
"jsdom": "^16.4.0",
"lint-staged": "^10.4.0",
"memfs": "^3.2.0",
"del-cli": "^4.0.0",
"es-check": "5.2.3",
"eslint": "^7.28.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"file-loader": "^6.2.0",
"husky": "^6.0.0",
"jest": "^27.0.4",
"jsdom": "^16.6.0",
"lint-staged": "^11.0.0",
"memfs": "^3.2.2",
"npm-run-all": "^4.1.5",
"prettier": "^2.1.2",
"sass": "^1.27.0",
"sass-loader": "^10.0.2",
"semver": "^7.3.2",
"standard-version": "^9.0.0",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
"prettier": "^2.3.1",
"sass": "^1.35.1",
"sass-loader": "^12.1.0",
"semver": "^7.3.4",
"standard-version": "^9.3.0",
"webpack": "^5.39.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},

@@ -87,0 +81,0 @@ "keywords": [

258

README.md

@@ -44,3 +44,3 @@ <div align="center">

```js
import './style.css';
import "./style.css";
```

@@ -56,3 +56,3 @@

test: /\.css$/i,
use: ['style-loader', 'css-loader'],
use: ["style-loader", "css-loader"],
},

@@ -66,10 +66,10 @@ ],

| Name | Type | Default | Description |
| :-----------------------------: | :------------------: | :---------: | :------------------------------------------------------- |
| [**`injectType`**](#injecttype) | `{String}` | `styleTag` | Allows to setup how styles will be injected into the DOM |
| [**`attributes`**](#attributes) | `{Object}` | `{}` | Adds custom attributes to tag |
| [**`insert`**](#insert) | `{String\|Function}` | `head` | Inserts tag at the given position into the DOM |
| [**`base`**](#base) | `{Number}` | `true` | Sets module ID base (DLLPlugin) |
| [**`esModule`**](#esmodule) | `{Boolean}` | `true` | Use ES modules syntax |
| [**`modules`**](#modules) | `{Object}` | `undefined` | Configuration CSS Modules |
| Name | Type | Default | Description |
| :-------------------------------------------: | :------------------: | :---------: | :--------------------------------------------------------- |
| [**`injectType`**](#injecttype) | `{String}` | `styleTag` | Allows to setup how styles will be injected into the DOM |
| [**`attributes`**](#attributes) | `{Object}` | `{}` | Adds custom attributes to tag |
| [**`insert`**](#insert) | `{String\|Function}` | `head` | Inserts tag at the given position into the DOM |
| [**`styleTagTransform`**](#styleTagTransform) | `{Function}` | `undefined` | Transform tag and css when insert 'style' tag into the DOM |
| [**`base`**](#base) | `{Number}` | `true` | Sets module ID base (DLLPlugin) |
| [**`esModule`**](#esmodule) | `{Boolean}` | `true` | Use ES modules syntax |

@@ -87,4 +87,6 @@ ### `injectType`

- `singletonStyleTag`
- `autoStyleTag`
- `lazyStyleTag`
- `lazySingletonStyleTag`
- `lazyAutoStyleTag`
- `linkTag`

@@ -99,3 +101,3 @@

```js
import './styles.css';
import "./styles.css";
```

@@ -108,6 +110,6 @@

```js
import styles from './styles.css';
import styles from "./styles.css";
const divElement = document.createElement('div');
divElement.className = styles['my-class'];
const divElement = document.createElement("div");
divElement.className = styles["my-class"];
```

@@ -127,4 +129,4 @@

// The `injectType` option can be avoided because it is default behaviour
{ loader: 'style-loader', options: { injectType: 'styleTag' } },
'css-loader',
{ loader: "style-loader", options: { injectType: "styleTag" } },
"css-loader",
],

@@ -161,3 +163,3 @@ },

```js
import './styles.css';
import "./styles.css";
```

@@ -168,6 +170,6 @@

```js
import styles from './styles.css';
import styles from "./styles.css";
const divElement = document.createElement('div');
divElement.className = styles['my-class'];
const divElement = document.createElement("div");
divElement.className = styles["my-class"];
```

@@ -187,6 +189,6 @@

{
loader: 'style-loader',
options: { injectType: 'singletonStyleTag' },
loader: "style-loader",
options: { injectType: "singletonStyleTag" },
},
'css-loader',
"css-loader",
],

@@ -212,2 +214,6 @@ },

#### `autoStyleTag`
Works the same as a [`styleTag`](#styleTag), but if the code is executed in IE6-9, turns on the [`singletonStyleTag`](#singletonStyleTag) mode.
#### `lazyStyleTag`

@@ -224,3 +230,3 @@

```js
import styles from './styles.lazy.css';
import styles from "./styles.lazy.css";

@@ -235,8 +241,8 @@ styles.use();

```js
import styles from './styles.lazy.css';
import styles from "./styles.lazy.css";
styles.use();
const divElement = document.createElement('div');
divElement.className = styles.locals['my-class'];
const divElement = document.createElement("div");
divElement.className = styles.locals["my-class"];
```

@@ -255,3 +261,3 @@

exclude: /\.lazy\.css$/i,
use: ['style-loader', 'css-loader'],
use: ["style-loader", "css-loader"],
},

@@ -261,4 +267,4 @@ {

use: [
{ loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
'css-loader',
{ loader: "style-loader", options: { injectType: "lazyStyleTag" } },
"css-loader",
],

@@ -299,3 +305,3 @@ },

```js
import styles from './styles.css';
import styles from "./styles.css";

@@ -310,8 +316,8 @@ styles.use();

```js
import styles from './styles.lazy.css';
import styles from "./styles.lazy.css";
styles.use();
const divElement = document.createElement('div');
divElement.className = styles.locals['my-class'];
const divElement = document.createElement("div");
divElement.className = styles.locals["my-class"];
```

@@ -330,3 +336,3 @@

exclude: /\.lazy\.css$/i,
use: ['style-loader', 'css-loader'],
use: ["style-loader", "css-loader"],
},

@@ -337,6 +343,6 @@ {

{
loader: 'style-loader',
options: { injectType: 'lazySingletonStyleTag' },
loader: "style-loader",
options: { injectType: "lazySingletonStyleTag" },
},
'css-loader',
"css-loader",
],

@@ -362,2 +368,6 @@ },

#### `lazyAutoStyleTag`
Works the same as a [`lazyStyleTag`](#lazyStyleTag), but if the code is executed in IE6-9, turns on the [`lazySingletonStyleTag`](#lazySingletonStyleTag) mode.
#### `linkTag`

@@ -370,4 +380,4 @@

```js
import './styles.css';
import './other-styles.css';
import "./styles.css";
import "./other-styles.css";
```

@@ -384,4 +394,4 @@

use: [
{ loader: 'style-loader', options: { injectType: 'linkTag' } },
{ loader: 'file-loader' },
{ loader: "style-loader", options: { injectType: "linkTag" } },
{ loader: "file-loader" },
],

@@ -411,3 +421,3 @@ },

```js
import style from './file.css';
import style from "./file.css";
```

@@ -424,4 +434,4 @@

use: [
{ loader: 'style-loader', options: { attributes: { id: 'id' } } },
{ loader: 'css-loader' },
{ loader: "style-loader", options: { attributes: { id: "id" } } },
{ loader: "css-loader" },
],

@@ -462,8 +472,8 @@ },

{
loader: 'style-loader',
loader: "style-loader",
options: {
insert: 'body',
insert: "body",
},
},
'css-loader',
"css-loader",
],

@@ -495,6 +505,6 @@ },

{
loader: 'style-loader',
loader: "style-loader",
options: {
insert: function insertAtTop(element) {
var parent = document.querySelector('head');
var parent = document.querySelector("head");
// eslint-disable-next-line no-underscore-dangle

@@ -517,3 +527,3 @@ var lastInsertedElement =

},
'css-loader',
"css-loader",
],

@@ -528,5 +538,44 @@ },

### `styleTagTransform`
Type: `Function`
Default: `undefined`
Transform tag and css when insert 'style' tag into the DOM.
> ⚠ Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc, we recommend use only ECMA 5 features, but it is depends what browsers you want to support
> ⚠ Do not forget that some DOM methods may not be available in older browsers, we recommended use only [DOM core level 2 properties](https://caniuse.com/#search=DOM%20Core), but it is depends what browsers you want to support
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
injectType: "styleTag",
styleTagTransform: function (css, style) {
// Do something ...
style.innerHTML = `${css}.modify{}\n`;
document.head.appendChild(style);
},
},
},
"css-loader",
],
},
],
},
};
```
### `base`
This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.github.io/posts/webpack-dll-plugins/)'s. `base` allows you to prevent either the _app_'s css (or _DllPlugin2_'s css) from overwriting _DllPlugin1_'s css by specifying a css module id base which is greater than the range used by _DllPlugin1_ e.g.:
This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.me.uk/posts/webpack-dll-plugins/)'s. `base` allows you to prevent either the _app_'s css (or _DllPlugin2_'s css) from overwriting _DllPlugin1_'s css by specifying a css module id base which is greater than the range used by _DllPlugin1_ e.g.:

@@ -541,3 +590,3 @@ **webpack.dll1.config.js**

test: /\.css$/i,
use: ['style-loader', 'css-loader'],
use: ["style-loader", "css-loader"],
},

@@ -558,4 +607,4 @@ ],

use: [
{ loader: 'style-loader', options: { base: 1000 } },
'css-loader',
{ loader: "style-loader", options: { base: 1000 } },
"css-loader",
],

@@ -577,4 +626,4 @@ },

use: [
{ loader: 'style-loader', options: { base: 2000 } },
'css-loader',
{ loader: "style-loader", options: { base: 2000 } },
"css-loader",
],

@@ -605,3 +654,3 @@ },

test: /\.css$/i,
loader: 'style-loader',
loader: "style-loader",
options: {

@@ -616,16 +665,38 @@ esModule: false,

### `modules`
## Examples
Type: `Object`
Default: `undefined`
### Recommend
Configuration CSS Modules.
For `production` builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
This can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin), because it creates separate css files.
For `development` mode (including `webpack-dev-server`) you can use `style-loader`, because it injects CSS into the DOM using multiple <style></style> and works faster.
#### `namedExport`
> i Do not use together `style-loader` and `mini-css-extract-plugin`.
Type: `Boolean`
Default: `false`
**webpack.config.js**
Enables/disables ES modules named export for locals.
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";
module.exports = {
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
devMode ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader",
],
},
],
},
plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
};
```
### Named export for CSS Modules
> ⚠ Names of locals are converted to `camelCase`.

@@ -635,3 +706,3 @@

> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` and `style-loader` should be enabled.
> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` should be enabled.

@@ -652,3 +723,3 @@ **styles.css**

```js
import { fooBaz, bar } from './styles.css';
import { fooBaz, bar } from "./styles.css";

@@ -670,14 +741,7 @@ console.log(fooBaz, bar);

{
loader: 'style-loader',
options: {
esModule: true,
modules: {
namedExport: true,
},
},
loader: "style-loader",
},
{
loader: 'css-loader',
loader: "css-loader",
options: {
esModule: true,
modules: {

@@ -695,4 +759,2 @@ namedExport: true,

## Examples
### Source maps

@@ -712,4 +774,4 @@

use: [
'style-loader',
{ loader: 'css-loader', options: { sourceMap: true } },
"style-loader",
{ loader: "css-loader", options: { sourceMap: true } },
],

@@ -736,3 +798,3 @@ },

```js
import './style.css';
import "./style.css";
```

@@ -750,10 +812,10 @@

{
loader: 'style-loader',
loader: "style-loader",
options: {
attributes: {
nonce: '12345678',
nonce: "12345678",
},
},
},
'css-loader',
"css-loader",
],

@@ -781,3 +843,3 @@ },

```js
__webpack_nonce__ = '12345678';
__webpack_nonce__ = "12345678";
```

@@ -788,4 +850,4 @@

```js
import './create-nonce.js';
import './style.css';
import "./create-nonce.js";
import "./style.css";
```

@@ -798,5 +860,5 @@

```js
__webpack_nonce__ = '12345678';
__webpack_nonce__ = "12345678";
require('./style.css');
require("./style.css");
```

@@ -812,3 +874,3 @@

test: /\.css$/i,
use: ['style-loader', 'css-loader'],
use: ["style-loader", "css-loader"],
},

@@ -844,6 +906,6 @@ ],

{
loader: 'style-loader',
loader: "style-loader",
options: {
insert: function insertAtTop(element) {
var parent = document.querySelector('head');
var parent = document.querySelector("head");
var lastInsertedElement =

@@ -864,3 +926,3 @@ window._lastElementInsertedByStyleLoader;

},
'css-loader',
"css-loader",
],

@@ -887,7 +949,7 @@ },

{
loader: 'style-loader',
loader: "style-loader",
options: {
insert: function insertBeforeAt(element) {
const parent = document.querySelector('head');
const target = document.querySelector('#id');
const parent = document.querySelector("head");
const target = document.querySelector("#id");

@@ -909,3 +971,3 @@ const lastInsertedElement =

},
'css-loader',
"css-loader",
],

@@ -912,0 +974,0 @@ },

CHANGELOG.md
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc