custom-css-field-in-section.liquid

<style>
/* Method 1: This way doesn't allow them to add a media query. Icon, Flex, and Design Packs use this method. 

  /* Desktop */

  {%- if section.settings.custom_css != blank -%}
    {%- assign custom_section_declarations = section.settings.custom_css | split: '}' -%}
    {%- for declaration in custom_section_declarations -%}
      {%- if declaration contains '{' -%}
        #EDC--{{ section.id }} {{ declaration }} }
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}

  /* Mobile */

  @media(max-width: 480px) {

    {%- if section.settings.mobile_custom_css != blank -%}
      {%- assign mobile_custom_declarations = section.settings.mobile_custom_css | split: '}' -%}
      {%- for declaration in mobile_custom_declarations -%}
        {%- if declaration contains '{' -%}
          #EDC--{{ section.id }} {{ declaration }} }
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
  }

</style>

{% comment %} My method: Offer explanation in settings, allow unsanitized css {% endcomment %}

<div id="RP--{{ block.id }}" class="RP--{{ block.id }} rp__block {{ block.settings.css_classes }}">
</div>

<style>
{{ block.settings.custom_css }}
</style>

{% schema %}
{
  "type": "text",
  "id": "css_classes",
  "label": "CSS Classes (no dots, separate with spaces)",
  "info": "Give this block a unique class (or multiple)."
},
{
  "type": "liquid",
  "id": "custom_css",
  "label": "Custom CSS",
  "info": "Target your class here. Warning: If your above class isn't unique, this CSS will affect other blocks."
}
{% endschema %}