46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
const fs = require('fs');
|
|
const path = require('path');
|
|
const postcss = require('postcss');
|
|
const autoprefixer = require('autoprefixer');
|
|
const nested = require('postcss-nested');
|
|
|
|
function getStyleInject(cssString) {
|
|
return `
|
|
(function(css) {
|
|
if (!css || typeof document === 'undefined') return;
|
|
|
|
const head = document.head || document.getElementsByTagName('head')[0];
|
|
const style = document.createElement('style');
|
|
|
|
head.appendChild(style);
|
|
|
|
style.appendChild(document.createTextNode(css));
|
|
})("${cssString}")
|
|
`;
|
|
}
|
|
|
|
module.exports = function (babel) {
|
|
return {
|
|
name: 'inject-css-babel-plugin',
|
|
visitor: {
|
|
ImportDeclaration(item, state) {
|
|
if (!item.node.source.value.includes('.css')) {
|
|
return;
|
|
}
|
|
|
|
const importFilePath = path.resolve(
|
|
state.file.opts.filename,
|
|
'..',
|
|
item.node.source.value
|
|
);
|
|
|
|
const css = fs.readFileSync(importFilePath).toString();
|
|
const result = postcss([autoprefixer, nested]).process(css);
|
|
const minified = result.css.replace(/\n/g, '');
|
|
|
|
item.replaceWithSourceString(getStyleInject(minified));
|
|
},
|
|
},
|
|
};
|
|
};
|