New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
preprocess seems to dislike css interpolation in pseudoclasses #48
Comments
hm, interesting. Can you post what this becomes past transpilation for you? :) |
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 It also converts |
bumping this... main reason we had to disable this awesome plugin :) |
@jasongornall |
If I have
then the plugin in
preprocess: true
mode will somehow eat the:hover
and the styles will be applied on the normal component too.The text was updated successfully, but these errors were encountered: