ansumanshah / css-in-js

Autocomplete React Native / JS Styles and converting plain CSS to JS styles

Autocomplete for React Native and css-in-js for Atom and VS Code

Now get Autocomplete for CSSinJS libraries using object styles.

Installation

apm install css-in-js

Or go to Settings → Install and search for css-in-js

Usage

const btnA = css({ /* styles */ });
const btnB = glamorous.div({ /* styles */ });
const btnC = StyleSheet.create({ /* styles */ });

Only works for these keywords by default you can edit in settings for more.

glamorous | css | StyleSheet.create

Does not work for general objects

let styles = {
  /* styles */
}

This is basically a fork of autocomplete-css

CSS in JS for VS Code

Provides CSS in JS autocompletion and converts kebab-case CSS to camelCase CSS and vice versa

• Provides autocompletion options for CSS styles as a style object for use in CSS in JS (like glamorous!)
• Converts CSS between regular CSS syntax (strings) and CSS-in-JS syntax (style objects)

Autocomplete

Convert CSS in JS

How to Use CSS Conversion

Select some block of text in a javascript or typescript file and use cmd+shift+p to bring up the command palette, then select Convert CSS-in-JS.

Or use the keyboard shortcut cmd+shift+j (ctrl+shift+j on Windows).

---

Coming Soon

Codemods for easy shifting between css-in-js libraries

css-in-js's Issues

Css Conversion doesn't work for backgroundColor & boxShadow

Tried converting below cssInJs

 boxShadow: '0 4px 2.2px -45px rgba(0, 0, 0, 0.039),  0 10.1px 5.3px -45px rgba(0, 0, 0, 0.057),  0 19.1px 10px -45px rgba(0, 0, 0, 0.07),  0 32.8px 17.9px -45px rgba(0, 0, 0, 0.083),  0 52.2px 33.4px -45px rgba(0, 0, 0, 0.101),  0 75px 80px -45px rgba(0, 0, 0, 0.14)',
 backgroundColor: 'rgb(255, 255, 255)',

Nothing changed

Unitless Css Styles should not be converted to string

Expected Behaviour

css -> z-index: 1;
js -> zIndex: 1,

Actual Behaviour :-

css -> z-index: 1;
js -> zIndex: '1',

most of the Css-In-Js libraries do not support string unitless values.

Let me know if i need to send a PR to resolve it.

Please support other libraries as well

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.

vscode?

Support for vscode for autocomplete is on the cards, @paulmolluzzo are you back from that lovely vacation?

VS Code doesn't build properly

#7, and specifically cba15ac, introduced a bug for the build of the VS Code version. The build is now importing a common css-in-js-helpers package but it's not being transpiled through babel, throwing errors in the resulting build:

Activating extension `paulmolluzzo.convert-css-in-js` failed:  Unexpected token export
Here is the error stack:  /Users/molluzzp/css-in-js-package/packages/vscode-css-in-js/node_modules/css-in-js-helpers/index.js:28
export default function convert(s) {
^^^^^^
SyntaxError: Unexpected token export

The two possible solutions are:
1 - symlink the relevant files into the VS Code version and import them directly.
2 - include a transpilation/build step into the css-in-js-helpers package.

I'm inclined to go with the second option. @ansumanshah any thoughts or preferences?

Add extension to Open VSX Registry

Describe what's missing

The extension can't be found in Open VSX Registry (but an older deprecated version can).

Prettify css props / Aligning prefix

I would like to propose the following

1. Aligning prefix in same order
   

Any ideas or suggestions for improvements

[Feature proposal] Enable extension only on certain file

It would be nice to have some configuration parameter which allows to set some activation criteria for the extension.

Scenario:
I do not want the style autocomplete in every .js file in my project,
I have all the style in separate file, all of them are called somenameStyle.js, in configuration I can set the wildcard "*/*Style.js" to enable the extension only on those files.

Think about it, I love your project ;)

command 'extension.convertCSSinJS' not found

WIndows 10
VSCode 1.24.1

I'm getting this when trying to use the keyboard shortcut or when selecting the css and choosing "Convert CSS-In-JS."

I tried reinstalling and restarting VS Code but it didn't help.

Thanks

Err with CSS Conversion

Cannot read properties of undefined (reading 'length')

Activating extension 'paulmolluzzo.convert-css-in-js' fails in vscode.

css-in-js 1.1.1
vscode version 1.24.1
shell 1.7.12
renderer 58.0.3029.110
node 7.9.0
windows 10
no other extensions running.

console.ts:136 [Extension Host] Activating extension `paulmolluzzo.convert-css-in-js` failed:  Cannot read property 'properties' of undefined
t.log @ console.ts:136
t._logExtensionHostMessage @ extensionHost.ts:393
(anonymous) @ extensionHost.ts:210
emitTwo @ events.js:106
emit @ events.js:194
process.nextTick @ internal/child_process.js:766
_combinedTickCallback @ internal/process/next_tick.js:73
_tickCallback @ internal/process/next_tick.js:104

Breaks vscode quick suggestions inside strings

with extension disabled

with extension enabled

Support for typescript

It wold be great if we can add support for typescript files too.

Any plans?

Suggestions does not show automatically in vs code

Hello,

I use this plugin with vs code, but it does not work like this:

After inserting the css-key, the suggestions for the css values does not showing automatically. I have to type a letter to make it apear. Like this:

This is annoying, beacause I intuitively type quotes for the object-values, and when the autocomplete takes affect I permanently end up with multiple qoutes like tihs:

{
  color: 'tomato',
  textAlign: ''left','
}

Could you please fix either the one or the other?

Bug in camelCase css to kebab-case css conversion

When I tried to convert the below camelCase css to kebab-case css,

    fontSize: '14px',
    lineHeight: '25px',
    marginTop: '20px',
    textAlign: 'center'

the result is

    font-size: 14px;
    line-height: 25px;
    margin-top: 20px;
    textAlign: 'center'

It fails to convert the last line.
I looked into the code and found that the code use , as the separator and since the last line lacks , it fails to convert.
In cases of prettier config, "trailingComma": "none", it is not possible for me to have trailing comma.
It could be a simple fix to handle the last line and it would be significant to avoid bugs when relying on the extension to convert the css.
And I would love to raise the PR if any of the contributors acknowledges to proceed.
FYI : @paulmolluzzo @ansumanshah @mfunkie @zachgibson
Thanks in advance.

Please Update to Support the Latest Styles (e.g. space-evenly etc.)

Thank you for creating this great library. Could you please update the library to support the latest styles (e.g. space-evenly etc.)

Port to VS Code?

This plugin looks super solid! Any interest in porting it to VS Code? 🙏 🙏 🙏 😄

css={{...}} prop completion

having a great time with this plugin. would you consider supporting css={{...}} prop completion as well? this would work for glamor/glamorous/emotion. for reference - https://github.com/threepointone/glamor/blob/master/docs/createElement.md

happy to pitch in myself if you can point me to what file to hack on.

thanks again!

Always getting error on any file I use the cmd+shift+j shorcut on

Object styles

Many people prefer object styles over template strings. Is there anything stopping us from adding that feature? FWIW there is a PR submitted here:

#28

RFC: Project restructure and add Codemods

• Rename this project to css-in-js-helpers

Would like to have codemods for easy shifting between css-in-js libraries as part of this project with editor plugins
Any other suggestions and requests are welcome

Does not working on tsx

Its working in JS but I have my project in typescript. I try to add the extension in the setting but I can't find where I should to add.

Suggestions in jsx display everywhere

Hello,

I use this plugin with react in vs code. Sadly the suggestions appear the whole document arround. Would it be possible to display autocomplete suggestions only when they usefull?

DELETED

My account was compromised, as a result many spam issues got created across multiple repos. I am deleting all such issues. Please check my tweet: https://x.com/arghyac35/status/1729721954909684064?s=20

Invalid JavaScript syntax if the CSS property has a single-quote

First and foremost, awesome plugin I love it!

There is a problem that is slightly anoying though. When the CSS property is containing a single-quote, the JavaScript syntax is incorrect.

Example: if you transform: content: '';, the output will be content: '''', (4 single-quotes) which is incorrect. It should be either content: '""', or content: '\\\'\\\'',.

The worst example would be: content: 'I\'m bugged'; that will be transformed to content: ''I\'m bugged'',. It should be transformed to: '\'I\\\'m bugged\'', or '"I\\\'m bugged"'.

Or maybe it would be easier to use the backtick (`) in those situations.

Convert SVG attributes for React?

Feature request: it'd be great if this extension would also convert SVG attributes like fill-rule to JS-friendly camelCase. React will throw console warnings if you try to use an inline SVG image that uses a kebab-case attribute. Repro: https://codesandbox.io/s/determined-ishizaka-col9bc?file=/src/index.js

Here's an example:

const PinIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="17" fill="currentColor" viewBox="0 0 9 17">
    <path
      fill-rule="evenodd"
      d="M1 0h7s0 2.134-1.5 2.802v5.11C8.48 8.559 9 11.8 9 11.8H5.75l-.85 5h-.8l-.85-5H0s.41-3.277 2.5-3.899V2.788C1.064 2.104 1 0 1 0Zm4.1 8.767v-6.44c.457-.287.65-.827.65-.827h-2.5s.206.53.65.818v6.449C2.71 8.945 2.25 10.5 2.25 10.5h1.8l.45 2 .45-2h1.8S6.234 8.948 5.1 8.767Z"
      clip-rule="evenodd"
    />
  </svg>
);

Render this in a React app. Result:

react-dom.development.js:86 Warning: Invalid DOM property `fill-rule`. Did you mean `fillRule`?
    at path
    at svg
    ...

Instead, I need to convert to this:

const PinIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="17" fill="currentColor" viewBox="0 0 9 17">
    <path
      fillRule="evenodd"
      d="M1 0h7s0 2.134-1.5 2.802v5.11C8.48 8.559 9 11.8 9 11.8H5.75l-.85 5h-.8l-.85-5H0s.41-3.277 2.5-3.899V2.788C1.064 2.104 1 0 1 0Zm4.1 8.767v-6.44c.457-.287.65-.827.65-.827h-2.5s.206.53.65.818v6.449C2.71 8.945 2.25 10.5 2.25 10.5h1.8l.45 2 .45-2h1.8S6.234 8.948 5.1 8.767Z"
      clipRule="evenodd"
    />
  </svg>
);

Not working in .jsx files

Hi,
Autocomplete is working in .js files, but not in .jsx files ( no suggestion appears ).
Is it possible to make it work in .jsx files as well ?

Js to Css not support double quotes ?

Can't install css-in-js-helpers package

babel et al are hard dependencies during the postinstall script.

Please support Typescript

this is great extensions.
Please support autocomplete in Typescript.

Css Pseudo Class conversion to CSSinJs doesn't work as per JSS syntax

For my use case i had css with lots of Css Pseudo Classes
here is a demo example

.titleContainer {
display: flex;
flex-direction: row;
padding: 0 0 0 2rem;
}

.titleContainer:hover {
font-weight: 900;
}

Expected Behaviour ( as per JSS library ):-

"titleContainer": {
"display": "flex",
"flexDirection": "row",
"padding": "0 0 0 2rem",
"&:hover": {
"fontWeight": 900
}
}

Actual Behaviour :-

.titleContainer {
display: 'flex',
flexDirection: 'row',
padding: '0 0 0 2rem',
}

.titleContainer:hover {
fontWeight: '900',
}

Uncaught TypeError: Cannot read property 'forEach' of undefined

[Enter steps to reproduce:]

1. ...
2. ...

Atom: 1.38.2 x64
Electron: 2.0.18
OS: Mac OS X 10.14.5
Thrown From: css-in-js package 1.4.0

Stack Trace

Uncaught TypeError: Cannot read property 'forEach' of undefined

At /Users/zach/.atom/packages/css-in-js/lib/convertCSS.js:45

TypeError: Cannot read property 'forEach' of undefined
    at /packages/css-in-js/lib/convertCSS.js:45:25
    at Array.forEach (<anonymous>)
    at toJS (/packages/css-in-js/lib/convertCSS.js:40:9)
    at convert (/packages/css-in-js/lib/convertCSS.js:63:12)
    at Object.convert (/packages/css-in-js/lib/css-in-js.js:38:29)
    at HTMLElement.cssInJsConvert (/packages/css-in-js/lib/css-in-js.js:19:41)
    at CommandRegistry.handleCommandEvent (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11:348418)
    at Object.didConfirmSelection (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11:697714)
    at SelectListView.confirmSelection (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11:871573)
    at HTMLDivElement.core:confirm (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11:866452)
    at CommandRegistry.handleCommandEvent (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11:348418)
    at KeymapManager.t.exports.KeymapManager.dispatchCommandEvent (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11:1247210)
    at KeymapManager.t.exports.KeymapManager.handleKeyboardEvent (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11:1243344)
    at WindowEventHandler.handleDocumentKeyEvent (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11:283624)

Commands

     -8:40.6.0 core:paste (input.hidden-input)
     -8:39.7.0 core:save (input.hidden-input)
     -8:16.1.0 core:copy (input.hidden-input)
     -8:14.4.0 docblockr:parse-enter (input.hidden-input)
     -8:14.4.0 editor:newline (input.hidden-input)
     -8:14.2.0 docblockr:parse-enter (input.hidden-input)
     -8:14.2.0 editor:newline (input.hidden-input)
     -8:10.1.0 docblockr:parse-enter (input.hidden-input)
     -8:10.1.0 editor:newline (input.hidden-input)
     -8:07.0 core:copy (input.hidden-input)
     -8:06.5.0 core:paste (input.hidden-input)
     -8:02.2.0 core:cut (input.hidden-input)
     -7:55.7.0 core:save (input.hidden-input)
     -7:55.6.0 linter:lint (atom-text-editor.editor.is-focused)
     -7:42.8.0 core:save (input.hidden-input)
     -0:31.2.0 core:copy (input.hidden-input)

Non-Core Packages

autoclose-html 0.23.0 
autocomplete-paths 2.12.2 
block-comment-plus 0.5.1 
busy-signal 2.0.1 
carbon-now-sh 2.0.3 
css-in-js 1.4.0 
custom-app-icon 0.2.4 
docblockr 0.13.7 
double-tag 1.7.0 
emmet 2.4.3 
es6-javascript 1.0.0 
expand-region 0.5.0 
file-icons 2.1.33 
html-entities 0.4.0 
intentions 1.1.5 
language-babel 2.85.0 
language-mdx 0.1.0 
language-nunjucks 4.2.1 
linter 2.3.0 
linter-eslint 8.5.5 
linter-stylelint 4.4.9 
linter-ui-default 1.7.1 
open-this 0.5.0 
pigments 0.40.2 
platformio-ide-terminal 2.9.1 
prettier-atom 0.56.6 
sort-lines 0.19.0 
Sublime-Style-Column-Selection 1.7.5 
svg-preview 0.14.0 
sync-settings 0.8.6 
tabs-to-spaces 1.0.5 

Adapt for Sublime?

Hey, this is a great idea. I'd be glad to take a stab at adding support for Sublime Text as well. What do you think?

Autocomplete not working?

I have:
Atom: 1.25.0
css-in-js: 1.4.0 (with default settings)

I'm trying to get auto completion for JSS css-in-js code. As a workaround I've created a custom css() function that simply returns it's argument.

Code example:

const css = input => input;

const style = css({
  container: {
  }
});
export default style;

What could be going wrong here?

Support css to js conversion in css files

We can harmlessly support css to js conversion when the current file is css file likewise we do when the current file is js file.