diff --git a/README.md b/README.md index aec761c..08600a5 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,12 @@ # html-inline-css-webpack-plugin + [](https://opensource.org/licenses/mit-license.php) [](https://github.com/Runjuu/html-inline-css-webpack-plugin/pulls) [](https://www.npmjs.com/package/html-inline-css-webpack-plugin) [](https://www.npmjs.com/package/html-inline-css-webpack-plugin) Convert external stylesheet to embedded stylesheet, aka document stylesheet. + ``` => +``` + +##### example 2 + +```typescript +... + new HTMLInlineCSSWebpackPlugin({ + replace: { + attributes: { + 'amp-custom': "" + }, + }, + }), +... +``` + +```html + +``` + +Useful for amp pages + #### target + A target for adding the internal style sheet + #### position(optional) + Add internal style sheet `before`/`after` the `target` + #### removeTarget(optional) + if `true`, it will remove the `target` from the output HTML + > Please note that HTML comment is removed by default by the `html-webpack-plugin` in production mode. [#16](https://github.com/Runjuu/html-inline-css-webpack-plugin/issues/16#issuecomment-527884514) + ##### example + ```html
- - + + ``` @@ -118,14 +187,16 @@ if `true`, it will remove the `target` from the output HTML }), ... ``` + ###### output: + ```html - - + + ``` diff --git a/src/core/base-plugin.ts b/src/core/base-plugin.ts index 6deda5d..a767de5 100644 --- a/src/core/base-plugin.ts +++ b/src/core/base-plugin.ts @@ -66,6 +66,27 @@ export class BasePlugin { } } + protected getAttributesString(config: Config): string { + if (config.attributes && typeof config.attributes === 'object') { + return ( + ' ' + + Object.keys(config.attributes) + .map((key) => `${key}="${config.attributes![key] || ''}"`) + .join(' ') + ) + } + + if (config.attributes === undefined && config.attributes === null) { + throw new Error( + `Please provide a key/value object if intending to use the attributes option, not ${ + config.attributes + }`, + ) + } + + return '' + } + protected addStyle({ html, htmlFileName, @@ -75,7 +96,10 @@ export class BasePlugin { htmlFileName: string style: string }) { - const styleString = `` + const styleString = `` + const replaceValues = [styleString, this.replaceConfig.target] if (this.replaceConfig.position === 'after') { diff --git a/src/types.ts b/src/types.ts index 4b9660e..ef079eb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,6 +14,7 @@ export interface Config { filter?(fileName: string): boolean leaveCSSFile?: boolean replace?: ReplaceConfig + attributes?: { [name: string]: string } } export interface FileCache {