From 8cd4ad9c9ebce5ccb096aa6886b17e70166bd17a Mon Sep 17 00:00:00 2001 From: Hamid Adelyar Date: Tue, 19 Nov 2019 11:52:12 +0000 Subject: [PATCH 1/4] Added option (noStyleTag) to omit the style tag when inlining css --- src/core/base-plugin.ts | 4 +++- src/types.ts | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/core/base-plugin.ts b/src/core/base-plugin.ts index 6deda5d..d334be3 100644 --- a/src/core/base-plugin.ts +++ b/src/core/base-plugin.ts @@ -75,7 +75,9 @@ export class BasePlugin { htmlFileName: string style: string }) { - const styleString = `` + const styleString = this.config.noStyleTag + ? style + : `` const replaceValues = [styleString, this.replaceConfig.target] if (this.replaceConfig.position === 'after') { diff --git a/src/types.ts b/src/types.ts index 4b9660e..15d8259 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,6 +14,7 @@ export interface Config { filter?(fileName: string): boolean leaveCSSFile?: boolean replace?: ReplaceConfig + noStyleTag?: boolean } export interface FileCache { From 5ca36b0b767ebc508eb9a803c0d704c6764199b9 Mon Sep 17 00:00:00 2001 From: Hamid Adelyar Date: Wed, 20 Nov 2019 21:56:34 +0000 Subject: [PATCH 2/4] changed to allow for attributes to be provided to the ` + let attributesString = '' + + if (this.config.attributes) { + if ( + typeof this.config.attributes !== 'object' && + this.config.attributes === null + ) { + throw new Error( + `Please provide a key/value object if intending to use the attributes option`, + ) + } + + Object.keys(this.config.attributes).map((key) => { + const value = this.config.attributes[key] || '' + attributesString += ` ${key}="${value}"` + }) + } + + const styleString = `${style}` + const replaceValues = [styleString, this.replaceConfig.target] if (this.replaceConfig.position === 'after') { diff --git a/src/types.ts b/src/types.ts index 15d8259..f79b15d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,7 +14,7 @@ export interface Config { filter?(fileName: string): boolean leaveCSSFile?: boolean replace?: ReplaceConfig - noStyleTag?: boolean + attributes?: any } export interface FileCache { From fa00a10d961a751b7cf90d5c6429ca8afe597a12 Mon Sep 17 00:00:00 2001 From: Hamid Adelyar Date: Wed, 20 Nov 2019 22:11:56 +0000 Subject: [PATCH 3/4] updated README with attributes option example --- README.md | 115 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 93 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index aec761c..45266ec 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 - - + + ``` From 2ddf496bd970e3b3169a2b5515f05739395bc09b Mon Sep 17 00:00:00 2001 From: Hamid Adelyar Date: Thu, 21 Nov 2019 09:48:23 +0000 Subject: [PATCH 4/4] addressed PR comments - created function to get attributes --- README.md | 2 +- src/core/base-plugin.ts | 43 +++++++++++++++++++++++------------------ src/types.ts | 2 +- 3 files changed, 26 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 45266ec..08600a5 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ interface Config { position?: 'before' | 'after' removeTarget?: boolean } - attributes?: any + attributes?: { [name: string]: string } } ``` diff --git a/src/core/base-plugin.ts b/src/core/base-plugin.ts index 9a57a81..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,25 +96,9 @@ export class BasePlugin { htmlFileName: string style: string }) { - let attributesString = '' - - if (this.config.attributes) { - if ( - typeof this.config.attributes !== 'object' && - this.config.attributes === null - ) { - throw new Error( - `Please provide a key/value object if intending to use the attributes option`, - ) - } - - Object.keys(this.config.attributes).map((key) => { - const value = this.config.attributes[key] || '' - attributesString += ` ${key}="${value}"` - }) - } - - const styleString = `${style}` + const styleString = `${style}` const replaceValues = [styleString, this.replaceConfig.target] diff --git a/src/types.ts b/src/types.ts index f79b15d..ef079eb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,7 +14,7 @@ export interface Config { filter?(fileName: string): boolean leaveCSSFile?: boolean replace?: ReplaceConfig - attributes?: any + attributes?: { [name: string]: string } } export interface FileCache {