wingsuit-designsystem / wingsuit

Twig for Storybook
GNU General Public License v2.0
90 stars 16 forks source link

trim getPatternConfiguration() #220

Open iuscare opened 1 year ago

iuscare commented 1 year ago

Is your feature request related to a problem? Please describe. When writing tailwind classes, we often end up writing multiple classes per breakpoints. To keep things readable I tend to separate breakpoints specific rules by lines within the yml of an pattern.

E.g.:

  variants:
    default:
      label: Default
      configuration:
        font_families: |
          prose-h1:font-serif prose-h2:font-serif prose-h3:font-serif prose-h4:font-sans prose-p:font-sans
          lg:prose-h3:font-serif lg:prose-h4:font-serif
        font_sizes: |
          prose-h1:text-2xl prose-h2:text-2xl prose-h3:text-xl prose-h4:text-lg
          lg:prose-h1:text-4xl lg:prose-h2:text-3xl lg:prose-h3:text-2xl lg:prose-h4:text-xl
          prose-p:text-base prose-p:text-lg
    article:
      label: Article
      configuration:
        font_families: |
          prose-h1:font-serif prose-h2:font-serif prose-h3:font-sans prose-h4:font-sans prose-p:font-sans
          lg:prose-h4:font-serif
        font_sizes: |
          prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-h4:text-base
          lg:prose-h1:text-3xl lg:prose-h2:text-2xl lg:prose-h3:text-xl lg:prose-h4:text-lg
          prose-p:text-base lg:prose-p:text-lg

Doing so leads to undesired line breaks within the html markup when we render this specific component:

CleanShot 2022-11-30 at 16 10 10@2x

Describe the solution you'd like It would be nice to modify the output to eliminate undesired line breaks within html markup. Maybe we just need to modify the getPatternConfiguration function with an regression rule replace(/[\r\n]/gm, '');

Describe alternatives you've considered I also tried to use |trim on the pattern_configuration when rendering the component with twig. I also tried to use the |replace filter but it doesnt allow regex out of the box.