Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@dcasia/mini-program-tailwind-webpack-plugin
Advanced tools
@dcasia/mini-program-tailwind-webpack-plugin - npm Package Compare versions
Comparing version 1.3.0-beta.9 to 1.3.0-beta.10
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var universalHandler = require('./universal-handler'); | ||
| var webpackSources = require('webpack-sources'); | ||
| var WindiCSSWebpackPlugin = require('windicss-webpack-plugin'); | ||
| var babel = require('@babel/core'); | ||
| require('@vivaxy/wxml'); | ||
| function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
| function _interopNamespace(e) { | ||
| if (e && e.__esModule) return e; | ||
| var n = Object.create(null); | ||
| if (e) { | ||
| Object.keys(e).forEach(function (k) { | ||
| if (k !== 'default') { | ||
| var d = Object.getOwnPropertyDescriptor(e, k); | ||
| Object.defineProperty(n, k, d.get ? d : { | ||
| enumerable: true, | ||
| get: function () { return e[k]; } | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| n["default"] = e; | ||
| return Object.freeze(n); | ||
| } | ||
| var WindiCSSWebpackPlugin__default = /*#__PURE__*/_interopDefaultLegacy(WindiCSSWebpackPlugin); | ||
| var babel__namespace = /*#__PURE__*/_interopNamespace(babel); | ||
| /*! ***************************************************************************** | ||
@@ -72,4 +44,3 @@ Copyright (c) Microsoft Corporation. | ||
| var _a$2; | ||
| var regExpJS = /.+\.js$/; | ||
| var _a; | ||
| var regExpStyle = /.+\.(?:wx|ac|jx|tt|q|c)ss$/; | ||
@@ -83,287 +54,7 @@ var regExpTemplate = /.+\.(wx|ax|jx|ks|tt|q)ml$/; | ||
| } | ||
| var charactersMap = { | ||
| '[': '-', | ||
| ']': '-', | ||
| '(': '-', | ||
| ')': '-', | ||
| '#': '-h-', | ||
| '!': '-i-', | ||
| '/': '-s-', | ||
| '.': '-d-', | ||
| ':': '-c-', | ||
| ',': '-2c-' | ||
| }; | ||
| var specialCharactersMap = { | ||
| '\\\\2c\\s': '-2c-' | ||
| }; | ||
| var backslashMap = (_a$2 = {}, | ||
| _a$2[FileType.Style] = '\\\\\\', | ||
| _a$2[FileType.Template] = '\\', | ||
| _a$2); | ||
| function handleCharacters(content, type) { | ||
| for (var from in charactersMap) { | ||
| var to = charactersMap[from]; | ||
| var regExp = new RegExp("".concat(backslashMap[type]).concat(from), 'g'); | ||
| content = content.replace(regExp, to); | ||
| } | ||
| for (var from in specialCharactersMap) { | ||
| var to = specialCharactersMap[from]; | ||
| var regExp = new RegExp("".concat(from), 'g'); | ||
| content = content.replace(regExp, to); | ||
| } | ||
| return content; | ||
| } | ||
| var matchScriptsInsideClassNames = /({{)(.+?)(}})/g; | ||
| var replaceMarker = '__MP_TW_PLUGIN_REPLACE__'; | ||
| function handleClassNameWithCurlyBraces(raw) { | ||
| var scriptsMatchResults = Array.from(raw.matchAll(matchScriptsInsideClassNames)); | ||
| if (scriptsMatchResults.length) { | ||
| raw = raw.replace(matchScriptsInsideClassNames, "{{".concat(replaceMarker, "}}")); | ||
| } | ||
| raw = handleCharacters(raw, FileType.Template); | ||
| if (scriptsMatchResults.length) { | ||
| for (var _i = 0, scriptsMatchResults_1 = scriptsMatchResults; _i < scriptsMatchResults_1.length; _i++) { | ||
| var script = scriptsMatchResults_1[_i]; | ||
| var scriptContent = script[0].replace(matchScriptsInsideClassNames, '$2'); | ||
| var output = babel__namespace.transformSync(scriptContent, { | ||
| generatorOpts: { | ||
| compact: true, | ||
| retainLines: true | ||
| }, | ||
| configFile: false, | ||
| plugins: [replaceStringLiteralPlugin] | ||
| }); | ||
| raw = raw.replace(replaceMarker, output.code.replace(/;$/, '')); | ||
| } | ||
| } | ||
| return raw; | ||
| } | ||
| var _a$1; | ||
| var classFieldsChanges = []; | ||
| var classFieldName = (_a$1 = {}, | ||
| _a$1[FrameworkUsedInTaro.React] = ['className'], | ||
| _a$1[FrameworkUsedInTaro.Vue2] = ['class', 'staticClass'], | ||
| _a$1[FrameworkUsedInTaro.Vue3] = ['class', 'staticClass'], | ||
| _a$1); | ||
| function logClassFieldsChange(rawContent, newContent) { | ||
| classFieldsChanges.push([rawContent, newContent]); | ||
| } | ||
| function cleanClassFieldsChanges() { | ||
| classFieldsChanges = []; | ||
| } | ||
| function replaceStringLiteralPlugin(_a) { | ||
| var t = _a.types; | ||
| return { | ||
| visitor: { | ||
| StringLiteral: function (path) { | ||
| var rawContent = path.node.value; | ||
| var newContent = handleCharacters(rawContent, FileType.Template); | ||
| if (newContent !== rawContent) { | ||
| path.replaceWith(t.stringLiteral(newContent)); | ||
| path.skip(); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| function replaceClassFieldsValuePlugin(_a) { | ||
| var t = _a.types; | ||
| return { | ||
| visitor: { | ||
| StringLiteral: function (path, state) { | ||
| var _a; | ||
| var targetClassFieldName = classFieldName[state.opts.framework] || []; | ||
| var keyNode = path.key === 'value' && path.parentPath.isObjectProperty() && path.parentPath.get('key') // class: 'test' | ||
| || (path.parentPath.isArrayExpression() && path.parentPath.parentPath.isObjectProperty() && path.parentPath.parentPath.get('key')) // class: ['test', 'test'] | ||
| || (path.key === 'key' && ((_a = path.parentPath.findParent(function (path) { return path.isObjectProperty(); })) === null || _a === void 0 ? void 0 : _a.get('key'))); // class: ['test', {'test': true}] or class: {'test': true} | ||
| if (keyNode && !Array.isArray(keyNode)) { | ||
| var foundClassName = targetClassFieldName.find(function (name) { var _a; return (_a = keyNode.isIdentifier) === null || _a === void 0 ? void 0 : _a.call(keyNode, { name: name }); }); | ||
| if (foundClassName) { | ||
| var rawContent = path.node.value; | ||
| var newContent = handleClassNameWithCurlyBraces(rawContent); | ||
| if (newContent !== rawContent) { | ||
| logClassFieldsChange(rawContent, newContent); | ||
| path.replaceWith(t.stringLiteral(newContent)); | ||
| path.skip(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| function collectRawAndModified(rawContent, framework) { | ||
| cleanClassFieldsChanges(); | ||
| babel__namespace.transformSync(rawContent, { | ||
| plugins: [ | ||
| [ | ||
| replaceClassFieldsValuePlugin, { | ||
| framework: framework | ||
| }, | ||
| ], | ||
| ], | ||
| configFile: false | ||
| }); | ||
| return classFieldsChanges; | ||
| } | ||
| var _a; | ||
| var frameworkModuleCharacteristics = (_a = {}, | ||
| _a[FrameworkUsedInTaro.React] = ['.jsx', '.tsx'], | ||
| _a[FrameworkUsedInTaro.Vue2] = ['type=template'], | ||
| _a[FrameworkUsedInTaro.Vue3] = ['type=template'], | ||
| (_a = {}, | ||
| _a[FileType.Style] = '\\\\\\', | ||
| _a[FileType.Template] = '\\', | ||
| _a); | ||
| var TaroVNodeTailwindWebpackPlugin = /** @class */ (function () { | ||
| function TaroVNodeTailwindWebpackPlugin(options) { | ||
| this.defaultOptions = { | ||
| framework: FrameworkUsedInTaro.React, | ||
| enableDebugLog: false | ||
| }; | ||
| this.options = __assign(__assign({}, this.defaultOptions), options); | ||
| this.moduleCharcs = frameworkModuleCharacteristics[this.options.framework] || []; | ||
| } | ||
| TaroVNodeTailwindWebpackPlugin.prototype.apply = function (compiler) { | ||
| var _this = this; | ||
| if (!(this.moduleCharcs.length > 0)) { | ||
| return console.warn('[mini-program-tailwind-plugin]: Unsupported framework type, submit issues here: https://github.com/dcasia/mini-program-tailwind/issues'); | ||
| } | ||
| // Using Webpack v4 API here as Taro sticks with v4 | ||
| compiler.hooks.thisCompilation.tap(TaroVNodeTailwindWebpackPlugin.pluginName, function (compilation) { | ||
| var rawVsModifiedPairs = []; | ||
| compilation.hooks.afterOptimizeModules.tap(TaroVNodeTailwindWebpackPlugin.pluginName, function (modules) { | ||
| var _a, _b; | ||
| for (var _i = 0, _c = Array.from(modules); _i < _c.length; _i++) { | ||
| var module_1 = _c[_i]; | ||
| for (var _d = 0, _e = _this.moduleCharcs; _d < _e.length; _d++) { | ||
| var charc = _e[_d]; | ||
| // @ts-ignore | ||
| if (((_a = module_1 === null || module_1 === void 0 ? void 0 : module_1.resource) === null || _a === void 0 ? void 0 : _a.includes(charc)) && ((_b = module_1 === null || module_1 === void 0 ? void 0 : module_1._source) === null || _b === void 0 ? void 0 : _b._value)) { | ||
| // @ts-ignore | ||
| rawVsModifiedPairs.push.apply(rawVsModifiedPairs, collectRawAndModified(module_1._source._value, _this.options.framework)); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| compilation.hooks.afterOptimizeAssets.tap(TaroVNodeTailwindWebpackPlugin.pluginName, function (assets) { | ||
| if (_this.options.enableDebugLog) { | ||
| console.log('[mini-program-tailwind-plugin]: Collected', rawVsModifiedPairs); | ||
| } | ||
| for (var pathname in assets) { | ||
| if (!regExpJS.test(pathname)) { | ||
| continue; | ||
| } | ||
| var originalSource = assets[pathname]; | ||
| var removedPair = []; | ||
| var rawSource = originalSource.source().toString(); | ||
| var hasTheAssetChanged = false; | ||
| for (var pairIndex in rawVsModifiedPairs) { | ||
| var pair = rawVsModifiedPairs[pairIndex]; | ||
| var rawContent = pair[0]; | ||
| var newContent = pair[1]; | ||
| /** | ||
| * Todo: implement more strict match here | ||
| * E.g. Combining with 'class:' prefix or finding the target by temporarily placing a mark | ||
| * */ | ||
| if (rawSource.includes(rawContent)) { | ||
| rawSource = rawSource.replace(rawContent, newContent); | ||
| removedPair.push(pair); | ||
| hasTheAssetChanged = true; | ||
| if (_this.options.enableDebugLog) { | ||
| console.log('[mini-program-tailwind-plugin]: Replaced', pair); | ||
| } | ||
| } | ||
| } | ||
| var _loop_1 = function (pairToBeRemoved) { | ||
| var indexToBeRemoved = rawVsModifiedPairs.findIndex(function (pair) { return pair === pairToBeRemoved; }); | ||
| rawVsModifiedPairs.splice(indexToBeRemoved, 1); | ||
| if (_this.options.enableDebugLog) { | ||
| console.log('[mini-program-tailwind-plugin]: Removed', pairToBeRemoved); | ||
| console.log('[mini-program-tailwind-plugin]: Remain', rawVsModifiedPairs); | ||
| } | ||
| }; | ||
| for (var _i = 0, removedPair_1 = removedPair; _i < removedPair_1.length; _i++) { | ||
| var pairToBeRemoved = removedPair_1[_i]; | ||
| _loop_1(pairToBeRemoved); | ||
| } | ||
| if (hasTheAssetChanged) { | ||
| var source = new webpackSources.ConcatSource(rawSource); | ||
| // @ts-ignore | ||
| compilation.updateAsset(pathname, source); | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
| }; | ||
| TaroVNodeTailwindWebpackPlugin.pluginName = 'taro-v-node-tailwind-webpack-plugin'; | ||
| return TaroVNodeTailwindWebpackPlugin; | ||
| }()); | ||
| var index = (function (ctx, options) { | ||
| /** | ||
| * User configuration from Taro | ||
| */ | ||
| var taroConfig = ctx.initialConfig; | ||
| var framework = taroConfig.framework; | ||
| var srcPath = taroConfig.sourceRoot; | ||
| var designWidth = taroConfig.designWidth; | ||
| // Default configuration | ||
| var defaultOptions = { | ||
| enableRpx: false, | ||
| enableWindiCSS: true, | ||
| enableDebugLog: false, | ||
| designWidth: 375, | ||
| framework: FrameworkUsedInTaro.React | ||
| }; | ||
| // Final configuration | ||
| var finalOptions = __assign(__assign(__assign({}, defaultOptions), { | ||
| designWidth: designWidth, | ||
| framework: framework | ||
| }), options); | ||
| ctx.modifyWebpackChain(function (_a) { | ||
| var chain = _a.chain; | ||
| if (finalOptions.enableWindiCSS) { | ||
| /** | ||
| * Windi CSS Webpack Plugin available options | ||
| * https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts | ||
| */ | ||
| chain.merge({ | ||
| plugin: { | ||
| 'windicss-webpack-plugin': { | ||
| plugin: WindiCSSWebpackPlugin__default["default"], | ||
| args: [ | ||
| { | ||
| config: finalOptions.windiCSSConfigFile, | ||
| preflight: false, | ||
| scan: { | ||
| dirs: ["./".concat(srcPath)], | ||
| fileExtensions: ['vue', 'jsx', 'tsx', 'wxml', 'axml', 'jxml', 'ksml', 'ttml', 'qml'] | ||
| }, | ||
| onGenerated: function (ctx) { | ||
| if (finalOptions.enableDebugLog) { | ||
| console.log('Windi CSS:', 'Detected classes', ctx.classes); | ||
| } | ||
| } | ||
| }, | ||
| ] | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| chain.merge({ | ||
| plugin: { | ||
| 'dc-mini-program-tailwind-webpack-plugin': { | ||
| plugin: MiniProgramTailwindWebpackPlugin, | ||
| args: [finalOptions] | ||
| }, | ||
| 'dc-taro-v-node-tailwind-webpack-plugin': { | ||
| plugin: TaroVNodeTailwindWebpackPlugin, | ||
| args: [finalOptions] | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
| }); | ||
| var MiniProgramTailwindWebpackPlugin = /** @class */ (function () { | ||
@@ -434,3 +125,2 @@ function MiniProgramTailwindWebpackPlugin(options) { | ||
| exports["default"] = MiniProgramTailwindWebpackPlugin; | ||
| exports.taro = index; | ||
| module.exports = MiniProgramTailwindWebpackPlugin; |
| { | ||
| "name": "@dcasia/mini-program-tailwind-webpack-plugin", | ||
| "version": "1.3.0-beta.9", | ||
| "version": "1.3.0-beta.10", | ||
| "description": "", | ||
| "main": "dist/index.js", | ||
| "types": "./dist/index.d.ts", | ||
| "files": [ | ||
@@ -39,2 +40,3 @@ "dist" | ||
| "rollup": "^2.68.0", | ||
| "rollup-plugin-dts": "^4.2.1", | ||
| "webpack": "^5.69.1" | ||
@@ -46,5 +48,5 @@ }, | ||
| "postcss": "^8.4.7", | ||
| "windicss-webpack-plugin": "^1.7.2", | ||
| "webpack-sources": "^1.4.3" | ||
| "webpack-sources": "^1.4.3", | ||
| "windicss-webpack-plugin": "^1.7.2" | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by240%
17
Worsened metrics
- Total package byte prevSize
- decreased by-15.71%
50176
- Dev dependency count
- increased by7.14%
15
- Lines of code
- decreased by-17.01%
956
No dependency changes