search

mixtur / webpack-spritesmith

Webpack plugin that converts set of images into a spritesheet and SASS/LESS/Stylus mixins
499 stars 56 forks source link

Multiple folders import with glob #78

Closed st-schneider closed 4 years ago

st-schneider commented 6 years ago

I tried to get pngs together from multiple files with the glob pattern like {one,two}/sprites/*.png, but the path is resolved without expanding the {one,two} into seperate sets. Would it be possible to either have an array of cwds or some better glob resolution?

mixtur commented 6 years ago

Sorry for delay. What you did actually should have worked. Can you provide more details. Full config and folder structure maybe?

st-schneider commented 6 years ago

the curly braces in glob notation should expand before evaluating the path. So I expected {one,two}/sprites/*.png to be a set of one/sprites/*.png and two/sprites/*.png. I have some kind of common folder for images where a legacy part and a modern part grab the common images so I need at least two folder for a spritesheet.

mixtur commented 6 years ago

Well yes, I just tried it on my machine and it worked fine. Actually on dev/config.js that I use to test things, there is glob that looks like **/ico/*.png. I replaced it with {close,send}/ico/*.png and it worked as well. I think we are missing something there.

mixtur commented 6 years ago

Or do you expect it to generate two spritesheets? In that case just make two instances of a plugin. Maybe along with some helper that creates them to avoid too much duplication.

st-schneider commented 6 years ago

no I expect one spritesheet with content of folder one and two

mixtur commented 5 years ago

Sorry, I totally forgot about this issue. Is this still a problem? Glob you are mentioning should just work. Maybe your folders are containing icons with common names, Then some icons may become inaccessible. If that is the case either rename them or use config.api.generateSpriteName, or use custom template.

st-schneider commented 5 years ago

I haven't tried in a while. I will inform you when i do

st-schneider commented 4 years ago

there and back again. seems to be still an issue :P

mixtur commented 4 years ago

I need more details then) mcve if possible.

st-schneider commented 4 years ago

As it seems cwd does not support the {} syntax but glob does, so I added it there :P

st-schneider commented 4 years ago 
./src/Resources/themes/base/sprite/logo.png
./src/Resources/themes/xmas/sprite/xmas-logo.png

this does not work

new SpritesmithPlugin({
    src: {
      cwd: './src/Resources/themes/{base,xmas}/sprite'),
      glob: '*.png',
    },

this does work

new SpritesmithPlugin({
    src: {
      cwd: './src/Resources/themes'),
      glob: '{base,xmas}/sprite/*.png',
    },
mixtur commented 4 years ago

Well that is expected. I just couldn't figure out the problem from what you were saying before) Closing it now.