!76 3.0-LTS分支同步：lite新增media query能力支持

Merge pull request !76 from youzhi92/cherry-pick-1634200408

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

@@ -10,22 +10,24 @@ class LiteReturnExportsPlugin {
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const pluginName = 'LiteReturnExportsPlugin';
+ * limitations under the License.
+ */
+const pluginName = 'LiteReturnExportsPlugin';
 
 /**
  * LiteReturnExportsPlugin
- */
-class LiteReturnExportsPlugin {
+ */
+class LiteReturnExportsPlugin {
+  /**
+   * return exports from runtime
    * @param {Object} compiler API specification, all configuration information of Webpack environment.
    */
   apply(compiler) {
     compiler.hooks.compilation.tap('SourcemapFixer', (compilation) => {
-  apply(compiler) {
+      compilation.hooks.afterProcessAssets.tap('SourcemapFixer', (assets) => {
         Reflect.ownKeys(assets).forEach((key) => {
           if (key.toString().includes('.map') && assets[key] && assets[key]._value) {
-        Reflect.ownKeys(assets).forEach(key => {
+            const sourceMapSources = JSON.parse(assets[key]._value).sources;
             sourceMapSources.forEach((sourceMapSource, index) => {
               sourceMapSource = sourceMapSource.replace(/\\/g, '/')
                   .replace(/webpack:\/\/\/[A-Z]:/g, function(a) {

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

@@ -16,6 +16,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;
+  }
+}