issueNo: I4CY9Y

Description: add media query capability for lite ace
Feature or Bugfix:Feature
Binary Source:No

Signed-off-by: youzhi92 <chenyouzhi@huawei.com>
Change-Id: If9edd6f6ae21ca7504c4c1cd2f98a3563e8957bb

ace-loader/src/lite/lite-return-exports-plugin.js

@@ -9,22 +9,24 @@ class LiteReturnExportsPlugin {
    * @param {Object} compiler API specification, all configuration information of Webpack environment.
    */
   apply(compiler) {
-    compiler.hooks.compilation.tap('SourcemapFixer', compilation => {
-      compilation.hooks.afterProcessAssets.tap('SourcemapFixer', assets => {
-        Reflect.ownKeys(assets).forEach(key => {
+    compiler.hooks.compilation.tap('SourcemapFixer', (compilation) => {
+      compilation.hooks.afterProcessAssets.tap('SourcemapFixer', (assets) => {
+        Reflect.ownKeys(assets).forEach((key) => {
           if (key.toString().includes('.map') && assets[key] && assets[key]._value) {
             const sourceMapSources = JSON.parse(assets[key]._value).sources;
             sourceMapSources.forEach((sourceMapSource, index) => {
-              sourceMapSource = sourceMapSource.replace(/\\/g,"/")
-                .replace(/webpack:\/\/\/[A-Z]:/g, function(a){return a.toLowerCase();});
+              sourceMapSource = sourceMapSource.replace(/\\/g, '/')
+                  .replace(/webpack:\/\/\/[A-Z]:/g, function(a) {
+                    return a.toLowerCase();
+                  });
               sourceMapSources[index] = sourceMapSource;
             });
             const REG_SOURCES = new RegExp(/"sources":\[.*?\]/);
             assets[key]._value = assets[key]._value.toString().replace(REG_SOURCES,
-              '"sources":' + JSON.stringify(sourceMapSources));
+                '"sources":' + JSON.stringify(sourceMapSources));
           }
         });
-      }
+      },
       );
     });
 

ace-loader/src/lite/lite-transform-style.js

@@ -21,7 +21,13 @@
  * 3. Convert all hex color to decimal number;
  * 4. Convert all boolean strings to boolean type;
  */
-const { SPECIAL_STYLE, REGEXP_NUMBER_PX, REGEXP_COLOR, REGEXP_UNIT, REGXP_QUOTES } = require('./lite-enum');
+const {
+  SPECIAL_STYLE,
+  REGEXP_NUMBER_PX,
+  REGEXP_COLOR,
+  REGEXP_UNIT,
+  REGXP_QUOTES,
+} = require('./lite-enum');
 
 /**
  * Split style into id Selectors and classSelectors.
@@ -35,6 +41,7 @@ function transformStyle(value) {
   const styleSheet = {};
   let res = '';
   const KEYFRAMES = '@KEYFRAMES';
+  const MEDIA_QUERY = '@MEDIA';
   const keys = Object.keys(style);
   for (const key of keys) {
     if (key.charAt(0) === '.') {
@@ -43,6 +50,8 @@ function transformStyle(value) {
       idSelectors[key.slice(1)] = styleFormat(style[key]);
     } else if (key === KEYFRAMES) {
       styleSheet['@keyframes'] = keyFrameFormat(style[key]);
+    } else if (key === MEDIA_QUERY) {
+      styleSheet['@media'] = mediaQueryFormat(style[key]);
     } else {
       // todo: Label style
     }
@@ -83,10 +92,31 @@ function keyFrameFormat(obj) {
   return obj;
 }
 
+/**
+ * media query special compilation.
+ * @param {Array} mediaQueries the array of media query
+ * @return {Array} media query style object
+ */
+function mediaQueryFormat(mediaQueries) {
+  const target = [];
+  for (const mediaQuery of mediaQueries) {
+    const { condition, ...selectors } = mediaQuery;
+    const style = transformStyle(JSON.stringify(selectors));
+    if (style) {
+      style = JSON.parse(style);
+      target.push({ condition, ...style });
+    }
+  }
+  return target;
+}
+
 const rules = [
   {
     match: function(key, value) {
-      return key === SPECIAL_STYLE.ANIMATION_DELAY || key === SPECIAL_STYLE.ANIMATION_DURATION;
+      return (
+        key === SPECIAL_STYLE.ANIMATION_DELAY ||
+        key === SPECIAL_STYLE.ANIMATION_DURATION
+      );
     },
     action: function(obj, key, value) {
       obj[key] = value;

ace-loader/test/lite/expected/exteriorStyle.js

@@ -1,6 +1,13 @@
 {
   "render": "function (vm) { var _vm = vm || this; return _c('div') }",
   "styleSheet":  {
+    "@media": [{
+      "condition": "screen and (max-width: 454px)",
+      "classSelectors": { "title": { "fontSize": 30, "color": 16711680 } }
+    }, {
+      "condition": "screen and (min-width: 455px)",
+      "classSelectors": { "title": { "fontSize": 72, "color": 65280 } }
+    }],
     "@keyframes":  {
       "animationChange":  [
          {

ace-loader/test/lite/testcase/pages/exteriorStyle/exteriorStyle.css

@@ -82,3 +82,19 @@
   height: 30%;
   width: 100%;
 }
+
+/* exteriorStyle_Compiler_Test_013 */
+@media screen and (max-width: 454px) {
+  .title {
+    font-size: 30px;
+    color: #f00;
+  }
+}
+
+/* exteriorStyle_Compiler_Test_014 */
+@media screen and (min-width: 455px) {
+  .title {
+    font-size: 72px;
+    color: #0f0;
+  }
+}