modular-css/modular-css

CSS is neat!

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

Vlad Shcherbin

@vladshcherbin

@tivac after trying css modules and modular-css I've got a question - is it somehow possible to define styles in js files when using modular-css? Something like:

const styles = css`
  .one {
    color: blue;
  }
`

console.log('class', styles.one) // .f5507abd_one

Pat Cavit

@tivac

No, it's not a css-in-js library. You could maybe string together astroturf (https://github.com/4Catalyzer/astroturf/) and the postcss plugin, but I dunno if it'll work or be a good experience.

Vlad Shcherbin

@vladshcherbin

@tivac yeah, after research, astroturf is closest to what I want but lacks rollup support :( Thanks for answering my questions

Vlad Shcherbin

@vladshcherbin

I've actually managed to marry them, kinda works with mostly all features I need, nice :tada:

Pat Cavit

@tivac

awesome, nicely done

Kevin Fiol

@kevinfiol

Hey, maybe a dumb question here. But I'm using m-css for my Preact project. It's great for my scoped components, but I also have some regular .css files with global styles I want to include & bundle up like I used to with rollup-plugin-postcss. e.g. like in my index.js file I have import 'basscss/css/basscss.css'; cuz those classes will be used everywhere. Can m-css handle that for me, or do I still need another plugin for that? Trying to minimize my dependencies is all. :P I saw the :global psuedoclass, but not sure if that's what I'm looking for.

Pat Cavit

@tivac

I tend to use postcss-importfor those, in conjunction with an @import statement

You can run postcss-import in the after block, so it's after all the scoping transformations

and it'll effectively suck in the entire css file you point it at like it was all wrapped in :global()

There's probably a more elegant/integrated approach (or I should at least write that approach up for m-css.com) but it's what I've been using for years w/ relatively little effort.

Kevin Fiol

@kevinfiol

Great! I'll give that shot then. Thanks for the swift response.

Where communities thrive

People

Repo info

Activity