Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Tommy Hodgins
    @tomhodgins
    you just need to run that and put the output of that function into a <style> tag as a CSS stylesheet, or directly into CSSOM as a stylesheet
    :D
    David McClain | Dirtyredz
    @dirtyredz
    eqcss-parse might solve my issue!
    so just to clarify i would parse when im building for prod and just include the output.js inside my app
    Tommy Hodgins
    @tomhodgins
    yeah! when EQCSS reads <style> or <script> this is how it's holding the parsed stylesheets in EQCSS.data, so using eqcss-parse pre-parses it so you can basically just plug the parsed styles right into EQCSS.data and it runs
    If you look at the format eqcss-parse produces and you can think of another way to assemble stylesheets in that format you can also compose EQCSS that way too - you don't have to use the custom syntax at all if you can generate the objects yourself some other way
    David McClain | Dirtyredz
    @dirtyredz
    does eqcss-parse export so i can tie it into another script or do i have to use the command line?
    Tommy Hodgins
    @tomhodgins
    I think it's set up to work on the command-line
    I got this working somehow as well: https://i.imgur.com/DuAXOUT.png
    where you can have custom EQCSS syntax parsed inside JS modules
    David McClain | Dirtyredz
    @dirtyredz
    ah
    that might work better
    Tommy Hodgins
    @tomhodgins
    I don't do JS on the backend for much, so this is only stuff I've dabbled with a little
    for me, runtime === funtime
    I love JS in the browser
    David McClain | Dirtyredz
    @dirtyredz
    deffinetly, but when working with react,webpack,babel,........
    shit gets messy sometimes
    David McClain | Dirtyredz
    @dirtyredz
    TypeError: code.replace is not a function
    EQCSS.parse
    D:/My Files/DirtyRedz/Web     Projects/Dirtyredz.com/www/node_modules/eqcss/EQCSS.js:171
      168 | 
      169 | // Cleanup
      170 | code = code || ''
    > 171 | code = code.replace(/\s+/g, ' '); // reduce spaces and line     breaks
    trying to use process
    doesnt happen when i use it directly when i import it it fucks up, must be the string literal
    Tommy Hodgins
    @tomhodgins
    hmm
    what features are you using in EQCSS?
    can you drop eval("")?
    David McClain | Dirtyredz
    @dirtyredz
    ill have to look

    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())
    ofcourse i could just leave the eqcss stuff inside each component
    David McClain | Dirtyredz
    @dirtyredz
    and run eqcss.process inside each component that uses eqcss
    instead of haveing an eqcss master file
    Tommy Hodgins
    @tomhodgins
    hmm, I'm not sure I know enough about react to understand :D
    David McClain | Dirtyredz
    @dirtyredz
    well your input has been very helpfull anyways
    David McClain | Dirtyredz
    @dirtyredz
    bingo that is a bit more elegant
    import EQCSS from "eqcss"
    const PreRenderedEqcss = `@element #test{}`
    export default class Contact extends React.Component {
       render() {
        EQCSS.process(PreRenderedEqcss)
        return (<div></div>)}
    }
    David McClain | Dirtyredz
    @dirtyredz
    hmm
    seems the more eqcss.process() i use the slow load time i get
    why is that? should i stick to a single EQCSS.process() call and pile all my ecss into one file/location?
    when seperated into each component each process() call slows down the render
    David McClain | Dirtyredz
    @dirtyredz
    having all the eqcss in one file and using process() once does help
    Tommy Hodgins
    @tomhodgins
    for EQCSS, if you can have it all in one file that should work better
    you want to do the least processing you have to
    Tommy Hodgins
    @tomhodgins
    Hey @dirtyredz, what do you think of this setup? http://staticresource.com/js-in-css-module-demo
    There's a JS-in-CSS plugin written as a JS module here: http://staticresource.com/js-in-css-module-demo/jsincss.js
    There's an element query plugin written as a JS module here: http://staticresource.com/js-in-css-module-demo/element.js
    You can write a stylesheet as a JS module by exporting a function that returns a JS template string, then any JS-in-CSS helper functions you want to use in those styles you can import at the top of the stylesheet, like this: http://staticresource.com/js-in-css-module-demo/element-query-demo.js
    import element from "./element.js"
    
    export default () => {
    
      return `
    
        /* Min-width */
        ${element('.minwidth', {minWidth: 300}, `
          .minwidth {
            background: greenyellow;
            border-color: limegreen;
          }
        `)}
    
      `
    }
    And then, to use it, you only need to 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)
    Diego Ivan Perez Michel
    @diegomichell
    Hello guys
    I have a problem, qcss applies styles to wrong element
    I'm trying to make an element change its width when certain height is hit, it works fine but the style also gets apply to one more element whose height is not the specified min-height.
    Tommy Hodgins
    @tomhodgins
    Hi @diegomichell, are you using :self as a selector inside the element query for targeting matching elements?
    Tommy Hodgins
    @tomhodgins
    I'll always be checking this channel for EQCSS-related questions and support, but I thought I'd share the new Element Queries slack network I've created where we will be talking about EQCSS, and element queries in general, and many other ideas and plugins. If you use Slack this new network might be a better spot for discussion: https://twitter.com/innovati/status/969622176642060289
    Dariusz Górak
    @darekg11
    Anybody had problems setting this up with handlebars template? The thing is I am currently working on something like a simple web page deisnger which uses handlebars to render HTML preview. The templates are using @media queries and one of requirements is that user could launch "mobile" preview of template where template is opened in 400px width div. Because the template are using @media screen width, placing template in parent wrapper having 400px width does not change anything. So I included EQCSS and changed my queries to be based around @element but this does not do anything
    Tommy Hodgins
    @tomhodgins
    Hey @darekg11! I haven't tried it inside a handlebars template, but if you can share the code you're working with I wonder if we can get it working