diff --git a/packages/babel-plugin-react-scoped-css/README.md b/packages/babel-plugin-react-scoped-css/README.md index 58fe87f..d31a95b 100644 --- a/packages/babel-plugin-react-scoped-css/README.md +++ b/packages/babel-plugin-react-scoped-css/README.md @@ -99,6 +99,16 @@ also note that you can define your own matching rule like this If you have other plugins installed, just add it to the list, order doesn't matter. Note: this plugin accepts `include`(RegExp, which defaults to `/\.scoped\.(sa|sc|c)ss$/`) to config which css file to be identified as scoped. +Note: this plugin accepts `ignoreNode` to config which Node to be ignore. eg React.Fragment config +```js +const ignoreNode = (node) => { + if(node.openingElement.name.name === 'Fragment') return true; + if(node.openingElement.name.type === 'JSXMemberExpression' + && node.openingElement.name.object.name === 'React' + && node.openingElement.name.property.name === 'Fragment' ) return true; + return false; +}; +``` **the webpack loader** diff --git a/packages/babel-plugin-react-scoped-css/index.js b/packages/babel-plugin-react-scoped-css/index.js index 60ca26b..bde4325 100644 --- a/packages/babel-plugin-react-scoped-css/index.js +++ b/packages/babel-plugin-react-scoped-css/index.js @@ -49,9 +49,12 @@ module.exports = function ({ types: t }) { path.node.source.value = `${path.node.source.value}?scopeId=${hash}`; }, JSXElement(path, stats) { + const { ignoreNode } = stats.opts; + // ignoreNode 可以让用户自定义哪些节点不添加约束,比如 React.Fragment 添加额外属性会报warn或error if ( !this.hasScopedCss || - path.node.openingElement.name.type === "JSXMemberExpression" + (typeof ignoreNode === 'function' ? ignoreNode(path.node, stats) : path.node.openingElement.name.type === "JSXMemberExpression") + ) { return; }