modular-css/modular-css

CSS is neat!

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

Where communities thrive

People

Repo info

Activity