{"id":15640257,"url":"https://github.com/runjuu/html-inline-css-webpack-plugin","last_synced_at":"2025-04-06T01:08:35.810Z","repository":{"id":32536419,"uuid":"136413527","full_name":"runjuu/html-inline-css-webpack-plugin","owner":"runjuu","description":"☄️ A webpack plugin to convert external stylesheets into embedded stylesheets","archived":false,"fork":false,"pushed_at":"2024-07-19T20:55:45.000Z","size":755,"stargazers_count":80,"open_issues_count":0,"forks_count":22,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T23:08:34.687Z","etag":null,"topics":["document-stylesheet","embedded-stylesheet","html-webpack-plugin","inline-css","inline-styles","mini-css-extract-plugin","webpack","webpack-plugin","webpack4","webpack5"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/html-inline-css-webpack-plugin","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/runjuu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-07T02:53:57.000Z","updated_at":"2024-10-14T08:12:34.000Z","dependencies_parsed_at":"2024-06-18T13:44:14.437Z","dependency_job_id":"5380b0f0-db4b-4362-8ae4-71a6b35fd354","html_url":"https://github.com/runjuu/html-inline-css-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runjuu%2Fhtml-inline-css-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runjuu%2Fhtml-inline-css-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runjuu%2Fhtml-inline-css-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runjuu%2Fhtml-inline-css-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/runjuu","download_url":"https://codeload.github.com/runjuu/html-inline-css-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419860,"owners_count":20936012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["document-stylesheet","embedded-stylesheet","html-webpack-plugin","inline-css","inline-styles","mini-css-extract-plugin","webpack","webpack-plugin","webpack4","webpack5"],"created_at":"2024-10-03T11:33:15.665Z","updated_at":"2025-04-06T01:08:35.789Z","avatar_url":"https://github.com/runjuu.png","language":"TypeScript","readme":"# html-inline-css-webpack-plugin\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Runjuu/html-inline-css-webpack-plugin/pulls)\n[![Total downloads](https://img.shields.io/npm/dm/html-inline-css-webpack-plugin.svg)](https://www.npmjs.com/package/html-inline-css-webpack-plugin)\n[![npm version](https://badge.fury.io/js/html-inline-css-webpack-plugin.svg)](https://www.npmjs.com/package/html-inline-css-webpack-plugin)\n\nConvert external stylesheet to embedded stylesheet, aka document stylesheet.\n```\n\u003clink rel=\"stylesheet\" /\u003e =\u003e \u003cstyle\u003e...\u003cstyle/\u003e\n```\n\nRequire [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) and [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)\n\n## Install\n#### NPM\n```bash\nnpm i html-inline-css-webpack-plugin -D\n```\n#### Yarn\n```bash\nyarn add html-inline-css-webpack-plugin -D\n```\n\n## Minimal example\n```js\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst HTMLInlineCSSWebpackPlugin = require(\"html-inline-css-webpack-plugin\").default;\n\nmodule.exports = {\n  plugins: [\n    new MiniCssExtractPlugin({\n      filename: \"[name].css\",\n      chunkFilename: \"[id].css\"\n    }),\n    new HtmlWebpackPlugin(),\n    new HTMLInlineCSSWebpackPlugin(),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          MiniCssExtractPlugin.loader,\n          \"css-loader\"\n        ]\n      }\n    ]\n  }\n}\n```\n\n## Config\n```typescript\ninterface Config {\n  filter?: (fileName: string) =\u003e boolean\n  styleTagFactory?: (params: { style: string }) =\u003e string\n  leaveCSSFile?: boolean\n  replace?: {\n    target: string\n    position?: 'before' | 'after'\n    removeTarget?: boolean\n  }\n}\n```\n\n### filter(optional)\n```typescript\nfilter?: (fileName: string) =\u003e boolean\n```\nReturn `true` to make current file internal, otherwise ignore current file. Include both css file and html file name.\n##### example\n```typescript\n...\nnew HTMLInlineCSSWebpackPlugin({\n  filter(fileName) {\n    return fileName.includes('main');\n  },\n}),\n...\n```\n\n### styleTagFactory(optional)\n```typescript\nstyleTagFactory?: (params: { style: string }) =\u003e string\n```\n\nUsed to customize the style tag.\n\n##### example\n```typescript\n...\n  new HTMLInlineCSSWebpackPlugin({\n    styleTagFactory({ style }) {\n      return `\u003cstyle type=\"text/css\"\u003e${style}\u003c/style\u003e`;\n    },\n  }),\n...\n```\n\n### leaveCSSFile(optional)\nif `true`, it will leave CSS files where they are when inlining\n\n### replace(optional)\n```typescript\nreplace?: {\n  target: string\n  position?: 'before' | 'after' // default is 'before'\n  removeTarget?: boolean // default is false\n}\n```\nA config for customizing the location of injection, default will add internal style sheet before the `\u003c/head\u003e`\n#### target\nA target for adding the internal style sheet\n#### position(optional)\nAdd internal style sheet `before`/`after` the `target`\n#### removeTarget(optional)\nif `true`, it will remove the `target` from the output HTML\n\u003e 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)\n##### example\n```html\n\u003chead\u003e\n    \u003c!-- inline_css_plugin --\u003e\n    \u003cstyle\u003e\n        /* some hard code style */\n    \u003c/style\u003e\n\u003c/head\u003e\n```\n\n```typescript\n...\n  new HTMLInlineCSSWebpackPlugin({\n    replace: {\n      removeTarget: true,\n      target: '\u003c!-- inline_css_plugin --\u003e',\n    },\n  }),\n...\n```\n###### output:\n```html\n\u003chead\u003e\n    \u003cstyle\u003e\n        /* style from *.css files */\n    \u003c/style\u003e\n    \u003cstyle\u003e\n        /* some hard code style */\n    \u003c/style\u003e\n\u003c/head\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunjuu%2Fhtml-inline-css-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frunjuu%2Fhtml-inline-css-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunjuu%2Fhtml-inline-css-webpack-plugin/lists"}