babel-plugin-react-css-modules
Version:
Transforms styleName to className using compile time CSS module resolution.
117 lines (90 loc) • 4.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _optionsDefaults = _interopRequireDefault(require("./schemas/optionsDefaults"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var isNamespacedStyleName = function isNamespacedStyleName(styleName) {
return styleName.indexOf('.') !== -1;
};
var handleError = function handleError(message, handleMissingStyleName) {
if (handleMissingStyleName === 'throw') {
throw new Error(message);
} else if (handleMissingStyleName === 'warn') {
// eslint-disable-next-line no-console
console.warn(message);
}
return null;
};
var getClassNameForNamespacedStyleName = function getClassNameForNamespacedStyleName(styleName, styleModuleImportMap, handleMissingStyleNameOption) {
// Note:
// Do not use the desctructing syntax with Babel.
// Desctructing adds _slicedToArray helper.
var styleNameParts = styleName.split('.');
var importName = styleNameParts[0];
var moduleName = styleNameParts[1];
var handleMissingStyleName = handleMissingStyleNameOption || _optionsDefaults["default"].handleMissingStyleName;
if (!moduleName) {
return handleError('Invalid style name: ' + styleName, handleMissingStyleName);
}
if (!styleModuleImportMap[importName]) {
return handleError('CSS module import does not exist: ' + importName, handleMissingStyleName);
}
if (!styleModuleImportMap[importName][moduleName]) {
return handleError('CSS module does not exist: ' + moduleName, handleMissingStyleName);
}
return styleModuleImportMap[importName][moduleName];
};
var getClassNameFromMultipleImports = function getClassNameFromMultipleImports(styleName, styleModuleImportMap, handleMissingStyleNameOption) {
var handleMissingStyleName = handleMissingStyleNameOption || _optionsDefaults["default"].handleMissingStyleName;
var importKeysWithMatches = Object.keys(styleModuleImportMap).map(function (importKey) {
return styleModuleImportMap[importKey][styleName] && importKey;
}).filter(function (importKey) {
return importKey;
});
if (importKeysWithMatches.length > 1) {
throw new Error('Cannot resolve styleName "' + styleName + '" because it is present in multiple imports:' + '\n\n\t' + importKeysWithMatches.join('\n\t') + '\n\nYou can resolve this by using a named import, e.g:' + '\n\n\timport foo from "' + importKeysWithMatches[0] + '";' + '\n\t<div styleName="foo.' + styleName + '" />' + '\n\n');
}
if (importKeysWithMatches.length === 0) {
return handleError('Could not resolve the styleName \'' + styleName + '\'.', handleMissingStyleName);
}
return styleModuleImportMap[importKeysWithMatches[0]][styleName];
};
var _default = function _default(styleNameValue, styleModuleImportMap, options) {
var styleModuleImportMapKeys = Object.keys(styleModuleImportMap);
var _ref = options || {},
_ref$handleMissingSty = _ref.handleMissingStyleName,
handleMissingStyleName = _ref$handleMissingSty === void 0 ? _optionsDefaults["default"].handleMissingStyleName : _ref$handleMissingSty,
_ref$autoResolveMulti = _ref.autoResolveMultipleImports,
autoResolveMultipleImports = _ref$autoResolveMulti === void 0 ? _optionsDefaults["default"].autoResolveMultipleImports : _ref$autoResolveMulti;
if (!styleNameValue) {
return '';
}
return styleNameValue.split(' ').filter(function (styleName) {
return styleName;
}).map(function (styleName) {
if (isNamespacedStyleName(styleName)) {
return getClassNameForNamespacedStyleName(styleName, styleModuleImportMap, handleMissingStyleName);
}
if (styleModuleImportMapKeys.length === 0) {
throw new Error('Cannot use styleName attribute for style name \'' + styleName + '\' without importing at least one stylesheet.');
}
if (styleModuleImportMapKeys.length > 1) {
if (!autoResolveMultipleImports) {
throw new Error('Cannot use anonymous style name \'' + styleName + '\' with more than one stylesheet import without setting \'autoResolveMultipleImports\' to true.');
}
return getClassNameFromMultipleImports(styleName, styleModuleImportMap, handleMissingStyleName);
}
var styleModuleMap = styleModuleImportMap[styleModuleImportMapKeys[0]];
if (!styleModuleMap[styleName]) {
return handleError('Could not resolve the styleName \'' + styleName + '\'.', handleMissingStyleName);
}
return styleModuleMap[styleName];
}).filter(function (className) {
// Remove any styles which could not be found (if handleMissingStyleName === 'ignore')
return className;
}).join(' ');
};
exports["default"] = _default;
//# sourceMappingURL=getClassName.js.map