stash2

[dlrandy]

https://medium.freecodecamp.org/requiring-modules-in-node-js-everything-you-need-to-know-e7fbd119be8

[dlrandy]

var a = 123; function a(){console.log('a');} typeof a;
"number"

[dlrandy]

@define-mixin themify $property, $value {
@each $theme in light, dark {
.theme-$(theme) &,
.theme-$(theme)& {
$(property): themed($(theme), $(value));//这里家引号会有问题的坑
}
}
}

.App {
text-align: center;
@add-mixin themify background, textColor;
}

.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
//===================================
module.exports = {
light: {
textColor: 'red'
},
dark: {
textColor: 'green'
}
}
//========================================

plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-mixins'),
require('postcss-each'),
require('postcss-functions')({
functions: {
themed: function (theme, key) {
console.log(themes,theme, key);
return themes[theme][key];
}
}
}),
require('precss')(),
require('postcss-cssnext')(),

[dlrandy]

            require('postcss-mixins')({
              mixins: {
                themify: function(mixin, property, key){
                  return ['light', 'dark'].map(function(theme){
                    return {
                      [`.theme-${theme} &, &.theme-${theme}`]: {
                          [property]: themes[theme][key]
                      }
                    }
                  })
                }
              }
            }),

@define-mixin themify $property, $value {
@each $theme in light, dark {
.theme-$(theme) &,
&.theme-$(theme) {
$(property): themed($(theme), $(value));
}
}
}

[dlrandy]

above return array, so it has a & index issue.following is right:

require('postcss-mixins')({
mixins: {
themify: function (mixin, property, key) {
let objArr = ['light', 'dark'].map(function (theme) {
return {
[.theme-${theme} &, &.theme-${theme}]: {
[property]: themes[theme][key]
}
}
});
return Object.assign({}, ...objArr);
}
}
}),