Enable varying text for Phone, Tablet and Desktop

Would love to know a recommended way to insert the CSS into the page, but I’m adding a <script> block with a couple of levels of javascript string interpolation directly into the JSX in both edit and save:

<style>{
`.wp-block-create-block-population-count {
    font-size: ${DesktopFontSize}em;
}
@media (max-width: 767px) {
        .wp-block-create-block-population-count {
            font-size: ${MobileFontSize}em;
        }
    }
    @media (min-width: 768px) and (max-width: 1050px) {
        .wp-block-create-block-population-count {
            font-size: ${TabletFontSize}em;
        }
    }`
}
</style>

As for saving the three different type sizes, add them to the attributes, which are in block.json (could also be in index.js):

    "attributes": {
        "alignment": {
            "type": "string"
        },
        "preamble": {
            "type": "string",
            "source": "html",
            "selector": ".preamble"
        },
        "closing": {
            "type": "string",
            "source": "html",
            "selector": ".closing"
        },
        "DesktopFontSize": {
            "type": "number"
        },
        "TabletFontSize": {
            "type": "number"
        },
        "MobileFontSize": {
            "type": "number"
        }
    }

Add them to our props deconstruction:

const {
        attributes: {etc, previewmode = "Desktop", DesktopFontSize, MobileFontSize, TabletFontSize},
        className, focus,
        setAttributes,
    } = props;

And update the setAttributes calls (x3):

<RangeControl
    label=" "
    min={0.5}
    max={8}
    step={0.1}
    value={props.attributes[previewmode + "FontSize"] || 3}
    onChange={ value => setAttributes( {[previewmode + "FontSize"]: value}) }
/>
</BaseControl>

Not sure quiet what’s happening in

dispatch("core/edit-post").__experimentalSetPreviewDeviceType

Hoping to accept a more informed solution. Perhaps eventually this feature will be added as a WP core component.