pentzzsolt / sass-recursive-map-merge Goto Github PK
View Code? Open in Web Editor NEWA lightweight Sass function that merges multidimensional maps recursively.
License: MIT License
A lightweight Sass function that merges multidimensional maps recursively.
License: MIT License
Hi, I was wondering if it was an intentional decision to not recursively join lists which are inside the maps being merged?
Eg:
@import "node_modules/sass-recursive-map-merge/_recursive-map-merge.scss";
$test1: (
'a': (1,2,3),
);
$test2: (
'a': (4,5,6),
);
@debug map-merge($test1, $test2);
@debug recursive-map-merge($test1, $test2);
I would expect to get the following from a recursive function:
(
'a': (1,2,3,4,5,6),
);
But it just behaves the same as map-merge
and keeps the second map's value.
I have a patch which will join two lists together if they have the same key, but if this was a deliberate design decision then I'll just fork and make my own function for this.
So, sometimes we can have a source map which built with other custom maps. Sometimes some of the them may be an empty.
Data:
$map1: (
x: (),
y: (2: 2)
);
$map2: (
x: (1: 1),
y: (3: 3)
);
// Result
(
x: (),
y: (2: 2, 3: 3)
)
// Expected
(
x: (1: 1),
y: (2: 2, 3: 3)
);
Solution:
// Add small helper function
@function convert-empty-list-to-map($source) {
@if ( type-of($source) == list and length($source) == 0 ) {
@return map-remove((x:x), x);
}
@return $source;
};
// Updated function
@function recursive-map-merge($source1, $source2 ) {
@if ( type-of($source1) == map or ( type-of($source1) == list and length($source1) == 0) ) and
( type-of($source2) == map or ( type-of($source2) == list and length($source2) == 0) ) {
// Check both maps and convert to [map] when empty
$map1: convert-empty-list-to-map($source1);
$map2: convert-empty-list-to-map($source2);
$result: $map1;
@each $key, $value in $map2 {
// Check both childs and convert to map when empty
$map1-child: convert-empty-list-to-map(map-get($map1, $key));
$map2-child: convert-empty-list-to-map($value);
@if ( type-of($map1-child) == map and type-of($map2-child) == map ) {
$result: map-merge($result, ($key: recursive-map-merge($map1-child, $map2-child)));
}
@else {
$result: map-merge($result, ($key: $value));
}
}
@return $result;
}
@else {
@warn "recursive-map-merge() expects it\'s parameters to be map types!";
@return null;
}
}
Expected behavior is to throw warning and return null
.
If at least one of the maps given to the function as an argument is empty, the function returns null
and throws the warning:
recursive-map-merge() expects it's parameters to be map types!
This is because Sass sees empty maps as lists:
$empty-map: ();
if type-of($empty-map) == map {
//This code is not executed.
}
if type-of($empty-map) == list {
//This code is executed.
}
Because the function checks if both arguments are maps, it fails with empty maps.
Hi,
This looks perfect for my current needs creating a cohesive taxonomy and set of variables to be used within a design system.
I think I have a couple of maps merged successfully -- how do I get the required value from the new map?
Here's the maps so far:
$extra-small: (
'font-size': 12px,
'font-weight': 400,
'line-height': 1.4
);
$small: (
'font-size': 14px,
'font-weight': 300,
'line-height': 1.5
);
$regular: (
'font-size': 18px,
'font-weight': 500,
'line-height': 1.35,
);
$sans: recursive-map-merge(
$extra-small,
$small,
$regular
);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.