preprocess seems to dislike css interpolation in pseudoclasses about babel-plugin-styled-components

[kitten]

hm, interesting. Can you post what this becomes past transpilation for you? :)

[wmertens]

Sorry for the delay. It also happens on regular sub selectors.

I tested with

const RadioWrap = styled.div`
	display: flex-inline;
	height: ${p => p.theme.inputHeight}px;
	align-items: center;
	position: relative; // Our real input likes to run away
	input:focus + div {
		// Add focus shadow to our checkbox 
		${p => p.theme.focusShadow};
	}
	&:hover {
		svg {
			fill: ${p => p.theme.color.hint};
		}
	}
`

This is what it looks like without preprocessing:

var RadioWrap = __WEBPACK_IMPORTED_MODULE_3_styled_components__["default"].div.withConfig({
	displayName: 'RadioInput__RadioWrap'
})(['\n\tdisplay: flex-inline;\n\theight: ', 'px;\n\talign-items: center;\n\tposition: relative; // Our real input likes to run away\n\tinput:focus + div {\n\t\t// Add focus shadow to our checkbox \n\t\t', ';\n\t}\n\t&:hover {\n\t\tsvg {\n\t\t\tfill: ', ';\n\t\t}\n\t}\n'], function (p) {
	return p.theme.inputHeight;
}, function (p) {
	return p.theme.focusShadow;
}, function (p) {
	return p.theme.color.hint;
});

theme.focusShadow:

__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1_styled_components__["css"])(['box-shadow: 0 0 5px 0 ', ';'], function (p) {
		return p.theme.color.accent.bg;
	}),

This is the resulting css:

/* sc-component-id: RadioInput__RadioWrap-gJaBgx */
.RadioInput__RadioWrap-gJaBgx {}
.cDwhCN {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;height: 25px;-webkit-align-items: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;}.cDwhCN input:focus + div {box-shadow: 0 0 5px 0 rgba(67, 84, 33, 1);;}.cDwhCN:hover svg {fill: rgba(0,0,0,.22);}

---

and with preprocessing:

var RadioWrap = __WEBPACK_IMPORTED_MODULE_3_styled_components_no_parser___default.a.div.withConfig({
	displayName: 'RadioInput__RadioWrap'
})([[' {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;height: ', function (p) {
	return p.theme.inputHeight;
}, 'px;-webkit-align-items: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;}'], [' input:focus + div {', function (p) {
	return p.theme.focusShadow;
}, ';}'], [':hover svg {fill: ', function (p) {
	return p.theme.color.hint;
}, ';}']]);

theme.focusShadow:

__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1_styled_components_no_parser__["css"])([[' {box-shadow: 0 0 5px 0 ', function (p) {
		return p.theme.color.accent.bg;
	}, ';}']]),

css:

/* sc-component-id: RadioInput__RadioWrap-gJaBgx */
.RadioInput__RadioWrap-gJaBgx {}
.cgFzra {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;height: 25px;-webkit-align-items: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;}.cgFzra input:focus + div {;}.cgFzra {box-shadow: 0 0 5px 0 rgba(67, 84, 33, 1);}.cgFzra:hover svg {fill: rgba(0,0,0,.22);}

As you can see, the box-shadow moves out of the input:focus selector, but I don't understand how, because it does seem to be placed in the correct location in the preprocessed js output.

It also converts flex-inline to flex 🤔

[jasongornall]

bumping this... main reason we had to disable this awesome plugin :)

[kitten]

@jasongornall preprocess is an experimental option and will soon be removed in favour of a future new idea (more info can be found here: https://github.com/kitten/sweetsour). This means that we currently don't have a replacement for this option, but on the other hand we have something better planned 🙌