Custom CSS - media queries not working properly

[andeng1106]

Describe the bug

• When using Shortcut Media Queries for Custom CSS, it's not working properly especially on frontend
• Two issues:
  • 1. In frontend, Media queries added are not showing (whether shortcut media query or not)
  • 2. In editor, shortcut media query @media mobile is applying on both tablet and mobile instead of mobile only
       • Shortcut Media Queries such as:
         • @media tablet
         • @media mobile
         • etc..

Notes:

• Issue on both editor and frontend
• Issue happens on 3.13.1 and older versions

To Reproduce
Steps to reproduce the behavior:
Using Shortcut Media Queries

1. Add a new page
2. Add a Heading block
3. Add these codes on Custom CSS (replace the .stk-xxxx to the assigned id data-block-id):

/* Media Query will apply to Tablet */
@media tablet {
		  .stk-xxxx .stk-block-heading__text {
		font-size: 50px !important;
    background-color: darkmagenta !important;
  }
}

/* Media Query will apply to Mobile */
@media mobile {
	  .stk-xxxx .stk-block-heading__text {
		font-size: 10px !important;
    background-color: lightgoldenrodyellow !important;
  }
}

4. In editor, change responsive mode to Mobile
5. See that the @media mobile queries are applied correctly
6. Change responsive mode to Tablet
7. See if the @media mobile queries are applied instead of @media tablet
8. Save page and view frontend
9. Go to Inspect Element
10. Use Toggle device toolbar then switch responsive to tablet or mobile
11. See that the shortcut media queries is not applied

====

Using Media Queries

1. Add a new page
2. Add a Heading block
3. Add these codes on Custom CSS (replace the .stk-xxxx to the assigned id data-block-id):

/* Media Query will apply to Tablet */
@media screen (max-width: 1024px) {
		  .stk-xxxx .stk-block-heading__text {
		font-size: 50px !important;
    background-color: darkmagenta !important;
  }
}

/* Media Query will apply to Mobile */
@media screen (max-width: 768px) {
	  .stk-xxxx .stk-block-heading__text {
		font-size: 23px !important;
    background-color: lightgoldenrodyellow !important;
			color: blue;
  }
}

4. In editor, check if css is working on different responsive modes (based on the css breakpoint provided)
5. Save page and view frontend
6. See that the css media queries added are not showing

Expected behavior

• Media queries should work properly on both frontend and editor
• Shortcut media queries should only apply to its respective responsive mode

Screenshots
Using Shortcut Media Queries

using.shortcut.media.query.mp4

Using Media Queries

using.media.query.mp4