Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support 'before' insertions (options.insertAt) #253

Merged
merged 7 commits into from
Sep 8, 2017
Merged

feat: support 'before' insertions (options.insertAt) #253

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4d8e641
Add insertAt='before' option
iancw Jun 27, 2017
0bee7a6
Improve browser error message
iancw Jun 27, 2017
03c8170
Remove insertBefore option in favor of an object
iancw Jun 27, 2017
5618dd2
Slim down the new Object options
iancw Jun 27, 2017
0caab23
update readme with slimmer object syntax
iancw Jun 27, 2017
55d2e41
Improve insertAt before README sections
iancw Jun 27, 2017
934bbaf
Remove old inline example from README
iancw Jun 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,20 @@ By default, the style-loader appends `<style>` elements to the end of the style
}
```

A new `<style>` element can be inserted before a specific element by passing an object with `type='before'`, e.g.

**webpack.config.js**
```js
{
loader: 'style-loader'
options: {
insertAt: {
before: '#style-overrides'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#id || #name (generic)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The options table needs an type update aswell {String} => {String\|Object} (⚠️ \ [escaped])

}
}
}
```

### `insertInto`
By default, the style-loader inserts the `<style>` elements into the `<head>` tag of the page. If you want the tags to be inserted somewhere else you can specify a CSS selector for that element here. If you target an [IFrame](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure you have sufficient access rights, the styles will be injected into the content document head.
You can also insert the styles into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), e.g
Expand Down
5 changes: 4 additions & 1 deletion lib/addStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,8 +170,11 @@ function insertStyleElement (options, style) {
stylesInsertedAtTop.push(style);
} else if (options.insertAt === "bottom") {
target.appendChild(style);
} else if (typeof options.insertAt === "object" && options.insertAt.before) {
var nextSibling = getElement(options.insertInto + " " + options.insertAt.before);
target.insertBefore(style, nextSibling);
} else {
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");
}
}

Expand Down
2 changes: 1 addition & 1 deletion options.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"type": "object"
},
"insertAt": {
"type": "string"
"type": ["string", "object"]
},
"insertInto": {
"type": "string"
Expand Down
22 changes: 21 additions & 1 deletion test/basicTest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ describe("basic tests", function() {
}
`,
requiredStyle = `<style type="text/css">${requiredCss}</style>`,
existingStyle = "<style>.existing { color: yellow }</style>",
existingStyle = `<style id="existing-style">.existing { color: yellow }</style>`,
checkValue = '<div class="check">check</div>',
rootDir = path.resolve(__dirname + "/../") + "/",
jsdomHtml = [
Expand Down Expand Up @@ -95,6 +95,26 @@ describe("basic tests", function() {
runCompilerTest(expected, done);
}); // it insert at top

it("insert at before", function(done) {
styleLoaderOptions.insertAt = {
before: "#existing-style"
};

let expected = [requiredStyle, existingStyle].join("");

runCompilerTest(expected, done);
}); // it insert at before

it("insert at before invalid selector", function(done) {
styleLoaderOptions.insertAt = {
before: "#missing"
};

let expected = [existingStyle, requiredStyle].join("\n");

runCompilerTest(expected, done);
}); // it insert at before

it("insert into", function(done) {
let selector = "div.target";
styleLoaderOptions.insertInto = selector;
Expand Down