Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ignoreFunctions: [] to value-keyword-case #4648

Closed
FollowingFawn opened this issue Mar 12, 2020 · 2 comments · Fixed by #4733
Closed

Add ignoreFunctions: [] to value-keyword-case #4648

FollowingFawn opened this issue Mar 12, 2020 · 2 comments · Fixed by #4733
Labels
good first issue is good for newcomers status: ready to implement is ready to be worked on by someone type: new option a new option for an existing rule

Comments

@FollowingFawn
Copy link

FollowingFawn commented Mar 12, 2020

Clearly describe the bug

I am using stylelint and I have a several different custom color variables used in several properties such as border, background, color [using a non-standard t function].

Which rule, if any, is the bug related to?

value-keyword-case

What code is needed to reproduce the bug?

e.g.

a {
  border: 1px solid t(lightGray);
  background-color: t(lightBlue);
  color: var(--lightBlue);
}

What stylelint configuration is needed to reproduce the bug?

e.g.

{
  "rules": {
       "value-keyword-case": ["lower", {"ignoreKeywords": ["/^t(*)/"]}],
  }
}

Which version of stylelint are you using?

13.2.1

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

"force-app/main/default/**/*.css": [
  "stylelint --fix"
]

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

No

What did you expect to happen?

I want to either ignore any custom variable inside t() or var(--) or allow camelCasing.

What actually happened (e.g. what warnings or errors did you get)?

e.g. "The following warnings were flagged:"

Expected "digitalBlue" to be "digitalblue"   value-keyword-case    

Is there a way to either ignore camelCasing or ignore anything within t() or var(--)?, e.g.

"value-keyword-case": ["lower", {"ignoreKeywords": ["/^t(*)/"]}]
@jeddy3 jeddy3 changed the title Stylelint rule to value-keyword-case to ignore camelCase variables Add ignoreFunctions: [] to value-keyword-case Mar 13, 2020
@jeddy3 jeddy3 added good first issue is good for newcomers status: ready to implement is ready to be worked on by someone type: new option a new option for an existing rule labels Mar 13, 2020
@jeddy3
Copy link
Member

jeddy3 commented Mar 13, 2020

@FollowingFawn Thanks for the report and for using the template.

Is there a way to either ignore camelCasing or ignore anything within t() or var(--)?

Keywords within var functions are already ignored by the rule.

Given:

a {
  color: var(--camelCase);
  color: t(--camelCase);
}

We get:

3:12 error Expected "--camelCase" to be "--camelcase" (value-keyword-case)

As only the second declaration is reported as a violation. See this demo.

Keywords within t functions aren't ignored because t is a non-standard function. I recommend you only use var for variables. However, if this is not possible for some reason, we can add an ignoreFunctions optional secondary option to the rule:

{
  "rules": {
       "value-keyword-case": ["lower", {"ignoreFunctions": ["t"]}],
  }
}

I've labelled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to add a new option in the Developer guide.

@mattxwang
Copy link
Member

Just submitted a PR for this feature! #4733

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue is good for newcomers status: ready to implement is ready to be worked on by someone type: new option a new option for an existing rule
Development

Successfully merging a pull request may close this issue.

3 participants