EQCSS is a plugin that introduces Element Queries, Scoped CSS, a Parent selector, and responsive JavaScript to all browsers IE8 and up
got it to work by wrapping the file in an anon function and passing that to eqcss.parse inside a reaact component
eqcss.js
export default () => `@element #test{}`
react component.js
import EQCSS from "eqcss"
import preEqcss from "eqcss.js"
EQCSS.process(preEqcss())
import
at the top of the stylesheet, like this: http://staticresource.com/js-in-css-module-demo/element-query-demo.jsimport element from "./element.js"
export default () => {
return `
/* Min-width */
${element('.minwidth', {minWidth: 300}, `
.minwidth {
background: greenyellow;
border-color: limegreen;
}
`)}
`
}
import
JS-in-CSS and your stylesheet, and run jsincss()
with your stylesheet:import jsincss from "./jsincss.js"
import eqStyles from "./element-query-demo.js"
jsincss(eqStyles)
@tomhodgins Hey there! I want to be able to change the attributes of the parent .results
when a child selector .loaded
of a different parent .details
is dynamically loaded. Is that doable with EQCSS? Please advise. Thank you!
For example : :
CSS : :
/* Closed State (default) */
.results {
flex: 0 0 auto;
width: 0;
transition: width 550ms ease;
}
/* Open State */
.details .loaded {
.results {
width: 25%;
}
}
HTML : :
<div class="results">
<div class="list-of-results"></div>
</div>
<div class="details">
<div class="dynamically-loaded-content loaded"> <--- dynamically loaded selector ".loaded"
</div>
</div>