How to add css files based on breakpoint in library? We have the following mytheme.breakpoints.yml file and a simple library mylibrary that is added through our mytheme. Within the mylibrary there are two libraries, one that is optimized for desktop small and another for mobile breakpoints. 

How would I add the mobile css file only for when the browser's breakpoint is less than 756px, but load desktop small breakpoint when browser's breakpoint is greater than 756px?

mytheme.breakpoints.yml

mytheme.mobile
  label: mobile
  mediaQuery: 'all and (max-width: 756px)'
  weight: 1
  multipliers:
    - 1x
mytheme.desktopSmall
  label: desktop small
  mediaQuery: 'all and (min-width: 756px)'
  weight: 1
  multipliers:
    - 1x


mytheme.libraries.yml

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { /* load only for min width &gt; 756px*/ }
      css/some/path/mobile.min.css: { /* load only for max width &lt; 756px*/ }


Adding Use Theme Breakpoints as Media Queries for Theme CSS Libraries for reference.
Here is the solution I found. 

mytheme.libraries.yml

mylibrary:
  version: 1.0
  css:
    theme:
      css/some/path/desktop-small.min.css: { media: all and (min-width: 756px) }
      css/some/path/mobile.min.css: { media: all and (max-width: 755px) }