From 7d5c5d5cfc2ed0ca52783246dfdb4d37e29192a2 Mon Sep 17 00:00:00 2001 From: AlbertLucianto Date: Fri, 22 Feb 2019 12:54:17 +0800 Subject: [PATCH 1/3] feat: add autoResolveMultiImports option --- src/createObjectExpression.js | 3 + src/getClassName.js | 97 +++++++++++++++++----------- src/index.js | 14 ++-- src/replaceJsxExpressionContainer.js | 11 ++-- src/resolveStringLiteral.js | 8 +-- src/schemas/optionsSchema.json | 3 + src/types.js | 5 ++ 7 files changed, 83 insertions(+), 58 deletions(-) diff --git a/src/createObjectExpression.js b/src/createObjectExpression.js index 29a6865..a14a224 100644 --- a/src/createObjectExpression.js +++ b/src/createObjectExpression.js @@ -28,6 +28,9 @@ const createObjectExpression = (t: BabelTypes, object: InputObjectType): ObjectE newValue = createObjectExpression(t, value); } else if (typeof value === 'boolean') { newValue = t.booleanLiteral(value); + } else if (typeof value === 'undefined') { + // eslint-disable-next-line no-continue + continue; } else { throw new TypeError('Unexpected type: ' + typeof value); } diff --git a/src/getClassName.js b/src/getClassName.js index c445438..537a2e8 100644 --- a/src/getClassName.js +++ b/src/getClassName.js @@ -3,18 +3,26 @@ import type { StyleModuleMapType, StyleModuleImportMapType, - HandleMissingStyleNameOptionType + HandleMissingStyleNameOptionType, + GetClassNameOptionsType } from './types'; import optionsDefaults from './schemas/optionsDefaults'; -type OptionsType = {| - handleMissingStyleName: HandleMissingStyleNameOptionType -|}; - const isNamespacedStyleName = (styleName: string): boolean => { return styleName.indexOf('.') !== -1; }; +const handleError = (message: string, handleMissingStyleName: HandleMissingStyleNameOptionType): null => { + if (handleMissingStyleName === 'throw') { + throw new Error(message); + } else if (handleMissingStyleName === 'warn') { + // eslint-disable-next-line no-console + console.warn(message); + } + + return null; +}; + const getClassNameForNamespacedStyleName = ( styleName: string, styleModuleImportMap: StyleModuleImportMapType, @@ -30,47 +38,60 @@ const getClassNameForNamespacedStyleName = ( optionsDefaults.handleMissingStyleName; if (!moduleName) { - if (handleMissingStyleName === 'throw') { - throw new Error('Invalid style name: ' + styleName); - } else if (handleMissingStyleName === 'warn') { - // eslint-disable-next-line no-console - console.warn('Invalid style name: ' + styleName); - } else { - return null; - } + return handleError('Invalid style name: ' + styleName, handleMissingStyleName); } if (!styleModuleImportMap[importName]) { - if (handleMissingStyleName === 'throw') { - throw new Error('CSS module import does not exist: ' + importName); - } else if (handleMissingStyleName === 'warn') { - // eslint-disable-next-line no-console - console.warn('CSS module import does not exist: ' + importName); - } else { - return null; - } + return handleError('CSS module import does not exist: ' + importName, handleMissingStyleName); } if (!styleModuleImportMap[importName][moduleName]) { - if (handleMissingStyleName === 'throw') { - throw new Error('CSS module does not exist: ' + moduleName); - } else if (handleMissingStyleName === 'warn') { - // eslint-disable-next-line no-console - console.warn('CSS module does not exist: ' + moduleName); - } else { - return null; - } + return handleError('CSS module does not exist: ' + moduleName, handleMissingStyleName); } return styleModuleImportMap[importName][moduleName]; }; -export default (styleNameValue: string, styleModuleImportMap: StyleModuleImportMapType, options?: OptionsType): string => { +const getClassNameFromMultipleImports = ( + styleName: string, + styleModuleImportMap: StyleModuleImportMapType, + handleMissingStyleNameOption?: HandleMissingStyleNameOptionType +): ?string => { + const handleMissingStyleName = handleMissingStyleNameOption || + optionsDefaults.handleMissingStyleName; + + const importKeysWithMatches = Object.keys(styleModuleImportMap) + .map((importKey) => { + return styleModuleImportMap[importKey][styleName] && importKey; + }) + .filter((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
' + + '\n\n'); + } + + if (importKeysWithMatches.length === 0) { + return handleError('Could not resolve the styleName \'' + styleName + '\'.', handleMissingStyleName); + } + + return styleModuleImportMap[importKeysWithMatches[0]][styleName]; +}; + +export default (styleNameValue: string, styleModuleImportMap: StyleModuleImportMapType, options?: GetClassNameOptionsType): string => { const styleModuleImportMapKeys = Object.keys(styleModuleImportMap); const handleMissingStyleName = options && options.handleMissingStyleName || optionsDefaults.handleMissingStyleName; + const autoResolveMultipleImports = options && options.autoResolveMultipleImports; + if (!styleNameValue) { return ''; } @@ -91,20 +112,18 @@ export default (styleNameValue: string, styleModuleImportMap: StyleModuleImportM } if (styleModuleImportMapKeys.length > 1) { - throw new Error('Cannot use anonymous style name \'' + styleName + - '\' with more than one stylesheet import.'); + 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); } const styleModuleMap: StyleModuleMapType = styleModuleImportMap[styleModuleImportMapKeys[0]]; if (!styleModuleMap[styleName]) { - if (handleMissingStyleName === 'throw') { - throw new Error('Could not resolve the styleName \'' + styleName + '\'.'); - } - if (handleMissingStyleName === 'warn') { - // eslint-disable-next-line no-console - console.warn('Could not resolve the styleName \'' + styleName + '\'.'); - } + return handleError('Could not resolve the styleName \'' + styleName + '\'.', handleMissingStyleName); } return styleModuleMap[styleName]; diff --git a/src/index.js b/src/index.js index a584fe0..a604a91 100644 --- a/src/index.js +++ b/src/index.js @@ -212,19 +212,23 @@ export default ({ } const handleMissingStyleName = stats.opts && stats.opts.handleMissingStyleName || optionsDefaults.handleMissingStyleName; + const autoResolveMultipleImports = stats.opts && stats.opts.autoResolveMultipleImports || optionsDefaults.autoResolveMultipleImports; for (const attribute of attributes) { const destinationName = attributeNames[attribute.name.name]; + const options = { + autoResolveMultipleImports, + handleMissingStyleName + }; + if (t.isStringLiteral(attribute.value)) { resolveStringLiteral( path, filenameMap[filename].styleModuleImportMap, attribute, destinationName, - { - handleMissingStyleName - } + options ); } else if (t.isJSXExpressionContainer(attribute.value)) { if (!filenameMap[filename].importedHelperIndentifier) { @@ -237,9 +241,7 @@ export default ({ destinationName, filenameMap[filename].importedHelperIndentifier, filenameMap[filename].styleModuleImportMapIdentifier, - { - handleMissingStyleName - } + options ); } } diff --git a/src/replaceJsxExpressionContainer.js b/src/replaceJsxExpressionContainer.js index 29769f1..5dd6a01 100644 --- a/src/replaceJsxExpressionContainer.js +++ b/src/replaceJsxExpressionContainer.js @@ -11,16 +11,12 @@ import BabelTypes, { jSXIdentifier } from '@babel/types'; import type { - HandleMissingStyleNameOptionType + GetClassNameOptionsType } from './types'; import conditionalClassMerge from './conditionalClassMerge'; import createObjectExpression from './createObjectExpression'; import optionsDefaults from './schemas/optionsDefaults'; -type OptionsType = {| - handleMissingStyleName: HandleMissingStyleNameOptionType -|}; - export default ( t: BabelTypes, // eslint-disable-next-line flowtype/no-weak-types @@ -29,7 +25,7 @@ export default ( destinationName: string, importedHelperIndentifier: Identifier, styleModuleImportMapIdentifier: Identifier, - options: OptionsType + options: GetClassNameOptionsType ): void => { const expressionContainerValue = sourceAttribute.value; const destinationAttribute = path.node.openingElement.attributes @@ -50,7 +46,8 @@ export default ( // Only provide options argument if the options are something other than default // This helps save a few bits in the generated user code - if (options.handleMissingStyleName !== optionsDefaults.handleMissingStyleName) { + if (options.handleMissingStyleName !== optionsDefaults.handleMissingStyleName || + options.autoResolveMultipleImports !== optionsDefaults.autoResolveMultipleImports) { args.push(createObjectExpression(t, options)); } diff --git a/src/resolveStringLiteral.js b/src/resolveStringLiteral.js index 5af63dd..b1d4f32 100644 --- a/src/resolveStringLiteral.js +++ b/src/resolveStringLiteral.js @@ -10,13 +10,9 @@ import conditionalClassMerge from './conditionalClassMerge'; import getClassName from './getClassName'; import type { StyleModuleImportMapType, - HandleMissingStyleNameOptionType + GetClassNameOptionsType } from './types'; -type OptionsType = {| - handleMissingStyleName: HandleMissingStyleNameOptionType -|}; - /** * Updates the className value of a JSX element using a provided styleName attribute. */ @@ -25,7 +21,7 @@ export default ( styleModuleImportMap: StyleModuleImportMapType, sourceAttribute: JSXAttribute, destinationName: string, - options: OptionsType + options: GetClassNameOptionsType ): void => { const resolvedStyleName = getClassName(sourceAttribute.value.value, styleModuleImportMap, options); diff --git a/src/schemas/optionsSchema.json b/src/schemas/optionsSchema.json index 2b3041f..2257f0c 100644 --- a/src/schemas/optionsSchema.json +++ b/src/schemas/optionsSchema.json @@ -72,6 +72,9 @@ }, "skip": { "type": "boolean" + }, + "autoResolveMultipleImports": { + "type": "boolean" } }, "type": "object" diff --git a/src/types.js b/src/types.js index 76cb076..9a7ae59 100644 --- a/src/types.js +++ b/src/types.js @@ -13,3 +13,8 @@ export type GenerateScopedNameType = (localName: string, resourcePath: string) = export type GenerateScopedNameConfigurationType = GenerateScopedNameType | string; export type HandleMissingStyleNameOptionType = 'throw' | 'warn' | 'ignore'; + +export type GetClassNameOptionsType = {| + handleMissingStyleName: HandleMissingStyleNameOptionType, + autoResolveMultipleImports: boolean +|}; From 70ce1103d9573cf1969e964520f9fc9d029d00fc Mon Sep 17 00:00:00 2001 From: AlbertLucianto Date: Fri, 22 Feb 2019 12:55:04 +0800 Subject: [PATCH 2/3] test: add test cases for autoResolveMultiImports option --- .../bar.css | 3 ++ .../foo.css | 1 + .../input.js | 5 ++++ .../options.json | 12 ++++++++ .../bar.css | 3 ++ .../foo.css | 1 + .../input.js | 4 +++ .../options.json | 12 ++++++++ .../bar.css | 3 ++ .../foo.css | 1 + .../input.js | 4 +++ .../options.json | 11 ++++++++ .../bar.css | 1 + .../foo.css | 1 + .../input.js | 5 ++++ .../options.json | 11 ++++++++ .../output.js | 8 ++++++ .../bar.css | 1 + .../foo.css | 1 + .../input.js | 8 ++++++ .../options.json | 11 ++++++++ .../output.js | 28 +++++++++++++++++++ 22 files changed, 135 insertions(+) create mode 100644 test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/bar.css create mode 100644 test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/foo.css create mode 100644 test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/input.js create mode 100644 test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/options.json create mode 100644 test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/bar.css create mode 100644 test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/foo.css create mode 100644 test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/input.js create mode 100644 test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/options.json create mode 100644 test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/bar.css create mode 100644 test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/foo.css create mode 100644 test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/input.js create mode 100644 test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/options.json create mode 100644 test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/bar.css create mode 100644 test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/foo.css create mode 100644 test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/input.js create mode 100644 test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/options.json create mode 100644 test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/output.js create mode 100644 test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/bar.css create mode 100644 test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/foo.css create mode 100644 test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/input.js create mode 100644 test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/options.json create mode 100644 test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/output.js diff --git a/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/bar.css b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/bar.css new file mode 100644 index 0000000..2177a31 --- /dev/null +++ b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/bar.css @@ -0,0 +1,3 @@ +.a {} + +.b {} diff --git a/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/foo.css b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/foo.css new file mode 100644 index 0000000..5e869b7 --- /dev/null +++ b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/foo.css @@ -0,0 +1 @@ +.b {} diff --git a/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/input.js b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/input.js new file mode 100644 index 0000000..150491a --- /dev/null +++ b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/input.js @@ -0,0 +1,5 @@ +import './foo.css'; +import './bar.css'; + +
; +
; diff --git a/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/options.json b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/options.json new file mode 100644 index 0000000..ea43fb2 --- /dev/null +++ b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with duplicates/options.json @@ -0,0 +1,12 @@ +{ + "plugins": [ + [ + "../../../../src", + { + "generateScopedName": "[name]__[local]", + "autoResolveMultipleImports": true + } + ] + ], + "throws": "Cannot resolve styleName \"b\" because it is present in multiple imports:\n\n\t./foo.css\n\t./bar.css\n\nYou can resolve this by using a named import, e.g:\n\n\timport foo from \"./foo.css\";\n\t
\n\n" +} diff --git a/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/bar.css b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/bar.css new file mode 100644 index 0000000..2177a31 --- /dev/null +++ b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/bar.css @@ -0,0 +1,3 @@ +.a {} + +.b {} diff --git a/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/foo.css b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/foo.css new file mode 100644 index 0000000..5e869b7 --- /dev/null +++ b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/foo.css @@ -0,0 +1 @@ +.b {} diff --git a/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/input.js b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/input.js new file mode 100644 index 0000000..7e9fc6a --- /dev/null +++ b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/input.js @@ -0,0 +1,4 @@ +import './foo.css'; +import './bar.css'; + +
; diff --git a/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/options.json b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/options.json new file mode 100644 index 0000000..2b1f00b --- /dev/null +++ b/test/fixtures/react-css-modules/throws if autoResolveMultipleImport with no match/options.json @@ -0,0 +1,12 @@ +{ + "plugins": [ + [ + "../../../../src", + { + "generateScopedName": "[name]__[local]", + "autoResolveMultipleImports": true + } + ] + ], + "throws": "Could not resolve the styleName 'c'." +} diff --git a/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/bar.css b/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/bar.css new file mode 100644 index 0000000..2177a31 --- /dev/null +++ b/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/bar.css @@ -0,0 +1,3 @@ +.a {} + +.b {} diff --git a/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/foo.css b/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/foo.css new file mode 100644 index 0000000..5e869b7 --- /dev/null +++ b/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/foo.css @@ -0,0 +1 @@ +.b {} diff --git a/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/input.js b/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/input.js new file mode 100644 index 0000000..7a76f4e --- /dev/null +++ b/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/input.js @@ -0,0 +1,4 @@ +import './foo.css'; +import './bar.css'; + +
; diff --git a/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/options.json b/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/options.json new file mode 100644 index 0000000..e6634e5 --- /dev/null +++ b/test/fixtures/react-css-modules/throws if unset autoResolveMultipleImport with multiple anonymous imports/options.json @@ -0,0 +1,11 @@ +{ + "plugins": [ + [ + "../../../../src", + { + "generateScopedName": "[name]__[local]" + } + ] + ], + "throws": "Cannot use anonymous style name 'a' with more than one stylesheet import without setting 'autoResolveMultipleImports' to true." +} diff --git a/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/bar.css b/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/bar.css new file mode 100644 index 0000000..5512dae --- /dev/null +++ b/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/bar.css @@ -0,0 +1 @@ +.a {} diff --git a/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/foo.css b/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/foo.css new file mode 100644 index 0000000..5e869b7 --- /dev/null +++ b/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/foo.css @@ -0,0 +1 @@ +.b {} diff --git a/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/input.js b/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/input.js new file mode 100644 index 0000000..150491a --- /dev/null +++ b/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/input.js @@ -0,0 +1,5 @@ +import './foo.css'; +import './bar.css'; + +
; +
; diff --git a/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/options.json b/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/options.json new file mode 100644 index 0000000..d92f25c --- /dev/null +++ b/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/options.json @@ -0,0 +1,11 @@ +{ + "plugins": [ + [ + "../../../../src", + { + "generateScopedName": "[name]__[local]", + "autoResolveMultipleImports": true + } + ] + ] +} diff --git a/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/output.js b/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/output.js new file mode 100644 index 0000000..0c29384 --- /dev/null +++ b/test/fixtures/react-css-modules/uses autoResolveMultipleImport no duplicates/output.js @@ -0,0 +1,8 @@ +"use strict"; + +require("./foo.css"); + +require("./bar.css"); + +
; +
; diff --git a/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/bar.css b/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/bar.css new file mode 100644 index 0000000..5512dae --- /dev/null +++ b/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/bar.css @@ -0,0 +1 @@ +.a {} diff --git a/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/foo.css b/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/foo.css new file mode 100644 index 0000000..5e869b7 --- /dev/null +++ b/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/foo.css @@ -0,0 +1 @@ +.b {} diff --git a/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/input.js b/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/input.js new file mode 100644 index 0000000..31a34a6 --- /dev/null +++ b/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/input.js @@ -0,0 +1,8 @@ +import './foo.css'; +import './bar.css'; + +const styleNameA = 'a'; +const styleNameB = 'b'; + +
; +
; diff --git a/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/options.json b/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/options.json new file mode 100644 index 0000000..d92f25c --- /dev/null +++ b/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/options.json @@ -0,0 +1,11 @@ +{ + "plugins": [ + [ + "../../../../src", + { + "generateScopedName": "[name]__[local]", + "autoResolveMultipleImports": true + } + ] + ] +} diff --git a/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/output.js b/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/output.js new file mode 100644 index 0000000..78f8fbe --- /dev/null +++ b/test/fixtures/react-css-modules/uses autoResolveMultipleImport on runtime/output.js @@ -0,0 +1,28 @@ +"use strict"; + +var _getClassName2 = _interopRequireDefault(require("babel-plugin-react-css-modules/dist/browser/getClassName")); + +require("./foo.css"); + +require("./bar.css"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +const _styleModuleImportMap = { + "./foo.css": { + "b": "foo__b" + }, + "./bar.css": { + "a": "bar__a" + } +}; +const styleNameA = 'a'; +const styleNameB = 'b'; +
; +
; From 03930eb5da02f12376cc49ec340b4b2e60dc0d7e Mon Sep 17 00:00:00 2001 From: AlbertLucianto Date: Fri, 22 Feb 2019 13:09:23 +0800 Subject: [PATCH 3/3] docs: add for autoResolveMultiImports option --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9f9b6d6..a1bca75 100644 --- a/README.md +++ b/README.md @@ -199,6 +199,7 @@ Configure the options for the plugin within your `.babelrc` as follows: |`handleMissingStyleName`|`"throw"`, `"warn"`, `"ignore"`|Determines what should be done for undefined CSS modules (using a `styleName` for which there is no CSS module defined). Setting this option to `"ignore"` is equivalent to setting `errorWhenNotFound: false` in [react-css-modules](https://github.com/gajus/react-css-modules#errorwhennotfound). |`"throw"`| |`attributeNames`|`?AttributeNameMapType`|Refer to [Custom Attribute Mapping](#custom-attribute-mapping)|`{"styleName": "className"}`| |`skip`|`boolean`|Whether to apply plugin if no matching `attributeNames` found in the file|`false`| +|`autoResolveMultipleImports`|`boolean`|Allow multiple anonymous imports if `styleName` is only in one of them.|`false`| Missing a configuration? [Raise an issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/new?title=New%20configuration:).