question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support multiple values of the same key in defaultDirectives

See original GitHub issue

Hey @JonasKruckenberg,

thanks for the great project! Probably like most people, I want to use this plugin to create a bunch of differently sized images that are later served as an image with a srcset tag. Because I don’t want to specify all of the breakpoints individually for each image, I found out that there’s the defaultDirectives setting in the Vite plugin options. So the idea is to store a variable containing all of the breakpoints, which is then picked up by the Vite config and automatically applied to every imported image.

However, the setting doesn’t seem to support more than one value for each property at a time – I tried passing the string exactly like you would in an import statement (width=3840;2560;1920 etc.), but the plugin only seems to accept the first number it gets. The exact config I used looks like this:

plugins: [
  imagetools({
    defaultDirectives: { width: imageWidths.join(";"), format: 'webp' },
  }),
],

Is there any way to solve this? I also thought about using dynamic import statements, but I never really got them to work properly. I really like your project, but the design decision to make everything a directive you have to spell out for each individual import makes it quite hard to outsource a common configuration.

Your help would be appreciated 😃

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
JonasKruckenbergcommented, Jun 11, 2021

Sooo, I thought this was gonna come up at some point 😉 The way imagetools works is it first parses the url and generates an object from that. It then generates what I call targets, one for each image that is gonna be produced. The issue is that in your case the defaultDirectives get applied after the last step above. That’s why it’s not working. I am however very unhappy with the way the API works right now so I’m doing (yet another sigh) rewrite and I’ll make sure to address this issue too!

0reactions
JonasKruckenbergcommented, Nov 6, 2021

Alright, the custom resolveConfig hook got released in rollup-plugin-imagetools@2.5.0 and vite-imagetools@3.9.0 respectively. The direct fix for this issue will also be released soon!

Read more comments on GitHub >

github_iconTop Results From Across the Web

filter multiple value of one key in AngularJS - Stack Overflow
The simplest solution is to add a filter to your controller and use that: $scope.filterFruitsAndVegies = function (item) { return item.type ...
Read more >
Creating a condition with multiple keys or values
A Condition element can contain multiple conditions, and each condition can contain multiple key-value pairs. Most condition keys support using multiple values.
Read more >
Command-line syntax overview for System.CommandLine
An introduction to the command-line syntax that the System.CommandLine library recognizes by default. Mentions exceptions where syntax in ...
Read more >
ngRepeat - AngularJS: API
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop...
Read more >
Built-in directives - Angular
The different types of Angular directives are as follows: ... By default, NgIf prevents display of an element bound to a null value....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found