0.0.2 • Published 5 years ago
inject-css-in-js-webpack-plugin v0.0.2
inject-css-in-js-webpack-plugin
A webpack plugin to convert an external stylesheet to an embedded stylesheet in JS
html-inline-css-webpack-plugin
A webpack plugin to convert an external stylesheet to an embedded stylesheet in JS. Heavily inspired by HtmlInlineCSSWebpackPlugin which is for making CSS internal in HTML files as opposed to JS files.
<link rel="stylesheet" /> => document.createTextNode(document.createElement('style'))
Requires mini-css-extract-plugin
If you are using html-webpack-plugin, whatever CSS bundle you want needs to have inject: false
for the HtmlWebpackPlugin for that chunk.
Install
NPM
npm i inject-css-in-js-webpack-plugin -D
Yarn
yarn add inject-css-in-js-webpack-plugin -D
Example
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InjectCssInJsWebpackPlugin = require("inject-css-in-js-webpack-plugin").default;
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new HtmlWebpackPlugin({
inject: false
}),
new InjectCssInJsWebpackPlugin( new HTMLInlineCSSWebpackPlugin({
filter(filename) {
return filename.includes('bundle'); // use filter if you only want to inline css from the CSS file with bundle in the filename
},
replace: {
fileTarget: 'bundle', // this is the built file we'll look for the target to replace with the style tag
target: '<span data-css="true"></span>' // this will be replaced with the style tag
}
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}
Config
interface Config {
filter?(filename: string): boolean
replace?: {
fileTarget?: string
target: string
}
}
filter(optional)
filter?(filename: string): boolean
Return true
to make current file internal, otherwise ignore current file.
example
new InjectCssInJsWebpackPlugin({
filter(filename) {
return filename.includes('bundle')
}
})
replace(optional)
replace?: {
fileTarget?: string
target?: string
}
fileTarget
A file to search for the target ie bundle.js
target
A target in the generated Javascript for adding the internal stylesheet
example
ReactDOM.render(
<React.Fragment>
{/* Replace this comment */ }
<h1>I'm getting styles nearby</h1>
</React.Fragment>,
document.getElementById('root')
)
...
new InjectCssInJsWebpackPlugin({
filter(filename) {
return filename.includes('bundle')
},
replace: {
fileTarget: 'bundle.js',
target: '/* Replace this comment */',
},
}),
...
Output: