eqcss/eqcss

EQCSS is a plugin that introduces Element Queries, Scoped CSS, a Parent selector, and responsive JavaScript to all browsers IE8 and up

Tommy Hodgins

@tomhodgins

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

http://staticresource.com/npm-test/index.js

http://staticresource.com/npm-test/

David McClain | Dirtyredz

@dirtyredz

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

D7460N

@dragontheory

@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>

D7460N

@dragontheory

Is this still being maintained?

Two practical implications of this would be a scroll status indicator and a form wizard status bar.

D7460N

@dragontheory

For example: https://codepen.io/dragontheory/pen/NWpYWMw

D7460N

@dragontheory

Better example of both a scroll to top and scroll progress indicator in one:
https://codepen.io/dragontheory/pen/yLMKYmG

Where communities thrive

People

Repo info

Activity