@aiot-toolkit/parser 2.0.5-widget-provider-beta.2 → 2.0.6-alpha.0

package/lib/ux/utils/StyleUtil.js

@@ -14,82 +14,82 @@ var _StyleSelectorType = require("../enum/StyleSelectorType");
 var _StyleAttributeConfig = require("../config/vela/StyleAttributeConfig");
 var _tinycolor = _interopRequireDefault(require("tinycolor2"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * StyleUtil
+/**
+ * StyleUtil
  */
 class StyleUtil {
-  /**
-   * 判断节点是否为declaration节点
-   * @param node
-   * @returns
+  /**
+   * 判断节点是否为declaration节点
+   * @param node
+   * @returns
    */
   static isDeclaration(node) {
     return node.type === 'Declaration';
   }
 
-  /**
-   * 判断节点是否为Identifier类型
-   * @param node
-   * @returns
+  /**
+   * 判断节点是否为Identifier类型
+   * @param node
+   * @returns
    */
   static isIdentifier(node) {
     return node.type === 'Identifier';
   }
 
-  /**
-   * 判断节点是否为SelectorList类型
-   * @param node
-   * @returns
+  /**
+   * 判断节点是否为SelectorList类型
+   * @param node
+   * @returns
    */
   static isSelectorList(node) {
     return node.type === 'SelectorList';
   }
 
-  /**
-   * 判断节点是否为AtrulePrelude类型
-   * @param node
-   * @returns
+  /**
+   * 判断节点是否为AtrulePrelude类型
+   * @param node
+   * @returns
    */
   static isAtrulePrelude(node) {
     return node.type === 'AtrulePrelude';
   }
 
-  /**
-   * 判断节点是否为MediaFeature类型
-   * @param node
-   * @returns
+  /**
+   * 判断节点是否为MediaFeature类型
+   * @param node
+   * @returns
    */
   static isMediaFeature(node) {
     return node.type === 'MediaFeature';
   }
-  /**
-   * 判断节点是否为MediaQuery类型
-   * @param node
-   * @returns
+  /**
+   * 判断节点是否为MediaQuery类型
+   * @param node
+   * @returns
    */
   static isMediaQuery(node) {
     return node.type === 'MediaQuery';
   }
 
-  /**
-   * 判断节点是否为MediaQueryList类型
-   * @param node
-   * @returns
+  /**
+   * 判断节点是否为MediaQueryList类型
+   * @param node
+   * @returns
    */
   static isMediaQueryList(node) {
     return node.type === 'MediaQueryList';
   }
 
-  /**
-   * 生成节点的name
-   * 1. 节点存在name且存在value时，nodeName = generate(node)生成css代码
-   * 2. 节点存在name且没有value时，nodeName = node.name
-   * 3. 节点存在value且没有name时，nodeName = node.value
-   *
-   * 例如：#title为存在name且没有value的情况，应返回node.name返回;
-   * 例如：50% {}时，节点存在value没有name,应返回node.value
-   * @param node
-   * @returns
+  /**
+   * 生成节点的name
+   * 1. 节点存在name且存在value时，nodeName = generate(node)生成css代码
+   * 2. 节点存在name且没有value时，nodeName = node.name
+   * 3. 节点存在value且没有name时，nodeName = node.value
+   *
+   * 例如：#title为存在name且没有value的情况，应返回node.name返回;
+   * 例如：50% {}时，节点存在value没有name,应返回node.value
+   * @param node
+   * @returns
    */
   static generateNodename(node) {
     let nodeName = '';
@@ -106,13 +106,13 @@ class StyleUtil {
     }
     return nodeName;
   }
-  /**
-   * 处理 @media 媒体查询条件
-   * 1. 循环MediaQueryList节点的子节点（MediaQuery节点）
-   * 2. 检查每个MediaQuery节点的媒体类型
-   *
-   * @param node
-   * @returns
+  /**
+   * 处理 @media 媒体查询条件
+   * 1. 循环MediaQueryList节点的子节点（MediaQuery节点）
+   * 2. 检查每个MediaQuery节点的媒体类型
+   *
+   * @param node
+   * @returns
    */
   static parseMediaQueryList(options, node, styleMapUtil) {
     let resultList = [];
@@ -163,15 +163,15 @@ class StyleUtil {
     return resultList;
   }
 
-  /**
-   * 处理css中资源引入
-   * 1. 判断是否为绝对路径
-   *  1.1 资源路径为绝对路径时
-   *  1.2 资源路径为非绝对路径时，拼接路径为一个绝对路径
-   * 2. 判断由第一步生成的绝对路径是否在指定路径外
-   *  2.1 资源在指定路径外，复制资源到指定文件夹下，返回修改后的路径
-   *  2.2 资源在指定路径内，返回相对路径
-   *
+  /**
+   * 处理css中资源引入
+   * 1. 判断是否为绝对路径
+   *  1.1 资源路径为绝对路径时
+   *  1.2 资源路径为非绝对路径时，拼接路径为一个绝对路径
+   * 2. 判断由第一步生成的绝对路径是否在指定路径外
+   *  2.1 资源在指定路径外，复制资源到指定文件夹下，返回修改后的路径
+   *  2.2 资源在指定路径内，返回相对路径
+   *
    */
   static handleDynamicAssets(options, compilerOption, assetsPath, collectImageResource, position) {
     // 判断url值是否为网址等
@@ -235,14 +235,14 @@ class StyleUtil {
     }
   }
 
-  /**
-   * 转换相对路径为 “相对项目源码目录的绝对路径”
-   *
-   * 例如：有文件`project/src/page/a.so`，则将 `./a.so` 转换为 `/page/a.so`
-   * @param reslovePath 路径值， 例如  `require('./a.so'), 则此值为 `./a.so`
-   * @param options
-   * @param compilerOption
-   * @returns
+  /**
+   * 转换相对路径为 “相对项目源码目录的绝对路径”
+   *
+   * 例如：有文件`project/src/page/a.so`，则将 `./a.so` 转换为 `/page/a.so`
+   * @param reslovePath 路径值， 例如  `require('./a.so'), 则此值为 `./a.so`
+   * @param options
+   * @param compilerOption
+   * @returns
    */
   static getRelativePath(reslovePath, options, compilerOption) {
     const {
@@ -273,11 +273,11 @@ class StyleUtil {
     return true;
   }
 
-  /**
-   * 收集解析错误
-   * @param error
-   * @param fallbackNode
-   * @returns
+  /**
+   * 收集解析错误
+   * @param error
+   * @param fallbackNode
+   * @returns
    */
   static collectParserError(error, fallbackNode) {
     // 检查错误解析是否为需要输出
@@ -293,11 +293,11 @@ class StyleUtil {
       parserError = {
         message: name,
         details: message,
-        startLine: loc?.start?.startLine || 0,
-        startCol: loc?.start?.startCol || 0,
+        startLine: loc?.start?.line || loc?.start?.startLine || 0,
+        startCol: loc?.start?.column || loc?.start?.startCol || 0,
         startOffset: loc?.start?.offset || 0,
-        endLine: loc?.start?.startLine || 0,
-        endCol: loc?.start?.startCol || 0,
+        endLine: loc?.end?.line || loc?.start?.startLine || 0,
+        endCol: loc?.end?.column || loc?.start?.startCol || 0,
         endOffset: loc?.end?.offset || 0,
         source: 'value' in fallbackNode ? fallbackNode.value : ''
       };
@@ -307,15 +307,13 @@ class StyleUtil {
     }
   }
 
-  /**
-   * 收集CSS语法错误
-   * @param errors
-   * @param trace 是否需要追溯到上一次sourcemap, default: false
-   * @returns
+  /**
+   * 收集CSS语法错误
+   * @param errors
+   * @param trace 是否需要追溯到上一次sourcemap, default: false
+   * @returns
    */
-  static collectSyntaxError(errors, instance) {
-    let trace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    let startLineOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  static collectSyntaxError(errors) {
     let syntaxErrors = [];
     for (let i = 0; i < errors.length; i++) {
       const error = errors[i];
@@ -329,99 +327,45 @@ class StyleUtil {
         continue;
       }
       if (loc) {
-        if (!trace) {
-          syntaxErrors.push({
-            message,
-            details,
-            startLine: loc?.start?.line || 0,
-            startCol: (loc?.start?.column || 1) - 1,
-            startOffset: loc?.start?.offset || 0,
-            endLine: loc?.start?.line || 0,
-            endCol: (loc?.start?.column || 1) - 1,
-            endOffset: loc?.end?.offset || 0,
-            source: css
-          });
-        } else {
-          const transformedLoc = instance.transfromLocToPosition({
-            start: {
-              line: loc.start.line,
-              column: loc.start.column,
-              offset: 0
-            },
-            end: {
-              line: loc.start.line,
-              column: loc.start.column,
-              offset: 0
-            },
-            source: css
-          });
-          syntaxErrors.push({
-            message,
-            details,
-            startLine: transformedLoc?.startLine - startLineOffset + 1,
-            startCol: transformedLoc?.startColumn,
-            startOffset: transformedLoc?.pos,
-            endLine: transformedLoc?.endLine - startLineOffset + 1,
-            endCol: transformedLoc?.endColumn,
-            endOffset: transformedLoc?.end,
-            source: css
-          });
-        }
+        syntaxErrors.push({
+          message,
+          details,
+          startLine: loc?.start?.line || 0,
+          startCol: loc?.start?.column || 1,
+          startOffset: loc?.start?.offset || 0,
+          endLine: loc?.start?.line || 0,
+          endCol: loc?.start?.column || 1,
+          endOffset: loc?.end?.offset || 0,
+          source: css
+        });
       } else {
         const propertyLength = error?.property?.length || 0;
-        if (!trace) {
-          syntaxErrors.push({
-            message,
-            details,
-            startLine: error.line || 0,
-            startCol: error.column || 0,
-            startOffset: error.offset || 0,
-            endLine: error.line || 0,
-            endCol: (error.column || 0) + propertyLength - 1,
-            endOffset: (error.offset || 0) + propertyLength - 1,
-            source: css
-          });
-        } else {
-          const transformedLoc = instance.transfromLocToPosition({
-            start: {
-              line: error.line,
-              column: error.column,
-              offset: 0
-            },
-            end: {
-              line: error.line,
-              column: error.column,
-              offset: 0
-            },
-            source: css
-          });
-          syntaxErrors.push({
-            message,
-            details,
-            startLine: transformedLoc?.startLine,
-            startCol: transformedLoc?.startColumn,
-            startOffset: transformedLoc?.pos,
-            endLine: transformedLoc?.endLine,
-            endCol: transformedLoc?.endColumn,
-            endOffset: transformedLoc?.end,
-            source: css
-          });
-        }
+        syntaxErrors.push({
+          message,
+          details,
+          startLine: error.line || 0,
+          startCol: error.column || 0,
+          startOffset: error.offset || 0,
+          endLine: error.line || 0,
+          endCol: (error.column || 0) + propertyLength,
+          endOffset: (error.offset || 0) + propertyLength,
+          source: css
+        });
         continue;
       }
     }
     return syntaxErrors;
   }
 
-  /**
-   * 相同选择器时融合样式
-   * 1. 遍历待融合列表，如果元素长度为3，判断选择器列表是否在存储列表中存在
-   * 2. 存在相同选择器列表时，再判断condition是否一致，都一致表示为相同选择器
-   * 3. 如果元素长度为2,判断选择器列表是否在存储列表中存在，是则表示为相同选择器
-   * 4. 如果元素长度为1,则提示样式内容为空，去掉该选择器
-   * @param compareList 存储融合结果的样式列表
-   * @param candidateList 待融合的样式列表
-   * @returns
+  /**
+   * 相同选择器时融合样式
+   * 1. 遍历待融合列表，如果元素长度为3，判断选择器列表是否在存储列表中存在
+   * 2. 存在相同选择器列表时，再判断condition是否一致，都一致表示为相同选择器
+   * 3. 如果元素长度为2,判断选择器列表是否在存储列表中存在，是则表示为相同选择器
+   * 4. 如果元素长度为1,则提示样式内容为空，去掉该选择器
+   * @param compareList 存储融合结果的样式列表
+   * @param candidateList 待融合的样式列表
+   * @returns
    */
   static mergeSelectorList(compareList, candidateList) {
     let resultList = [...compareList];
@@ -481,19 +425,19 @@ class StyleUtil {
     return resultList;
   }
 
-  /**
-   * 判断StyleItem类型的节点是否有"condition"属性
-   * @param conditionNode
-   * @returns
+  /**
+   * 判断StyleItem类型的节点是否有"condition"属性
+   * @param conditionNode
+   * @returns
    */
   static isConditionStyleItem(conditionNode) {
     return 'condition' in conditionNode && typeof conditionNode['condition'] === 'string';
   }
 
-  /**
-   * 转换百分号
-   * @param unit
-   * @returns
+  /**
+   * 转换百分号
+   * @param unit
+   * @returns
    */
   static translatePercentage(unit) {
     return unit === 'Percentage' ? '%' : unit;
@@ -502,25 +446,25 @@ class StyleUtil {
     return obj && 'name' in obj && 'param' in obj;
   }
 
-  /**
-   * 压缩css属性名
-   * 1. 取出转换结果中的每一组样式（ 选择器 + 样式对象）styleNode
-   *  一般样式的格式为：
-   *  [
-   *    [[]],
-   *    {}
-   *  ]
-   *  1.1 @meida的样式不需要压缩 (condition + 选择器 + 样式对象)
-   *  [
-   *    {},
-   *    [[]],
-   *    {}
-   *  ]
-   * 2. 从styleNode中取出样式对象 AttrObj
-   * 3. 遍历样式对象，找到属性对应的压缩值
-   * 4. 替换属性名和属性值
-   * @param sourceNodes
-   * @returns
+  /**
+   * 压缩css属性名
+   * 1. 取出转换结果中的每一组样式（ 选择器 + 样式对象）styleNode
+   *  一般样式的格式为：
+   *  [
+   *    [[]],
+   *    {}
+   *  ]
+   *  1.1 @meida的样式不需要压缩 (condition + 选择器 + 样式对象)
+   *  [
+   *    {},
+   *    [[]],
+   *    {}
+   *  ]
+   * 2. 从styleNode中取出样式对象 AttrObj
+   * 3. 遍历样式对象，找到属性对应的压缩值
+   * 4. 替换属性名和属性值
+   * @param sourceNodes
+   * @returns
    */
   static compressStyleAttributeName(sourceNodes) {
     const cloneNodes = _lodash.default.cloneDeep(sourceNodes);
@@ -545,16 +489,16 @@ class StyleUtil {
     return cloneNodes;
   }
 
-  /**
-   * 检查每一个MediaQuery的MediaType
-   * 1. 判断节点是否为MediaQuery类型，非MediaQuery暂不处理
-   * 2. 取出节点的所有子节点
-   * 3. MediaType应该只出现在前两个Identifier节点中
-   *  3.1 @media screen and...时，screen在第一个Identifier节点上
-   *  3.2 @media not|only screen and...时，screen在第二个Identifier节点上
-   *  3.3 @media not {}
-   * 4. 校验MediaType是否合法
-   *
+  /**
+   * 检查每一个MediaQuery的MediaType
+   * 1. 判断节点是否为MediaQuery类型，非MediaQuery暂不处理
+   * 2. 取出节点的所有子节点
+   * 3. MediaType应该只出现在前两个Identifier节点中
+   *  3.1 @media screen and...时，screen在第一个Identifier节点上
+   *  3.2 @media not|only screen and...时，screen在第二个Identifier节点上
+   *  3.3 @media not {}
+   * 4. 校验MediaType是否合法
+   *
    */
   static checkMediaType(options, node, styleMapUil) {
     const {
@@ -610,18 +554,18 @@ class StyleUtil {
     }
   }
 
-  /**
-   * 转换 keyframe 的规则项
-   *
-   * @param rule 规则项。 示例
-   * ```css
-   * from {
-   *  width: 100px;
-   *  color: red;
-   * }
-   * ```
-   * @param options
-   * @returns
+  /**
+   * 转换 keyframe 的规则项
+   *
+   * @param rule 规则项。 示例
+   * ```css
+   * from {
+   *  width: 100px;
+   *  color: red;
+   * }
+   * ```
+   * @param options
+   * @returns
    */
   static translateKeyFramesRule(rule, options) {
     const {
@@ -669,17 +613,17 @@ class StyleUtil {
     return result;
   }
 
-  /**
-   * 转换样式块
-   * @param sourceNodes 样式块. 示例
-   * ```css
-   * {
-   *    color: red;
-   *    font-size: 12px
-   * }
-   * ```
-   * @param options
-   * @returns
+  /**
+   * 转换样式块
+   * @param sourceNodes 样式块. 示例
+   * ```css
+   * {
+   *    color: red;
+   *    font-size: 12px
+   * }
+   * ```
+   * @param options
+   * @returns
    */
   static translateBlock(sourceNodes, options) {
     let targetList = {};
@@ -717,15 +661,15 @@ class StyleUtil {
     return targetList;
   }
 
-  /**
-   * 转换值节点
-   *
-   * 1. ComplexValueType类型
-   * 2. SimpleValueType类型
-   * 无论哪种类型，转换后还是数组
-   *
-   * @param sourceNode sourceNode为数组，且数组元素只会是一种类型
-   * @returns
+  /**
+   * 转换值节点
+   *
+   * 1. ComplexValueType类型
+   * 2. SimpleValueType类型
+   * 无论哪种类型，转换后还是数组
+   *
+   * @param sourceNode sourceNode为数组，且数组元素只会是一种类型
+   * @returns
    */
   static translateValueNode(sourceNode) {
     // 1.
@@ -748,12 +692,12 @@ class StyleUtil {
     }
   }
 
-  /**
-   * 1. 数字值且无单位，则转换为数字, 示例: opaticy: 1 的"1" -->1
-   * 2. 颜色值，进行格式化，示例: rgba(1,1,1,.88) --> rgba(1,1,1.0.88)
-   * 3. 其它，保持原值，但百分比单位转换为%
-   * @param node
-   * @returns
+  /**
+   * 1. 数字值且无单位，则转换为数字, 示例: opaticy: 1 的"1" -->1
+   * 2. 颜色值，进行格式化，示例: rgba(1,1,1,.88) --> rgba(1,1,1.0.88)
+   * 3. 其它，保持原值，但百分比单位转换为%
+   * @param node
+   * @returns
    */
   static translateNodeValue(node) {
     const {
@@ -799,13 +743,13 @@ class StyleUtil {
     }
   }
 
-  /**
-   * 属性值目前存储在数组中，该函数将数组中的值转换为字符串、数字
-   * animation-name属性值为 ['GO','Color','scaleX'] --> "GO, Color, scaleX"
-   * opacity属性值为 [1] --> 数字1
-   * transform属性值为对象`transform: scale(1) rotate(180deg)` --> `transform: '{"scaleX":1,"scaleY":1,"rotate":"180deg"}'`
-   * @param value
-   * @returns
+  /**
+   * 属性值目前存储在数组中，该函数将数组中的值转换为字符串、数字
+   * animation-name属性值为 ['GO','Color','scaleX'] --> "GO, Color, scaleX"
+   * opacity属性值为 [1] --> 数字1
+   * transform属性值为对象`transform: scale(1) rotate(180deg)` --> `transform: '{"scaleX":1,"scaleY":1,"rotate":"180deg"}'`
+   * @param value
+   * @returns
    */
   static translateToNormalValue(value) {
     if (typeof value === 'object') {