by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Chiel Kunkels
    @chiel
    yeah, or when a file is missing
    cause the file was missing just now (installing postcss-scss removed a local symlink in node_modules) and it spat out the same error:
    ✖ 「wdm」: TypeError: Cannot read property 'root' of undefined
        at Processor.output (/Users/ckunkels/dev/act-team-js/node_modules/@modular-css/processor/processor.js:266:41)
        at runMicrotasks (<anonymous>)
        at processTicksAndRejections (internal/process/task_queues.js:94:5)
    Pat Cavit
    @tivac
    bleh
    Chiel Kunkels
    @chiel
    haha :p
    Chiel Kunkels
    @chiel
    @tivac I've filed an issue, thanks so much for your help!
    keb
    @keb
    hi all! is there a way to prefix the generated classNames so that I can whitelist them from purgeCSS? seems like purgecss doesn't see them in my Preact components since are dynamic, so it's eating them up
    or is there some convention they follow? from what I've seen they all start with "mc" but can't be sure from my 2 hours of playing around with this
    Pat Cavit
    @tivac
    They're all mc_ by default yes
    You can specify a namer option that is a function if you want to change the naming algorithm
    keb
    @keb
    thanks @tivac !
    Pat Cavit
    @tivac
    👍🏻
    Chiel Kunkels
    @chiel
    @tivac do you have any experience using modular-css with typescript?
    I've managed to generate some typings files using typed-css-modules, but on the command line
    Pat Cavit
    @tivac
    Nope, not even a little bit!
    I view TS as a necessary evil for some folks and otherwise avoid it because it makes me grouchy :)
    Chiel Kunkels
    @chiel
    haha fair enough, that makes sense
    I do like it, but indeed it requires some more effort to get it to work
    Pat Cavit
    @tivac
    If I can help in some way let me know, sorry :-\
    Chiel Kunkels
    @chiel
    nah totally fine! what I'm missing now is a way to have this happen on-demand while coding stuff, with webpack -w or creating stories :)
    saadsakib
    @saadsakib
    hi, has anyone installed @modular-css/rollup globally? I am having some trouble with it.
    Pat Cavit
    @tivac
    I have not
    what happens?
    saadsakib
    @saadsakib
    I got my problem solved. The import css from "@modular-css/rollup" was not working. Changed the location to point to globally installed folder and it worked.
    Pat Cavit
    @tivac
    Huh, not sure why resolution would be weird for the global location of that one particular module
    Do other namespaced modules resolve correctly?
    saadsakib
    @saadsakib
    I just checked. It seems that I need to explicitly specify global location if I import any package in rollup.config.js. But importing in regular js files doesn't need the global location.
    Pat Cavit
    @tivac
    if you use require() does it work correctly?
    Sounds like rollup's built-in transpilation of import in rollup.config.js is funky
    Heading to bed, glad you got it sorted out!
    saadsakib
    @saadsakib
    nope, require doesn't fix it.
    good night, Pat.
    Ghepes Doru
    @ghepesdoru
    Is it possible to call the API sync?
    Pat Cavit
    @tivac
    Not without doing something scary
    Many postcss plugins are async so it needs to use async APIs throughout
    Ghepes Doru
    @ghepesdoru
    Yes I guessed :) Thank your for your replay
    keb
    @keb
    Dropping in to just say this is a great project. Saved me a lot of headache after spending a week trying to find the perfect CSS-in-JS solution for my rollup projects. major kudos
    Pat Cavit
    @tivac
    👍🏻
    Great to hear it @keb!
    Vlad Shcherbin
    @vladshcherbin

    Hey guys, I'm trying to use modular-css with rollup and react. I've got a component with a nested one:

    <Layout> // imports reset.scss inside
      <NestedLayout /> // imports nested-layout.scss inside
    </Layout>

    From this example I'd expect compiled css file to have parent reset styles first, with nested-layout styles added below. However, I get nested-layout first.

    Wondering if this is correct behavior

    Pat Cavit
    @tivac
    If the styles in reset.scss aren't explicitly depended on then it'll just be down to the order they're iterated
    for something like a reset I tend to use @import "./reset.css"; and postcss-import since it's orthogonal to what modular-css cares about
    Vlad Shcherbin
    @vladshcherbin
    @tivac what about things like css variables? I also have a global style import next to reset, it has :root { // css variables }, they are also at the bottom of compiled css file. what to do in this case, also add to postcss-import?
    Pat Cavit
    @tivac
    probably, right now it arranges the files in dependency order with anything that doesn't have any dependents or dependencies at the end. It wouldn't be impossible to invert that, since the loose files are just that and won't affect any of the dependency stuff.
    I wonder how you'd sort those files though, by path order from CWD then alpha within each folder?
    Vlad Shcherbin
    @vladshcherbin
    @tivac I'd expect them be in order they are imported, parent first, children after. However, I'm not sure if it's possible in rollup
    I've used svelte before and imported them this way (parent component has reset, global, etc and children have their own styles). I've used it with rollup too and never had any problems
    Tried to switch react app to css modules (using postcss plugin) and import order was reverse, so I tried modular-css and unfortunately order is the same
    There is an issue in postcss plugin - egoist/rollup-plugin-postcss#96 and a PR to fix it, hopefull it will work how I described above (according to tests) and related issue in rollup repo - rollup/rollup#3682
    Vlad Shcherbin
    @vladshcherbin
    So I was wondering if it's possible to have similar behavior in modular-css, I kinda prefer importing styles from components instead of rollup config before hook
    Not sure about best practices of this in css-modules or css-in-js though but it feels natural and worked in svelte for me
    Pat Cavit
    @tivac
    import order is tricky to get right due to it being dependent on how rollup walks the FS