Unable to get code component CSS styles to appear correctly in Plasmic Studio

Issues
1

I’ve followed the NextJS installation guide for Plasmic and that worked wonderfully. I have my own custom components showing up in Plasmic and rendering on my local site.

The only issue is I’m using CSS Modules to apply styling to some opinionated components. The CSS Module styling doesn’t seem to be showing up in either Plasmic or my local dev environment when injected via Plasmic.

I found this CLI setup tutorial which mentions CSS Modules are supported, but it references a few things that aren’t covered in the NextJS setup tutorial (e.g. plasmic.json)

I installed the CLI, set up plasmic.json with the following config and am still getting unstyled components.

  "style": {
    "scheme": "css-modules",
    "defaultStyleCssFilePath": ""
  },

Going to keep poking around and see what I can figure out, but any guidance would be appreciated :pray:

2

Hello! The CLI is only for users who are trying to do codegen instead of the more common headless api/plasmicloader.

When you say that you are trying to use CSS modules, do you mean you have some handwritten CSS modules applied to some handwritten components, but when you register and insert those components in Plasmic Studio, the styles don’t appear correctly?

Would you have a small GitHub repo example of this? Or feel free to share a private repo with us to take a look. https://docs.plasmic.app/learn/collaborating-with-plasmic/

3

Thanks re: CLI!

do you mean you have some handwritten CSS modules applied to some handwritten components, but when you register and insert those components in Plasmic Studio, the styles don’t appear correctly?
Correct.

I just added plasmicops to the GitHub repo. It’s very small, only just started :slightly_smiling_face:

branchlabs/branchlabs is the project name

4

Oh, I need to push the plasmic branch too. One second.

5

Code is on the plasmic branch now :thumbsup:

6

I found the issue I think :thinking_face: Default styles applied by Plasmic?

It’s overriding my higher-level styling. E.g. I applied a white text color at the parent div level, and that’s pulled in just fine.

Screen Shot 2021-11-13 at 11.52.24 AM.png
Screen Shot 2021-11-13 at 11.52.24 AM.png970×276 34 KB

7

Editor > Styles > Remove All Styles is working, I think…

8

Well, there’s progress. But the Plasmic reset is still causing havoc. Some text areas have the correct color, some are still black. None of them have the right font (I added my local font in the Plasmic editor to no avail)

9

It seems Plasmic has stopped pulling in recent updates now? I’ve replaced the component I was originally testing with with a basic text field. The old component is still showing on my site up and the new Plasmic-provided text-only field is not :thinking_face:

10

Blew away the .next/ folder, including .plasmic inside it. Still no updates. Probably going to step away for a few

11

Taking a look now…

12

No pressure at all. It’s a weekend lol. Just keeping anyone on the Plasmic team who ends up in this thread appraised of my current situation :slightly_smiling_face:

13

following up over dm