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

Jump to bottom

feat: add ID's to <style> tags #336

Closed
wants to merge 6 commits into from
Closed

feat: add ID's to <style> tags #336

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
18aef56
feat: auto parse variables: name and version
alex-mm Mar 17, 2017
ef0a684
fix: auto parse variables: name and version
alex-mm Apr 18, 2017
f45987e
Merge branch 'master' of https://github.com/webpack-contrib/style-loader
alex-mm Jul 25, 2018
08d4782
test: attrs test
alex-mm Jul 25, 2018
6f74cdc
fix: remove package "find-package"
alex-mm Jul 30, 2018
0b31101
fix: add utils
alex-mm Jul 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 11 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
|:--:|:--:|:-----:|:----------|
|**`hmr`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production)|
|**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
|**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`|
|**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`, `[name]` `[version]` Can be replaced automatically|
|**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
|**`insertAt`**|`{String\|Object}`|`bottom`|Inserts `<style></style>` at the given position|
|**`insertInto`**|`{String\|Function}`|`<head>`|Inserts `<style></style>` into the given position|
Expand Down Expand Up @@ -199,6 +199,7 @@ This setting is primarily used as a workaround for [css clashes](https://github.
### `attrs`

If defined, style-loader will attach given attributes with their values on `<style>` / `<link>` element.
And you can distinguish source of styles.

**component.js**
```js
Expand All @@ -207,13 +208,22 @@ import style from './file.css'

**webpack.config.js**
```js
// static
{
test: /\.css$/,
use: [
{ loader: 'style-loader', options: { attrs: { id: 'id' } } }
{ loader: 'css-loader' }
]
}
// replaceable
{
test: /\.css$/,
use: [
{ loader: 'style-loader', options: { attrs: { component: '[name]@[version]' } }
{ loader: 'css-loader' }
]
}
```

```html
Expand Down
11 changes: 10 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Author Tobias Koppers @sokra
*/
var path = require("path");

var findPackage = require('find-package');
var loaderUtils = require("loader-utils");
var validateOptions = require('schema-utils');

Expand All @@ -14,6 +14,15 @@ module.exports.pitch = function (request) {

var options = loaderUtils.getOptions(this) || {};

var pkg = findPackage(this.resourcePath) || {};
if (options.attrs) {
Object.keys(options.attrs).forEach(function(key) {
options.attrs[key] = options.attrs[key]
.replace(/\[name\]/ig, pkg.name)
.replace(/\[version\]/ig, pkg.version);
});
Copy link
Member

Choose a reason for hiding this comment

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

Need use loader-utils.interpolateName (https://github.com/webpack/loader-utils#interpolatename).
Also find-package doesn't works good with mono repos, please don't use this package.

Copy link
Author

Choose a reason for hiding this comment

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

  1. find-package has been removed.
  2. But loader-utils.interpolateName is unsatisfactory. We need to get the version number of the package corresponding to the current file.
  3. is there a better way to get it than from package.json?

}

validateOptions(require('./options.json'), options, 'Style Loader')

options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"options.json"
],
"dependencies": {
"find-package": "^1.0.0",
"loader-utils": "^1.1.0",
"schema-utils": "^0.4.5"
},
Expand Down
10 changes: 7 additions & 3 deletions test/basic.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,10 @@ describe("basic tests", function() {

it("attrs", function(done) {
// Setup
styleLoaderOptions.attrs = {id: 'style-tag-id'};
styleLoaderOptions.attrs = {
id: 'style-tag-id',
component: '[name]@[version]',
};

fs.writeFileSync(
rootDir + "main.js",
Expand All @@ -235,12 +238,13 @@ describe("basic tests", function() {
].join("\n")
);

const { version, name } = require('../package.json');

// Run
let expected = [
existingStyle,
`<style id="${styleLoaderOptions.attrs.id}" type="text/css">${requiredCss}</style>`
`<style id="${styleLoaderOptions.attrs.id}" component="${name}@${version}" type="text/css">${requiredCss}</style>`
].join("\n");

runCompilerTest(expected, done);
}); // it attrs

Expand Down