Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Alexander Praetorius
@serapath
Does that make sense to you?
Joey Baker
@joeybaker
It does. A separate module makes sense.
You’re kinda talking about the “shared configs” thing that eslint just did
Alexander Praetorius
@serapath

Hmm, not sure.
But I just realized, that in order for atomify to work on dependencies, it just needs the:

"main":"index.js",
"style":"index.css"

fields. Otherwise, i could probably very easily create my own cli tool atomify-serapath, that reads its own config and whatnot and executes atomify and then my projects would have a direct dev dependency atomify-serapath and no more atomify.

Alexander Praetorius
@serapath

Two questions:

  • Is anyone working on MacOSX? My girlfriend tried to run atomify but it only works if browsersync is not activated, otherwise it crashes.
  • Would it make sense to pass dev, prod and test env options as url params when opening the page?
Joey Baker
@joeybaker
@serapath at Getable, we’re all on macs, and browsersync works fine!
what version of node is she on?
I’m not sure what those url params would do?
Alexander Praetorius
@serapath
I just saw, that atomify-js supports envify, maybe i can use that. Otherwise i thought, maybe when atomify server opens, it could read an env file and append those to the url so i can read them in the app and fall back to defaults if not given
Alexander Praetorius
@serapath

In atomify.js - default transforms it mentions envify is supported by default. How can i make use of that? Using package.json has "scripts": { "start": "atomify" } and I couldnt find an examplenpm start --NODE_ENV develomentandNODE_ENV=development npm start` using

var mode = process.env.NODE_ENV;

in my index.js file doesnt work.
I also tried installing envify and adding it to the applied browserify transforms next to babel, but it's not replacing anything.
What do I need to do? Is it possible?

Alexander Praetorius
@serapath

but we use atomify programatically
so it’s just a matter of sending it a different config based on process.env.NODE_ENV

is there something on github? how do you do that?

Alexander Praetorius
@serapath
btw. #80
Alexander Praetorius
@serapath
otherwise, feedback is appreciated for envlocalify
Alexander Praetorius
@serapath

hey, i'm following the discussion around css-modulesify and css-modules in general. I'm currently using atomify and in css i make use of:

:root {
  --ComponentName-variableName1:  value;
  --ComponentName-variableName2:  value;
  --ComponentName-variableName3:  value;
  /* ... */
  --SubComponentName-variableName1: var(--ComponentName--variableNameX1);
  --SubComponentName-variableName2: var(--ComponentName--variableNameX2);
  /* ... */
}

My components define their css input through an INTERFACE as a set of --ComponentName-variableNameX: value.
If I re-use a component as a sub-component, I can customize/overwrite the defaults specified in the sub-component itself

My questions:

  • How to approach media queries?
  • What if my "css variables" change in response to media queries matching?
Alexander Praetorius
@serapath
:root {
  --Theme-font-size1             : 6.5vw;
  --Theme-font-size2             : 3vw;
  --Theme-font-size3             : 2.3vw;
  --Theme-borderwidth            : 4vw;
  /* Sub Components */

  --Markdownbox-font-size1             : var(--Theme-font-size1);
  --Markdownbox-font-size2             : var(--Theme-font-size2);
  --Markdownbox-font-size3             : var(--Theme-font-size3);
  --Markdownbox-borderwidth            : var(--Theme-borderwidth);
}
@media all and (min-width: 0px) and (max-width: 450px) {
  :root {
    --Theme-font-size1             : 6.5vw;
    --Theme-font-size2             : 3vw;
    --Theme-font-size3             : 2.3vw;
    --Theme-borderwidth            : 4vw;
  }
}
@media all and (min-width: 450px) and (max-width: 600px) {
  :root {
    --Theme-font-size1             : 6.5vw;
    --Theme-font-size2             : 3vw;
    --Theme-font-size3             : 2.3vw;
    --Theme-borderwidth            : 4vw;
  }
}
doesn't seem to work. I'm not aware of parameterization in css-modules and couldnt find anything related to media queries. How could I approach this instead?
Joey Baker
@joeybaker
yea… the css vars polyfill is limited. You can’t change css variables in a media query until CSS4 supports it :(
it really sucks.
My suggestion is to use JS to switch class names at certian breakpoints :(
Alexander Praetorius
@serapath
do you have an example or repository where you do that to have some inspiration?
Are there thoughts around css-modules how to approach that? I opened an issue there.
And next to it, i'm also following a discussion around container queries and wonder if css-modules have any thoughts on that.
Alexander Praetorius
@serapath
I tried to engage here: ResponsiveImagesCG/container-queries#2
Joey Baker
@joeybaker
we just switched to using css modules and have liked it so far
yea… I’m excited by container queries
Alexander Praetorius
@serapath
Haven't switched yet, but will try in the next weeks. Do you have a simple public component that uses css modules to take a look at and be inspired on how it works? :octocat:
Joey Baker
@joeybaker
hmm… no, sorry, nothing pubic yet :( We just started this week.
Kevin Coffey
@kevdougful
I'm not able to npm install atomify as it references an abandoned npm package: prettify-error