awcross/postcss-each-variables

PostCSS plugin enabling variable mapping for each

postcss-each-variables

PostCSS plugin enabling variable mapping for @each.

Install

npm install --save-dev postcss-each-variables

Usage

postcss([ require('postcss-each-variables') ])

Note: you must include postcss-each-variables before other at-rules plugins.

Before

:root {
	--breakpoints: (
		sm: 576px,
		md: 768px,
		lg: 992px,
		xl: 1200px
	);
}

@each $key, $value in var(--breakpoints) {
	.container-$(key) {
		max-width: $(value);
	}
}

After

:root {
	--breakpoints: (
		sm: 576px,
		md: 768px,
		lg: 992px,
		xl: 1200px
	);
}

@each $key, $value in (sm, md, lg, xl), (576px, 768px, 992px, 1200px) {
	.container-$(key) {
		max-width: $(value);
	}
}

See PostCSS docs for examples for your environment.

postcss-each-variables's Issues

Doesn't work as expected

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
      require('postcss-import'), 
      require('postcss-svg'),
      require('postcss-mixins'),
      require('postcss-each-variables'),
      require('postcss-extend'),
      require('postcss-nested'),
      require('tailwindcss'),     
      require('autoprefixer'),
    ]);

I have this in input css file

:root {
	--icons: (
		check:				url("../views/components/svg/listicons.svg#check"),
		check-rounded: 		url("../views/components/svg/listicons.svg#check-rounded"),
		check-squared: 		url("../views/components/svg/listicons.svg#check-squared"),
		checklist: 			url("../views/components/svg/listicons.svg#checklist"),
		chevron: 			url("../views/components/svg/listicons.svg#chevron"),
		thumb-up-outline: 	url("../views/components/svg/listicons.svg#thumb-up-outline"),
		thumb-up-solid: 	url("../views/components/svg/listicons.svg#thumb-up-solid"),
		tools: 				url("../views/components/svg/listicons.svg#tools")
	);
}


@each $key, $value in var(--icons) {
	.svg-list-$(key) {
		content: $(value);
	}
}

And I have following output

:root {
  --icons: (
		check:				url(/images/listicons.svg?2a63c466cf4a3dc372356d34ce53757d#check),
		check-rounded: 		url(/images/listicons.svg?2a63c466cf4a3dc372356d34ce53757d#check-rounded),
		check-squared: 		url(/images/listicons.svg?2a63c466cf4a3dc372356d34ce53757d#check-squared),
		checklist: 			url(/images/listicons.svg?2a63c466cf4a3dc372356d34ce53757d#checklist),
		chevron: 			url(/images/listicons.svg?2a63c466cf4a3dc372356d34ce53757d#chevron),
		thumb-up-outline: 	url(/images/listicons.svg?2a63c466cf4a3dc372356d34ce53757d#thumb-up-outline),
		thumb-up-solid: 	url(/images/listicons.svg?2a63c466cf4a3dc372356d34ce53757d#thumb-up-solid),
		tools: 				url(/images/listicons.svg?2a63c466cf4a3dc372356d34ce53757d#tools)
	);
}

@each $key, $value in (check,check-rounded,check-squared,checklist,chevron,thumb-up-outline,thumb-up-solid,tools), (url("../views/components/svg/listicons.svg#check"),url("../views/components/svg/listicons.svg#check-rounded"),url("../views/components/svg/listicons.svg#check-squared"),url("../views/components/svg/listicons.svg#checklist"),url("../views/components/svg/listicons.svg#chevron"),url("../views/components/svg/listicons.svg#thumb-up-outline"),url("../views/components/svg/listicons.svg#thumb-up-solid"),url("../views/components/svg/listicons.svg#tools")) {
  .svg-list-$(key) {
    content: $(value);
  }
}

To me it seems like @each loop didn't launched. I expected to have 8 separate styles on the output from .svg-list-check to .svg-list-tools. What is wrong with my code?