https://github.com/weffe/babel-plugin-transform-liquid-in-template-literals

https://github.com/weffe/babel-plugin-transform-liquid-in-template-literals

Last synced: 18 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/weffe/babel-plugin-transform-liquid-in-template-literals
• Owner: Weffe
• License: mit
• Created: 2019-12-21T00:42:45.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T03:27:02.000Z (almost 2 years ago)
• Last Synced: 2024-04-26T18:21:24.396Z (7 months ago)
• Language: TypeScript
• Size: 1.41 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-transform-liquid-in-template-literals

From:

```



```

To:

```



```

## Why

This is useful if you are using [Liquid](https://shopify.github.io/liquid/) filters inside JavaScript and using Terser for minification instead of Babel's minifier.

If you don't want to keep remembering to use single quotes for html attributes to get Liquid to work inside. Then, use this plugin to take care of things for you.

### Detailed Why

What ends up happening is Terser will transform the following:

```

input:  src="{{ 'affirm_logo_black.svg' | asset_url }}"

output: src="{{ \'affirm_logo_black.svg\' | asset_url }}"

        ^^^^ Liquid will see that the value is incorrect

```

But if the code is set like so:

```

input:  src='{{ "affirm_logo_black.svg" | asset_url }}'

output: src=\'{{ "affirm_logo_black.svg" | asset_url }}\'

```

Then, Liquid can still process the value properly.