search

forcedotcom / lwc-dev-server-feedback

LWC Local Development
BSD 3-Clause "New" or "Revised" License
45 stars 10 forks source link

CSS Variables break the local server. #76

Closed lukethacoder closed 3 months ago

lukethacoder commented 3 years ago

Describe the bug When using Web Standard CSS variables, the local dev server breaks.

:host {
  --brand-primary: red;
}

To Reproduce Steps to reproduce the behavior:

  1. open any LWC
  2. add a CSS Variable to any selector
  3. see error

Expected behavior It should not break the localdev server.

Screenshots

image

screenshot of the error thrown when attempting to use CSS Variables

Desktop:

Additional context

Seems almost related to https://github.com/forcedotcom/lwc-dev-server-feedback/issues/40 , but this is for standard css variables, not Salesforce Design Tokens.

stale[bot] commented 3 years ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

git2gus[bot] commented 3 years ago

This issue has been linked to a new work item: W-8132949

mad-magic commented 3 years ago

Can confirm - ran across same issue last week:

samuelcarreira-ibs commented 3 years ago

The bug persist since the API 49 (when I've started develop LWCs)! You can deploy to the org and it works, but you cannot use the :host CSS selector to target your host

stale[bot] commented 3 years ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

AllanOricil commented 2 years ago

This bug persists, but now it displays a different message.

image

Steps to reproduce:

declare any css host or root variable, like

:host {
    --simple-text-color: #aaaaaa;
    --strong-text-color: #585858;
}

start the dev server, open the component and verify the error message from the image above.

Acording to the docs, LWC does not allow root variables in the component level, so it is expected to display an error message. But host variables are possible, and they work inside a Salesforce org. So this error message should not happen in the dev server when we declare host variables

stale[bot] commented 2 years ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

impaler commented 2 years ago

I also just encountered this issue when following the salesforce Developer Guide "Create Styling Hooks for Your Components"

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_styling_hooks

Eg

:host {
    --important-color: red;
}

.important {
    color: var(--important-color);
}

And got the error message "Couldn't find the compiled component. If this component has a dependency on a component in the org or a component in a package in the org, test this component directly in the org."

The error is only present when using the css variables syntax.

It would be really nice to have support for this since its the recommended way in the docs to expose styling hooks to the components. Thank you.

stale[bot] commented 2 years ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

apop880 commented 2 years ago

Seeing this as well. Is there any workaround which will allow me to use CSS variables across my project but still test locally? image

stale[bot] commented 2 years ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

vilchesalves commented 2 years ago

How is this bug a p3?

It basically makes styling hooks as defined in the lwc guide unusable on a professional environment.

lukethacoder commented 2 years ago

Is there any update on this? Would love to be using the local dev server but I'm blocked by this issue not being resolved.

stale[bot] commented 2 years ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

andruts commented 2 years ago

Faced this issue today.

:host {
  --important-color: red;
}

CssSyntaxError: LWC1009: postcss-plugin-lwc: 2:3: Invalid definition of custom property "--important-color".

sfdx-cli/7.148.3 win32-x64 node-v14.17.1

dslagman commented 2 years ago

Experiencing the same issue: Uncaught SyntaxError: Unexpected token ':'

:host {
    --lwc-spacingSmall : 0.4rem;
}
mmorozov-noltic commented 2 years ago

Hey, how can we fix this problems? Any ideas?

stale[bot] commented 2 years ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

stale[bot] commented 2 years ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

mholowinski commented 2 years ago

Has anybody found a workaround for this?

attilah commented 2 years ago

The root of this cause is that dev server depends on an older version of style compiler which HAD this restriction. But this restriction was removed in this commit, so if Salesforce would update the LWC (and other) dependencies and release a new version of this dev server this specific problem would go away.

mmorozov-noltic commented 2 years ago

wow wow. Is is very good news. Thank you! I will wait this release!

lukethacoder commented 2 years ago

Any timelines on release? That PR was merged in a year ago?

Ashame this isn't open source, could allow the community to fork and keep it alive and working.

attilah commented 2 years ago

Not to their defense, but they are using a lot of not yet open sourced package so open sourcing the devserver would not be a small task, but it would be a great addition. My biggest concern on why they are not on it is the npm download counts...the dev server and other package stats are just so low...but of course it is a chicken-egg problem...

stale[bot] commented 1 year ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

stale[bot] commented 1 year ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

stale[bot] commented 1 year ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

balindersingh commented 1 year ago

I am seeing same issue CssSyntaxError: LWC1009: postcss-plugin-lwc: 3:5: Invalid definition of custom property ":--card-color"

erocheleau commented 1 year ago

Same issue here:

CssSyntaxError: LWC1009: postcss-plugin-lwc: 2:3: Invalid definition of custom property "--slds-c-checkbox-color-border".

When trying to edit :host variables that are listed under the styling hooks in the lightning design system documentation.

:host {
  --slds-c-checkbox-color-border: var(--lwc-colorTextIconDefault, #747474);
  --slds-c-checkbox-color-border-checked: var(--lwc-colorTextIconDefault, #747474);
}
stale[bot] commented 1 year ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

jsmithdev commented 1 year ago

Dang, over 2 years... I guess it'll be auto marked stale again soon and ignored but same issue with not being able to use CSS as documented by Salesforce. System is up to date.

CssSyntaxError: LWC1009: postcss-plugin-lwc: 2:5: Invalid definition of custom property

erocheleau commented 1 year ago

@jsmithdev Yea we've had to include a step in our readme to tell people who wanted to develop using the local dev server to "comment-out" the styling hooks usage...

stale[bot] commented 1 year ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

benjaminloerincz commented 1 year ago

"I guess it'll be auto marked stale again soon" :-(

stale[bot] commented 1 year ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

CavMejia commented 1 year ago

a pitty..... hope they put some more effort on this tool, really deserves it

nstuyvesant commented 1 year ago

So does this mean we can't use CSS custom properties in LWC or just that we can't test anything that uses it in the LWC development server?

In my case, I was not using :root - just a local class.

.spai-scores {
  --spai-stroke-width: 0.875rem;
  --spai-score-font-weight: 600;
  --spai-incomplete-stroke: #edeef4;
  --spai-dashed-stroke-color: white;

  --spai-major-score-diameter: 9.125rem;
  --spai-major-font-size: 2.875rem;

  --spai-minor-score-diameter: 5.938rem;
  --spai-minor-font-size: 1.5rem;
}
stale[bot] commented 1 year ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

lukethacoder commented 1 year ago

So does this mean we can't use CSS custom properties in LWC or just that we can't test anything that uses it in the LWC development server?

You can still use CSS variables; it just means you forfeit the local dev server

stale[bot] commented 1 year ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

todthomson commented 5 months ago

It would be really nice to have support for this since its the recommended way in the docs to expose styling hooks to the components. Thank you.

Indeed, the recommended (and only reasonable) way to style LWCs (Lightning Web Components) is to override the CSS variables in, e.g.

:host
{
    --slds-c-accordion-sizing-border: 0;
}

or a css class attached (for tighter scoping), e.g.

.accordion
{
    --slds-c-accordion-summary-color-background: #f5f5f5;
}

So, in my opinion, this bug is a P1, because it means you cannot use the LWC Dev Server in combination with the recommended way to style LWCs.

It does not give me any confidence to recommend Salesforce (in particular LWC development) when such a fundamental bug has gone unresolved for more than three years.

Please do the needful here and fix this bug.

Better yet, assign some development resources to at least fixing bugs in this offering (or remove it from your documentation, so as to not waste people's time like this).

Even better, why not open source this so that people can fix these bugs themselves?

stale[bot] commented 4 months ago

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

lukethacoder commented 3 months ago

After waiting about 4 years (and then seeing we won't be getting anything until at least 2025) I decided to build something myself over a few weekend or two.

Full support for CSS Variables and anything else you could want from the modern web.

lwc-garden-arg-types

lwc-garden-lighting-base-components