Add `CssRule.getDevice` method.

src/code_manager/model/CssGenerator.js

@@ -3,6 +3,11 @@ import { bindAll, isUndefined, each } from 'underscore';
 
 const maxValue = Number.MAX_VALUE;
 
+export const getMediaLength = mediaQuery => {
+  const length = /(-?\d*\.?\d+)\w{0,}/.exec(mediaQuery);
+  return !length ? '' : length[0];
+};
+
 export default Backbone.Model.extend({
   initialize() {
     bindAll(this, 'sortRules');

src/css_composer/model/CssRule.js

@@ -2,6 +2,7 @@ import { Model } from 'backbone';
 import Styleable from 'domain_abstract/model/Styleable';
 import { isEmpty, forEach, isString, isArray } from 'underscore';
 import Selectors from 'selector_manager/model/Selectors';
+import { getMediaLength } from 'code_manager/model/CssGenerator';
 import { isEmptyObj, hasWin } from 'utils/mixins';
 
 const { CSS } = hasWin() ? window : {};
@@ -17,6 +18,8 @@ const { CSS } = hasWin() ? window : {};
  * @property {String} [state=''] State of the rule, eg: `hover`, `focused`
  * @property {Boolean|Array<String>} [important=false] If true, sets `!important` on all properties. You can also pass an array to specify properties on which use important
  * @property {Boolean} [stylable=true] Indicates if the rule is stylable from the editor
+ *
+ * [Device]: device.html
  */
 export default class CssRule extends Model.extend(Styleable) {
   defaults() {
@@ -149,6 +152,27 @@ export default class CssRule extends Model.extend(Styleable) {
     return result;
   }
 
+  /**
+   * Get the Device the rule is related to.
+   * @returns {[Device]|null}
+   * @example
+   * const device = rule.getDevice();
+   * console.log(device?.getName());
+   */
+  getDevice() {
+    const { em } = this;
+    const { atRuleType, mediaText } = this.attributes;
+    const devices = em?.get('DeviceManager').getDevices() || [];
+    const deviceDefault = devices.filter(d => d.getWidthMedia() === '')[0];
+    if (atRuleType !== 'media' || !mediaText) {
+      return deviceDefault || null;
+    }
+    return (
+      devices.filter(d => d.getWidthMedia() === getMediaLength(mediaText))[0] ||
+      null
+    );
+  }
+
   /**
    * Return the CSS string of the rule
    * @param {Object} [opts={}] Options (same as in `getDeclaration`)

src/device_manager/model/Device.js

@@ -34,4 +34,12 @@ export default class Device extends Model {
     const noUnit = (parseFloat(pr) || 0).toString() === pr.toString();
     noUnit && this.set(prop, `${pr}px`);
   }
+
+  getName() {
+    return this.get('name') || this.get('id');
+  }
+
+  getWidthMedia() {
+    return this.get('widthMedia') || '';
+  }
 }