pascalduez/postcss-map

Map function based on map name

Opened this issue · 9 comments

var opts = {
  basePath: 'css/',
  maps: [ 'breakpoint.yml', 'font.yml' ]
};
.sowieso {
  font-family: font(text);
}
@media (min-width: breakpoint(medium)) {
  .sowieso {
    width: 100%;
  }
}

Hmm, can we reopen this? I frequently define a function to access my maps in sass. It'd be great if this plugin provided the same by default (or supplied an option to turn it on).

Imo, color: colors(green) reads much nicer than color: map(colors, green). If I rely on the default map feature linked above I lose organizational control. Plus it's less semantic: color: map(green).

Hi,

this issue is not closed, and I still like the idea so there are pretty good chances it will land.
I'll try to find a free slot this week.

Just thinking out loud:

think of some sort of alias configuration.

var opts = {
  basePath: 'css/',
  maps: [ 
    { file: 'breakpoints.yml', alias: 'bp' },
    'fonts.yml' 
  ]
};

Or

var opts = {
  basePath: 'css/',
  maps: { 
    'bp': 'breakpoints.yml',
    'fonts': 'fonts.yml' 
  }
};

Usage

.sowieso {
  font-family: fonts(text);
}
@media (min-width: bp(medium)) {
  .sowieso {
    width: 100%;
  }
}

Aha! My mistake I misread the closing.

As for the purposed api I prefer the alias method over the hash method. It's quite possible the default map(font, text) is enough for people so I wouldn't want to force them to use an alias function, and the hash implies the alias is required.

My favorite API was the your original proposal though: implicit alias from the filename.

I'm actually leaning toward an API like #12. There's something nice about having a single entry point (namely map) for this plugin.

@pascalduez It's not so fast to detect such props, caz it should iterate arrays with names on every declaration.

@pascalduez And name extending is pollution of constructions. Better use just one identifier: map

+1 I'm also creating functions like that in sass and it will a good feature

@safareli Use this for custom functions. And we don't need to create sass clone.