From 1f950ce68c41ba54dac3f1829be9e4971648fc24 Mon Sep 17 00:00:00 2001 From: Peach Date: Fri, 26 Jan 2024 17:22:53 +0800 Subject: [PATCH] fix: integrated styled-components babel plugin does not works (#741) --- package.json | 1 + pnpm-lock.yaml | 115 +++++++++++++++++- src/builder/bundle/index.ts | 11 +- .../bundless/loaders/javascript/babel.ts | 5 +- 4 files changed, 124 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 1c2b8032..3662ee7f 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "@vercel/ncc": "0.33.3", "babel-plugin-dynamic-import-node": "2.3.3", "babel-plugin-module-resolver": "4.1.0", + "babel-plugin-styled-components": "2.1.4", "babel-plugin-transform-define": "2.0.1", "enhanced-resolve": "5.9.3", "fast-glob": "3.2.12", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 19d76ab9..10031a72 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: babel-plugin-module-resolver: specifier: 4.1.0 version: 4.1.0 + babel-plugin-styled-components: + specifier: 2.1.4 + version: 2.1.4(@babel/core@7.21.3)(styled-components@6.1.8) babel-plugin-transform-define: specifier: 2.0.1 version: 2.0.1 @@ -179,7 +182,7 @@ importers: dependencies: styled-components: specifier: ^6.0.0-beta.15 - version: 6.0.0-beta.15(react-dom@18.2.0)(react@16.14.0)(shallowequal@1.1.0)(stylis@4.1.3) + version: 6.0.0-beta.15(babel-plugin-styled-components@2.1.4)(react-dom@18.2.0)(react@16.14.0)(shallowequal@1.1.0)(stylis@4.1.3) devDependencies: shallowequal: specifier: ^1.1.0 @@ -303,6 +306,13 @@ packages: '@babel/types': 7.21.4 dev: false + /@babel/helper-annotate-as-pure@7.22.5: + resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.23.9 + dev: false + /@babel/helper-builder-binary-assignment-operator-visitor@7.18.9: resolution: {integrity: sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==} engines: {node: '>=6.9.0'} @@ -440,6 +450,13 @@ packages: dependencies: '@babel/types': 7.21.4 + /@babel/helper-module-imports@7.22.15: + resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.23.9 + dev: false + /@babel/helper-module-transforms@7.21.2: resolution: {integrity: sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==} engines: {node: '>=6.9.0'} @@ -466,6 +483,11 @@ packages: resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==} engines: {node: '>=6.9.0'} + /@babel/helper-plugin-utils@7.22.5: + resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} + engines: {node: '>=6.9.0'} + dev: false + /@babel/helper-remap-async-to-generator@7.18.9(@babel/core@7.21.3): resolution: {integrity: sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==} engines: {node: '>=6.9.0'} @@ -525,10 +547,20 @@ packages: resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==} engines: {node: '>=6.9.0'} + /@babel/helper-string-parser@7.23.4: + resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==} + engines: {node: '>=6.9.0'} + dev: false + /@babel/helper-validator-identifier@7.19.1: resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==} engines: {node: '>=6.9.0'} + /@babel/helper-validator-identifier@7.22.20: + resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} + engines: {node: '>=6.9.0'} + dev: false + /@babel/helper-validator-option@7.21.0: resolution: {integrity: sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==} engines: {node: '>=6.9.0'} @@ -948,6 +980,16 @@ packages: '@babel/helper-plugin-utils': 7.20.2 dev: false + /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.21.3): + resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.3 + '@babel/helper-plugin-utils': 7.22.5 + dev: false + /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.18.2): resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==} peerDependencies: @@ -1728,6 +1770,15 @@ packages: '@babel/helper-validator-identifier': 7.19.1 to-fast-properties: 2.0.0 + /@babel/types@7.23.9: + resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.23.4 + '@babel/helper-validator-identifier': 7.22.20 + to-fast-properties: 2.0.0 + dev: false + /@bcoe/v8-coverage@0.2.3: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: true @@ -2025,6 +2076,16 @@ packages: postcss-selector-parser: 6.0.10 dev: false + /@emotion/is-prop-valid@1.2.1: + resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==} + dependencies: + '@emotion/memoize': 0.8.1 + dev: false + + /@emotion/memoize@0.8.1: + resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} + dev: false + /@emotion/unitless@0.8.0: resolution: {integrity: sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==} dev: false @@ -3283,6 +3344,10 @@ packages: resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==} dev: true + /@types/stylis@4.2.0: + resolution: {integrity: sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==} + dev: false + /@types/yargs-parser@21.0.0: resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==} @@ -3947,6 +4012,21 @@ packages: - supports-color dev: false + /babel-plugin-styled-components@2.1.4(@babel/core@7.21.3)(styled-components@6.1.8): + resolution: {integrity: sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==} + peerDependencies: + styled-components: '>= 2' + dependencies: + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-module-imports': 7.22.15 + '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.21.3) + lodash: 4.17.21 + picomatch: 2.3.1 + styled-components: 6.1.8(react-dom@18.2.0)(react@16.14.0) + transitivePeerDependencies: + - '@babel/core' + dev: false + /babel-plugin-transform-define@2.0.1: resolution: {integrity: sha512-7lDR1nFGSJHmhq/ScQtp9LTDmNE2yKPoLtwfiu+WQZnj84XL/J/5AZWZXwYcOwbDtUPhtg+y0yxTiP/oGDU6Kw==} engines: {node: '>= 8.x.x'} @@ -4645,6 +4725,10 @@ packages: cssom: 0.3.8 dev: true + /csstype@3.1.2: + resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} + dev: false + /dargs@7.0.0: resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==} engines: {node: '>=8'} @@ -8355,6 +8439,7 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 prop-types: 15.8.1 + bundledDependencies: false /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} @@ -9002,7 +9087,7 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} - /styled-components@6.0.0-beta.15(react-dom@18.2.0)(react@16.14.0)(shallowequal@1.1.0)(stylis@4.1.3): + /styled-components@6.0.0-beta.15(babel-plugin-styled-components@2.1.4)(react-dom@18.2.0)(react@16.14.0)(shallowequal@1.1.0)(stylis@4.1.3): resolution: {integrity: sha512-VRyBVFnBQ97Ouj2acqwzp+n8cuTWlVpRXtP3P1hPoYwtTPB4a+s8ZI3oRS3KnIAumbK53P16AaqiXZIcl01TjA==} engines: {node: '>= 14'} peerDependencies: @@ -9033,6 +9118,7 @@ packages: '@babel/preset-typescript': 7.21.4(@babel/core@7.21.3) '@babel/traverse': 7.21.3 '@emotion/unitless': 0.8.0 + babel-plugin-styled-components: 2.1.4(@babel/core@7.21.3)(styled-components@6.1.8) css-to-react-native: 3.2.0 react: 16.14.0 react-dom: 18.2.0(react@16.14.0) @@ -9042,9 +9128,33 @@ packages: - supports-color dev: false + /styled-components@6.1.8(react-dom@18.2.0)(react@16.14.0): + resolution: {integrity: sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==} + engines: {node: '>= 16'} + peerDependencies: + react: '>= 16.8.0' + react-dom: '>= 16.8.0' + dependencies: + '@emotion/is-prop-valid': 1.2.1 + '@emotion/unitless': 0.8.0 + '@types/stylis': 4.2.0 + css-to-react-native: 3.2.0 + csstype: 3.1.2 + postcss: 8.4.31 + react: 16.14.0 + react-dom: 18.2.0(react@16.14.0) + shallowequal: 1.1.0 + stylis: 4.3.1 + tslib: 2.5.0 + dev: false + /stylis@4.1.3: resolution: {integrity: sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==} + /stylis@4.3.1: + resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==} + dev: false + /supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -9291,7 +9401,6 @@ packages: /tslib@2.5.0: resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==} - dev: true /tsx@3.6.0: resolution: {integrity: sha512-XzqSxPmyJnI7ZtEX/CLE/CSDkqbL7dK4jwtJRIZpV0EhCxWqtb1OqJPlUc4CVS3/MFdpt8ZxLpvPFohWRTHbzw==} diff --git a/src/builder/bundle/index.ts b/src/builder/bundle/index.ts index 30a9e0ee..4cd7ed10 100644 --- a/src/builder/bundle/index.ts +++ b/src/builder/bundle/index.ts @@ -40,6 +40,7 @@ async function bundle(opts: IBundleOpts): Promise { const config = opts.configProvider.configs[i]; const { plugins: extraPostCSSPlugins, ...postcssLoader } = config.postcssOptions || {}; + const babelSCOpts = getBabelStyledComponentsOpts(opts.configProvider.pkg); // workaround for combine continuous onBuildComplete log in watch mode const logStatus = lodash.debounce( () => @@ -105,12 +106,14 @@ async function bundle(opts: IBundleOpts): Promise { pluginTransformRuntime: {}, pluginLockCoreJS: {}, pluginDynamicImportNode: false, - pluginStyledComponents: getBabelStyledComponentsOpts( - opts.configProvider.pkg, - ), }, ], - beforeBabelPlugins: [require.resolve('babel-plugin-dynamic-import-node')], + beforeBabelPlugins: [ + require.resolve('babel-plugin-dynamic-import-node'), + ...(babelSCOpts + ? [[require.resolve('babel-plugin-styled-components'), babelSCOpts]] + : []), + ], extraBabelPresets: config.extraBabelPresets, extraBabelPlugins: config.extraBabelPlugins, diff --git a/src/builder/bundless/loaders/javascript/babel.ts b/src/builder/bundless/loaders/javascript/babel.ts index fab515f6..45688ba1 100644 --- a/src/builder/bundless/loaders/javascript/babel.ts +++ b/src/builder/bundless/loaders/javascript/babel.ts @@ -45,8 +45,8 @@ const babelTransformer: IJSTransformer = function (content) { path.dirname(this.paths.fileAbsPath), ), presetTypeScript: {}, - pluginStyledComponents: getBabelStyledComponentsOpts(this.pkg), }; + const pluginSCOpts = getBabelStyledComponentsOpts(this.pkg); // transform alias to relative path for babel-plugin-module-resolver const alias = Object.entries(oAlias).reduce( @@ -99,6 +99,9 @@ const babelTransformer: IJSTransformer = function (content) { extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs', '.json'], }, ], + ...(pluginSCOpts + ? [[require.resolve('babel-plugin-styled-components'), pluginSCOpts]] + : []), ...(define ? [ [