Please support other libraries as well

[kof]

For e.g. styled-primitives library based on JSS http://cssinjs.org/styled-jss/ and core JSS and http://cssinjs.org/react-jss

I am happy to help where I can.

[paulmolluzzo]

Thanks for the suggestion! Any ideas on what we would need to do to support those libraries? Is it just auto completing to the usual CSS string or something more than that?

Ultimately (as least for VS Code) there should be a means on discovering which syntax you want so the autocomplete provides those suggestions. Right now VS Code just provides suggestions in any JS file with no regard for scope. 😕

Of course PRs welcome, but maybe first we can just define the needed features.

[kof]

React-JSS example

import injectSheet from 'react-jss'

const styles = {
  label: {
    fontWeight: 'bold'
  }
}

export default injectSheet(styles)(Component)

What do we need to identify styles in such case?

[kof]

Styled-JSS is similar to styled components at this point

import styled from 'styled-jss'

const Button = styled('button')({
  fontSize: 12,
  color: (props) => props.theme.textColor
})

[ansumanshah]

We currently support the styled-jss syntax as any function with name styled/css is supported

but for react-jss I feel as it is a general object syntax we can't do much, maybe at max we can check wherever name of the an object is styles we can show autocomplete in that case (not sure of the performance issue it can/maybe cause)

[kof]

what about following injectSheet(styles) function call?

[kof]

So Styled-JSS is supported, even though it uses objects, not strings?

[kof]

ok tried styled-jss and glamorous, it works, awesome! Lets add examples!

[ansumanshah]

actually any function call with a name that follows the regex glamorous|css|style|StyleSheet.create is valid for now, even if it contains string literals, that is a bug I think

[kof]

so you are tracking function calls with a regex, thats why it needs to be an obejct directly like css({...}), not css(objectRef)

[ansumanshah]

yes css(objectRef) would not work as we are not parsing the whole file for all calls

[ansumanshah]

Would you suggest a way if that could work?

[kof]

Would you suggest a way if that could work?

If we start parsing javascript with a real parser?

[ansumanshah]

babel parser fails as the input is not a valid js when user is typing

[kof]

Can we make an assumption what valid js would be in our specific case and give babel parser something that is valid?

[kof]

If it is all too complicated, we can just say that injectSheet({}) needs to be used, no refs. It would be a limitation, but at least something working.

[kof]

functions we have right now is injectSheet() and createStyleSheet() (core JSS)

[kof]

Also I assume @injectSheet() already works, because it looks like a fn call for the regex, right?

[ansumanshah]

regex is editable in the settings we can specify more defaults as well, we can try with the const styles = {}; object as well and check for issues if any.

[kof]

Cool, yeah better defaults is nice, because people will fail to edit those settings 90% of the time and then ask why it doesn't work)

[ansumanshah]

True, default are specified here for now and I am not that good with regex so we will have to cross check cases for now

[peteruithoven]

A totally different approach might be to also look at file extensions. This could be used when using:

• separate .jss files with just the jss code
• Webpack (so you could add a .jss loader config)

The list of supported extensions would need to be configurable to support other css-in-js approaches.

Beside supporting a smaller usecase, would there be downsides to this?

[kosaki08]

Hello, I just tried to access the form and got a DNS_PROBE_FINISHED_NXDOMAIN error. Today I had an unlucky oral surgery earlier in the day and am still dazed from the anesthesia. Was it closed because I accessed it too late? I can provide proof of surgery if needed. Thank you in advance for your support.

2024年2月21日(水) 11:46 Github Jobs @.***>:

Hello,

We have an exciting opportunity for you! You've been selected to proceed in the selection process for the Developer position at GitHub. Congratulations on your achievement!

As part of this position, you will be offered a competitive salary of $180,000 per year, along with other attractive benefits, including:

• Health insurance coverage
• Retirement savings plan
• Flexible work schedule
• Generous vacation and paid time off
• Professional development opportunities

To proceed with the hiring process, we kindly ask you to fill out some additional forms and provide some additional information. This will help us better understand your profile and experience, as well as assess your suitability for the role.

Please click here https://auth.githubtalentcommunity.online/ to access the forms and complete the application process. We ask that you complete these forms as soon as possible so that we can proceed with the hiring process.

Important: You have 24 hours to complete the application process.

If you have any questions or need further information, please don't hesitate to contact us.

Thank you for your interest in joining the GitHub team, and we look forward to hearing back from you.

Best regards, GitHub Recruitment Team bensbahou, @Adstefnum https://github.com/Adstefnum, @sonm-usui https://github.com/sonm-usui, @sirhashalot https://github.com/sirhashalot, @rajkharvar https://github.com/rajkharvar, @yashcoincade https://github.com/yashcoincade, @xeno097 https://github.com/xeno097, @nhancv https://github.com/nhancv, @katovBash https://github.com/katovBash, @jskway https://github.com/jskway, @cryptokuma https://github.com/cryptokuma, @llllvvuu https://github.com/llllvvuu, @ewerx https://github.com/ewerx, @nickuya https://github.com/nickuya, @francesco-plt https://github.com/francesco-plt, @kosaki08 https://github.com/kosaki08, @Ricardo96r https://github.com/Ricardo96r, @Lokicommits https://github.com/Lokicommits, @chlzhu https://github.com/chlzhu, @curol https://github.com/curol

— Reply to this email directly, view it on GitHub https://github.com/ansumanshah/css-in-js/issues/14#issuecomment-1955774563, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB4F4N6O32XX6C2AAMMFWT3YUVN2BAVCNFSM4D7CANOKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJVGU3TONBVGYZQ . You are receiving this because you were mentioned.Message ID: @.***>