feat: CSS modules (early experimental support)

[chaance]

Hi

[MichaelDeBoey]

@chaance It seems like we have some conflicts to resolve here

[wingleung]

@chaance just letting you know, I've been testing this in a PoC we're running and found out the :global and :local doesn't seem to resolve correctly.

for example, if the source css has the following code

:global .someGlobalClass :local .aLocalClass {
  background: red;
}

usually with parcel, which I think remix uses for css modules, it gets compiled to something like this

.someGlobalClass ._src_styles_module__aLocalClass {
  background: red;
}

however in this remix implementation I currently run into something like this, where .header-module is just the place where I use the :global/:local scope

:global .header-module__wSWGuW_someGlobalClass :local .header-module__wSWGuW_aLocalClass {
  background: red;
}

[devongovett]

The :global and :local pseudo classes are not supported by Parcel CSS without the function syntax. Eg :global(.someGlobalClass)

[wingleung]

thanks @devongovett! that seems to work idd.

It's odd because I tested it with Parcel 2 and it did seem to compile correctly with just :global and :local
👉 https://codesandbox.io/s/parcel-2-css-modules-example-forked-tcejyi?file=/src/styles.module.css

[devongovett]

Yes, Parcel 2 falls back to postcss-modules when it detects legacy syntax for backward compatibility.

[wingleung]

@chaance @devongovett when I use the url() function, the value in the url() gets hashed but never replaced again with the final result.

input

.container {
  background-image: url(https://images.unsplash.com/photo-1593288942460-e321b92a6cde)
}

output

.layout-module___9D6bia_container {
    background-image: url(mHxWpW);
}

This is because analyzeDependencies is set to true here but there is no process to replace those hashes with the actual results. more info

Does it need to be enabled? if so, we need to add a process to replace the hashes with the final urls again.

[wingleung]

any updates on this? 🙂

[chaance]

@wingleung This is on hold as we're working on some bigger compiler updates that may impact our implementation quite a bit. I'm working on a public roadmap for this and other work to provide some transparency here.

[mikestopcontinues]

To anyone landing on this page, active work is happening here...

[chaance]

Closing in favor of #4852