@sentre/craco-plugins
Version:
Craco plugins for CRA
83 lines (82 loc) • 4.37 kB
JavaScript
;
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
/**
* Postcss Prefix Selector
* https://www.npmjs.com/package/postcss-prefix-selector
* Theme changing by CSS selector
* https://gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa
*/
var _require = require('@craco/craco'),
getLoaders = _require.getLoaders,
loaderByName = _require.loaderByName;
var prefixer = require('postcss-prefix-selector');
var overrideWebpackConfig = function overrideWebpackConfig(_ref) {
var context = _ref.context,
webpackConfig = _ref.webpackConfig,
pluginOptions = _ref.pluginOptions;
// Cannot use prebuilt options in craco, so we have to add it manually
// https://stackoverflow.com/questions/68738215/craco-plugin-not-loading
var theme = pluginOptions.theme,
uniqueName = pluginOptions.uniqueName;
var uniqueSelector = uniqueName ? '#' + uniqueName : '';
var themeSelectors = theme.map(function (e) {
return '#' + e.trim();
});
var prefixed = themeSelectors.map(function (e) {
return new RegExp("^".concat(e, " "), 'i');
});
var styleExt = '.(css|less|sass|scss)$';
var osExt = '.os';
var nodeModules = 'node_modules';
var _getLoaders = getLoaders(webpackConfig, loaderByName('postcss-loader')),
hasFoundAny = _getLoaders.hasFoundAny,
matches = _getLoaders.matches;
if (!hasFoundAny) return webpackConfig;
var osThemePrefixer = theme.map(function (mode) {
return prefixer({
prefix: "#".concat(mode),
exclude: ['html'].concat(_toConsumableArray(prefixed)),
includeFiles: [new RegExp(mode + osExt + styleExt, 'i')],
transform: function transform(prefix, selector, prefixedSelector) {
if (selector === 'body') return selector + prefix;else return prefixedSelector;
}
});
});
var appThemePrefixer = theme.map(function (mode) {
return prefixer({
prefix: "#".concat(mode),
exclude: ['html'].concat(_toConsumableArray(prefixed)),
includeFiles: [new RegExp(mode + styleExt, 'i')],
transform: function transform(prefix, selector, prefixedSelector) {
if (selector === 'body') return selector + prefix;else return prefixedSelector;
}
});
});
var appIdPrefixer = prefixer({
prefix: uniqueSelector,
exclude: ['html', 'body'],
includeFiles: [new RegExp(styleExt, 'i')],
ignoreFiles: [new RegExp(osExt + styleExt, 'i'), new RegExp(nodeModules, 'i')],
transform: function transform(prefix, selector, prefixedSelector) {
prefixedSelector = selector;
themeSelectors.forEach(function (e) {
prefixedSelector = prefixedSelector.replace(e, "".concat(e, " ").concat(uniqueSelector));
});
if (!prefixedSelector.includes(uniqueSelector)) prefixedSelector = "".concat(uniqueSelector, " ").concat(prefixedSelector);
return prefixedSelector;
}
});
matches.forEach(function (match) {
var _match$loader$options;
(_match$loader$options = match.loader.options.postcssOptions.plugins).push.apply(_match$loader$options, _toConsumableArray(osThemePrefixer).concat(_toConsumableArray(appThemePrefixer), [appIdPrefixer]));
});
return webpackConfig;
};
module.exports = {
overrideWebpackConfig: overrideWebpackConfig
};