@mpxjs/webpack-plugin 2.10.16-beta.9 → 2.10.16-xp.1

package/lib/style-compiler/strip-conditional-loader.js

@@ -1,10 +1,5 @@
-const fs = require('fs/promises')
-const parseRequest = require('../utils/parse-request')
-const atImport = require('postcss-import')
-const { default: postcss } = require('postcss')
-
 class Node {
-  constructor(type, condition = null) {
+  constructor (type, condition = null) {
     this.type = type // 'If', 'ElseIf', 'Else' 或 'Text'
     this.condition = condition // If 或 Elif 的条件
     this.children = []
@@ -13,7 +8,7 @@ class Node {
 }
 
 // 提取 css string 为 token
-function tokenize(cssString) {
+function tokenize (cssString) {
   const regex = /\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*\*\//g
   const tokens = []
   let lastIndex = 0
@@ -42,12 +37,12 @@ function tokenize(cssString) {
 }
 
 // parse：将生成的 token 数组构造成嵌套的 AST
-function parse(cssString) {
+function parse (cssString) {
   const tokens = tokenize(cssString)
   const ast = []
   const nodeStack = []
   let currentChildren = ast
-  tokens.forEach((token) => {
+  tokens.forEach(token => {
     if (token.type === 'text') {
       const node = new Node('Text')
       node.value = token.content
@@ -59,7 +54,7 @@ function parse(cssString) {
       currentChildren = node.children
     } else if (token.type === 'elif') {
       if (nodeStack.length === 0) {
-        throw new Error('[Mpx style error]: elif without a preceding if')
+        throw new Error('elif without a preceding if')
       }
       currentChildren = nodeStack[nodeStack.length - 1]
       const node = new Node('ElseIf', token.condition)
@@ -67,7 +62,7 @@ function parse(cssString) {
       currentChildren = node.children
     } else if (token.type === 'else') {
       if (nodeStack.length === 0) {
-        throw new Error('[Mpx style error]: else without a preceding if')
+        throw new Error('else without a preceding if')
       }
       currentChildren = nodeStack[nodeStack.length - 1]
       const node = new Node('Else')
@@ -82,23 +77,23 @@ function parse(cssString) {
   return ast
 }
 
-function evaluateCondition(condition, defs) {
+function evaluateCondition (condition, defs) {
   try {
     const keys = Object.keys(defs)
-    const values = keys.map((key) => defs[key])
+    const values = keys.map(key => defs[key])
     /* eslint-disable no-new-func */
     const func = new Function(...keys, `return (${condition});`)
     return func(...values)
   } catch (e) {
-    console.error(`[Mpx style error]:Error evaluating condition: ${condition}`, e)
+    console.error(`Error evaluating condition: ${condition}`, e)
     return false
   }
 }
 
-function traverseAndEvaluate(ast, defs) {
+function traverseAndEvaluate (ast, defs) {
   let output = ''
   let batchedIf = false
-  function traverse(nodes) {
+  function traverse (nodes) {
     for (const node of nodes) {
       if (node.type === 'Text') {
         output += node.value
@@ -123,168 +118,10 @@ function traverseAndEvaluate(ast, defs) {
   return output
 }
 
-/**
- *
- * @param {string} content
- * @param {Record<string, any>} defs
- * @returns
- */
-function stripCondition(content, defs) {
-  const ast = parse(content)
-  const result = traverseAndEvaluate(ast, defs)
-  return result
-}
-
-/**
- * @typedef {Object} StripByPostcssOption
- * @property {string} lang 样式语法格式
- * @property {string} resourcePath 文件路径
- * @property {string} css 源文件
- * @property {Record<string, any>} defs 条件定义
- * @property {import('webpack').LoaderContext<any>['resolve']} resolve webpack resolve 方法
- */
-
-/**
- * @typedef {Object} AtImportConfig
- * @property {string} from 当前文件路径
- * @property {(filename: string) => Promise<string> | string;} load 加载文件内容的函数
- * @property {(id: string, base: string) => Promise<string | null> | string | null;} resolve 解析文件路径的函数
- */
-
-/**
- *
- * @param {Function} callback
- * @param {string} name
- * @returns
- */
-const shouldInstallWarning = (callback, name) => {
-  return () => {
-    try {
-      return callback()
-    } catch (error) {
-      throw new Error(
-        `[mpx-strip-conditional-loader]: ${name} is not installed, please install it first.\norginal Error: ${
-          error?.message ?? error.toString()
-        }`,
-        {
-          cause: error
-        }
-      )
-    }
-  }
-}
-/**
- *
- * @typedef {import('postcss').ProcessOptions} ProcessOptions
- * @typedef {import('postcss').Root} Root
- *
- * @type {Record<string, ProcessOptions['syntax']>}
- */
-const styleSyntaxProcesserMap = {
-  stylus: shouldInstallWarning(() => require('postcss-styl'), 'postcss-styl'),
-  less: shouldInstallWarning(() => require('postcss-less'), 'postcss-less'),
-  scss: shouldInstallWarning(() => require('postcss-scss'), 'postcss-scss')
-}
-
-/**
- * @param {StripByPostcssOption} options
- */
-async function stripByPostcss(options) {
-  const syntax = styleSyntaxProcesserMap[options.lang]?.()
-  const defs = options.defs ?? {}
-
-  function stripContentCondition(content) {
-    content = stripCondition(content, defs)
-
-    if (options.lang === 'stylus') {
-      content = content.replace(/\t/g, '  ')
-    }
-
-    return content
-  }
-
-  const afterConditionStrip = stripContentCondition(options.css, defs)
-
-    /**
-   * @type {import('postcss').AcceptedPlugin[]}
-   */
-  const plugins = [
-    atImport({
-      async load(filename) {
-        let content = await fs.readFile(filename, 'utf-8')
-        const processer = postcss(plugins)
-
-        content = stripContentCondition(content, defs)
-
-        const { css } = await processer.process(content, {
-          syntax,
-          from: filename,
-          to: options.resourcePath
-        })
-        return css
-      },
-      resolve: (id, base) => {
-        return new Promise((resolve, reject) => {
-          options.resolve(base, id, (err, res) => {
-            if (err) return reject(err)
-            if (typeof res !== 'string') {
-              return reject(
-                new Error(
-                  `[mpx-strip-conditional-loader]: Cannot resolve ${id} from ${base}`
-                )
-              )
-            }
-            resolve(res)
-          })
-        })
-      }
-    }),
-    {
-      // less/scss syntax 在 postcss 重新生成 css 后，`//` 注释后面不会保留换行，会和后续的 css 语句和注释连在一起，导致后续语法错误
-      postcssPlugin: 'mpx-strip-conditional-loader-append-command',
-      CommentExit(comment) {
-        if (!comment.raws.right) {
-          comment.raws.right = '\n'
-          return
-        }
-
-        if (!comment.raws.right.startsWith('\n')) {
-          comment.raws.right = '\n' + comment.raws.right
-        }
-      }
-    }
-  ]
-
-  const processer = postcss(plugins)
-  return processer.process(afterConditionStrip, {
-    from: options.resourcePath,
-    syntax
-  })
-}
-
-/**
- *
- * @this {import('webpack').LoaderContext<any>}
- * @param {string} css
- */
-module.exports = async function (css) {
+module.exports = function (css) {
   this.cacheable()
-
-  const callback = this.async()
-
   const mpx = this.getMpx()
-  const { resourcePath, queryObj } = parseRequest(this.resource)
-
-  const result = await stripByPostcss({
-    lang: queryObj.lang,
-    resourcePath,
-    css,
-    defs: mpx.defs,
-    resolve: this.resolve.bind(this)
-  })
-
-  callback(null, result.css, result.map)
+  const defs = mpx.defs
+  const ast = parse(css)
+  return traverseAndEvaluate(ast, defs)
 }
-
-module.exports.stripByPostcss = stripByPostcss
-module.exports.stripCondition = stripCondition

package/lib/template-compiler/bind-this.js

@@ -258,7 +258,7 @@ module.exports = {
     })
     return {
       code: pCollectKeys.map((key) => {
-        return isSimpleKey(key) ? `mpx_sc(${JSON.stringify(key)});` : `mpx_c(${JSON.stringify(key)});`
+        return isSimpleKey(key) ? `_sc(${JSON.stringify(key)});` : `_c(${JSON.stringify(key)});`
       }).join('\n'),
       propKeys: [...propKeySet]
     }
@@ -436,7 +436,7 @@ module.exports = {
         exit (path) {
           if (path.collectInfo) {
             const { isSimple, key } = path.collectInfo
-            const callee = isSimple ? t.identifier('mpx_sc') : t.identifier('mpx_c')
+            const callee = isSimple ? t.identifier('_sc') : t.identifier('_c')
             const replaceNode = renderReduce
               ? t.callExpression(callee, [key])
               : t.callExpression(callee, [key, path.node])