-
Notifications
You must be signed in to change notification settings - Fork 188
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
how to write Nesting ? #319
Comments
This is somewhat not supported. The only real nesting that is supported is pseudo selectors (:hover, :active, etc) and media queries. The way you would do it in Aphrodite would be to do something like const styles = StyleSheet.create({
jumpBtn: {
width: 32,
height: 32,
background: 'background: url('jump_btn.png') no-repeat 0 0',
},
disabled: {
backgroundPosition: '-32px 0',
},
back: {
backgroundPosition: '-64px 0',
},
});
const classes = css(styles.jumpBtn, isDisabled && styles.disabled, isBack && styles.back); There is an escape hatch by doing something like const styles = StyleSheet.create({
jumpBtn: {
...styles,
':not(foobar).disabled': { ....disabledStyles }
},
});
const classes = 'disabled' + css(styles.jumpBtn) I would try hard to not use this though. |
thank you verymuch @dmiller9911 |
You can do that pretty easily by adding a custom selectorHandler with StyleSheet.extend
Then just write your style as :
Even better, just wrap all your styles into a function like this :
So that you can just write :
This can be automated using a React HOC. I hope nesting will become part of the core functionalities at some point :) |
@nakwa Perfect! I do think selectors for ' ' (space - all descendants) and >(direct child descendants) should be included - it seems wrong to have to add styles to every component that needs styling. I modified as follows const { StyleSheet, css } = Aphrodite.extend([{
selectorHandler: (selector, baseSelector, generateSubtreeStyles) => {
if (selector[0] === ' ') {
const tag = selector.slice(1);
const nestedTag = generateSubtreeStyles(`${baseSelector} ${tag}`);
return nestedTag;
} else if (selector[0] === '>') {
const tag = selector.slice(1);
const nestedTag = generateSubtreeStyles(`${baseSelector} > ${tag}`);
return nestedTag;
}
return null;
}
}]); so now this works: Form: {
borderWidth: 1,
borderStyle: "solid",
borderColor: "black",
margin: 5,
padding: 5,
borderRadius: 7,
" label" :{
backgroundColor: "pink",
}
} and produces: .Form_1pi38cr {
border-width: 1px !important;
border-style: solid !important;
border-color: rgb(66, 139, 202) !important;
margin: 5px !important;
padding: 5px !important;
border-radius: 7px !important;
}
.Form_1pi38cr label {
background-color: rgb(91, 192, 222) !important;
} Would be great for it to be core functionality. Might look at the code base. |
Wasn't so hard to implement in base library: I'll ponder over the code a bit longer and then I might make it a PR. |
Yea, @Sibz , actually I think using a |
Also, in order to support the import _ from 'lodash';
import { StyleSheet as Aphrodite } from 'aphrodite/no-important';
const { StyleSheet, css } = Aphrodite.extend([{
selectorHandler: (selector, baseSelector, generateSubtreeStyles) => {
const nestedTags = [];
const selectors = selector.split(',');
_.each(selectors, (subselector, key) => {
if (selector[0] === '&') {
const tag = key === 0 ? subselector.slice(1) : subselector;
const nestedTag = generateSubtreeStyles(`${baseSelector} ${tag}`.replace(/ +(?= )/g, ''));
nestedTags.push(nestedTag);
}
});
return _.isEmpty(nestedTags) ? null : _.flattenDeep(nestedTags);
}
}]);
export { StyleSheet, css }; so that : '& .container-fluid, .container-fluid > .row': {
height: '100%',
'& .woop': {
backgroundColor: 'red'
}
}, generates : [
".component_s3hzln .container-fluid{height:100%;}",
".component_s3hzln .container-fluid .woop{background-color:red;}",
".component_s3hzln .container-fluid > .row{height:100%;}",
".component_s3hzln .container-fluid > .row .woop{background-color:red;}"
] |
This is really neat. I think it would be awesome if we could support nesting like this. If someone has time to put together a PR for this it would be greatly appreciated. |
I can, I used the actual CSS selectors [space] and > to support multi selection. It's been a long time since that project but it worked a dream! |
The text was updated successfully, but these errors were encountered: