Lerna

.gitignore

@@ -1,3 +1,7 @@
 .DS_Store
-npm-debug.log
+.idea
 node_modules
+dist
+*.log
+yarn.lock
+package-lock.json

README.md

@@ -1,49 +1,21 @@
-# Atom Autocomplete for React Native and css-in-js [![Star on GitHub][github-star-badge]][github-star][![Tweet][twitter-badge]][twitter]
+# CSS in JS for Atom and VS Code
+
+## Atom Autocomplete for React Native and css-in-js [![Star on GitHub][github-star-badge]][github-star][![Tweet][twitter-badge]][twitter]
 
 [![PRs Welcome][prs-badge]][prs]
 [![Version][version-badge]][package]
 [![MIT License][license-badge]][LICENSE]
 
 Now get Autocomplete for CSSinJS libraries using object styles.
 
-## Installation
+### Installation
 ```
 apm install css-in-js
 ```
 Or go to Settings → Install and search for `css-in-js`
 
 <a href="https://app.codesponsor.io/link/jZ7oK2ZsGezatDv9YZW6fM3e/ansumanshah/css-in-js" rel="nofollow"><img src="https://app.codesponsor.io/embed/jZ7oK2ZsGezatDv9YZW6fM3e/ansumanshah/css-in-js.svg" style="width: 888px; height: 68px;" alt="Sponsor" /></a>
 
-## Usage
-```js
-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`
-
-![ReactNative][native-demo]
-
-![Autocomplete][autocomplete-demo]
-
-Does not work for general objects
-```js
-let styles = {
-  /* styles */
-}
-```
-This is basically a fork of [autocomplete-css](https://github.com/atom/autocomplete-css)
-
-<kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>J</kbd> to convert the css lines to js
-
-![Convert][converter-demo]
-
-Coming Soon
-
-*Codemods for easy shifting between css-in-js libraries*
-
 [autocomplete-demo]: https://github.com/ansumanshah/css-in-js/raw/master/cssinjs.gif
 [native-demo]: https://github.com/ansumanshah/css-in-js/raw/master/native.gif
 [converter-demo]: https://github.com/ansumanshah/css-in-js/raw/master/example.gif
@@ -59,3 +31,11 @@ Coming Soon
 [license]: https://github.com/ansumanshah/css-in-js/blob/master/LICENSE
 [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
 [prs]: http://makeapullrequest.com
+
+## Convert CSS in JS
+
+> Convert kebab-case CSS to camelCase CSS and vice versa
+
+Converts CSS between regular CSS syntax (strings) and CSS-in-JS syntax (style objects)
+
+![demo](https://user-images.githubusercontent.com/737065/28219279-6ffbf4c4-6889-11e7-8d3d-51637fe90856.gif)

lerna.json

@@ -0,0 +1,7 @@
+{
+  "lerna": "2.1.2",
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.0.0"
+}

package.json

@@ -1,40 +1,5 @@
 {
-  "name": "css-in-js",
-  "main": "./lib/css-in-js",
-  "version": "1.4.0",
-  "description": "Autocomplete JS and React Native styles, and converting copied CSS to JS styles and vice versa",
-  "repository": "https://github.com/ansumanshah/css-in-js",
-  "license": "MIT",
-  "providedServices": {
-    "autocomplete.provider": {
-      "versions": {
-        "2.0.0": "getProvider"
-      }
-    }
-  },
-  "scripts": {
-    "update-css": "node scripts/css/completions.js",
-    "update-rn": "node scripts/rn/completions.js"
-  },
-  "keywords": [
-    "atom",
-    "autocomplete",
-    "react",
-    "react-native",
-    "glamourous",
-    "glamour",
-    "snippets"
-  ],
-  "engines": {
-    "atom": ">=1.0.0 <2.0.0"
-  },
-  "dependencies": {
-    "css": "^2.2.1",
-    "stringify-object": "^3.2.0"
-  },
-  "devDependencies": {
-    "path": "^0.12.7",
-    "react-docgen": "3.0.0-beta6",
-    "request": "^2.81.0"
-  }
+	"devDependencies": {
+		"lerna": "^2.1.2"
+	}
 }

packages/atom-css-in-js/README.md

@@ -0,0 +1,61 @@
+# Atom Autocomplete for React Native and css-in-js [![Star on GitHub][github-star-badge]][github-star][![Tweet][twitter-badge]][twitter]
+
+[![PRs Welcome][prs-badge]][prs]
+[![Version][version-badge]][package]
+[![MIT License][license-badge]][LICENSE]
+
+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`
+
+<a href="https://app.codesponsor.io/link/jZ7oK2ZsGezatDv9YZW6fM3e/ansumanshah/css-in-js" rel="nofollow"><img src="https://app.codesponsor.io/embed/jZ7oK2ZsGezatDv9YZW6fM3e/ansumanshah/css-in-js.svg" style="width: 888px; height: 68px;" alt="Sponsor" /></a>
+
+## Usage
+```js
+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`
+
+![ReactNative][native-demo]
+
+![Autocomplete][autocomplete-demo]
+
+Does not work for general objects
+```js
+let styles = {
+  /* styles */
+}
+```
+This is basically a fork of [autocomplete-css](https://github.com/atom/autocomplete-css)
+
+<kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>J</kbd> to convert the css lines to js
+
+![Convert][converter-demo]
+
+Coming Soon
+
+*Codemods for easy shifting between css-in-js libraries*
+
+[autocomplete-demo]: https://github.com/ansumanshah/css-in-js/raw/master/cssinjs.gif
+[native-demo]: https://github.com/ansumanshah/css-in-js/raw/master/native.gif
+[converter-demo]: https://github.com/ansumanshah/css-in-js/raw/master/example.gif
+
+[github-star-badge]: https://img.shields.io/github/stars/ansumanshah/css-in-js.svg?style=social
+[github-star]: https://github.com/ansumanshah/css-in-js/stargazers
+[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20Atom%20Autocomplete%20css-in-js!%20https://github.com/ansumanshah/css-in-js%20%F0%9F%91%8D
+[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/ansumanshah/css-in-js.svg?style=social
+
+[version-badge]: https://img.shields.io/apm/v/css-in-js.svg?style=flat-square
+[package]: https://atom.io/packages/css-in-js
+[license-badge]: https://img.shields.io/apm/l/css-in-js.svg?style=flat-square
+[license]: https://github.com/ansumanshah/css-in-js/blob/master/LICENSE
+[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs]: http://makeapullrequest.com

packages/atom-css-in-js/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "css-in-js",
+  "main": "./lib/css-in-js",
+  "version": "1.4.0",
+  "description": "Autocomplete JS and React Native styles, and converting copied CSS to JS styles and vice versa",
+  "repository": "https://github.com/ansumanshah/css-in-js",
+  "license": "MIT",
+  "providedServices": {
+    "autocomplete.provider": {
+      "versions": {
+        "2.0.0": "getProvider"
+      }
+    }
+  },
+  "scripts": {
+    "update-css": "node scripts/css/completions.js",
+    "update-rn": "node scripts/rn/completions.js"
+  },
+  "keywords": [
+    "atom",
+    "autocomplete",
+    "react",
+    "react-native",
+    "glamourous",
+    "glamour",
+    "snippets"
+  ],
+  "engines": {
+    "atom": ">=1.0.0 <2.0.0"
+  },
+  "dependencies": {
+    "css": "^2.2.1",
+    "stringify-object": "^3.2.0"
+  },
+  "devDependencies": {
+    "path": "^0.12.7",
+    "react-docgen": "3.0.0-beta6",
+    "request": "^2.81.0"
+  }
+}

packages/css-in-js-helpers/index.js

@@ -0,0 +1,33 @@
+const getBeginningWhitespace = string =>
+  string.match(/^\s+/) !== null ? string.match(/^\s+/)[0] : '';
+
+const isCSS = item => (item.match(/;/g) || []).length === 1;
+
+const isJS = item => (item.match(/,/g) || []).length === 1;
+
+const toHyphen = prop =>
+  prop.replace(/([A-Z])/g, char => `-${char[0].toLowerCase()}`);
+
+const toCamel = prop =>
+  prop.replace(/-(\w|$)/g, (dash, next) => next.toUpperCase());
+
+const toJS = item => {
+  const [prop, val] = item.split(':');
+  return `${getBeginningWhitespace(prop)}${toCamel(
+    prop.trim()
+  )}: '${val.trim().replace(';', '')}',`;
+};
+
+const toCSS = item => {
+  const [prop, val] = item.split(':');
+  return `${getBeginningWhitespace(prop)}${toHyphen(
+    prop.trim()
+  )}: ${val.trim().replace(/'|,/g, '')};`;
+};
+
+export default function convert(s) {
+  const lines = s.split('\n');
+  return lines
+    .map(item => (isCSS(item) ? toJS(item) : isJS(item) ? toCSS(item) : item))
+    .join('\n');
+}

packages/css-in-js-helpers/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "css-in-js-helpers",
+  "version": "1.0.0",
+  "description": "CSS in JS helpers",
+  "main": "index.js",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ansumanshah/css-in-js.git"
+  },
+  "keywords": [
+    "CSSinJS"
+  ],
+  "author": "Ansuman Shah",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ansumanshah/css-in-js/issues"
+  },
+  "homepage": "https://github.com/ansumanshah/css-in-js#readme"
+}

packages/vscode-css-in-js/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

packages/vscode-css-in-js/.vscode/extensions.json

@@ -0,0 +1 @@
+{}

packages/vscode-css-in-js/.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+    "version": "0.1.0",
+    "configurations": [
+        {
+            "name": "Launch Extension",
+            "type": "extensionHost",
+            "request": "launch",
+            "runtimeExecutable": "${execPath}",
+            "args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
+            "stopOnEntry": false
+        }
+    ]
+}

packages/vscode-css-in-js/.vscode/settings.json

@@ -0,0 +1 @@
+{}

packages/vscode-css-in-js/CHANGELOG.md

@@ -0,0 +1,17 @@
+## 0.3.0
+- Add support for typescript files
+
+## 0.2.1
+- Update package.json info for marketplace
+
+## 0.2.0
+- Change current line if nothing is selected
+
+## 0.1.0
+- Add in keyboard shortcut for converting text
+
+## 0.0.2
+- Change header color for VS Code marketplace
+
+## 0.0.1
+- Initial release

packages/vscode-css-in-js/README.md

@@ -0,0 +1,24 @@
+# Convert CSS in JS
+
+> Convert kebab-case CSS to camelCase CSS and vice versa
+
+Converts CSS between regular CSS syntax (strings) and CSS-in-JS syntax (style objects)
+
+![demo](https://user-images.githubusercontent.com/737065/28219279-6ffbf4c4-6889-11e7-8d3d-51637fe90856.gif)
+
+
+## How to Use
+
+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).
+
+# Thanks
+
+Thanks to [Ansuman Shah](https://github.com/ansumanshah) for making [css-in-js](https://github.com/ansumanshah/css-in-js) for Atom. I basically copied what was done in that repo. 😃
+
+---
+
+MIT
+
+© 2017 Paul Molluzzo

packages/vscode-css-in-js/jsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es6",
+        "lib": [
+            "es6"
+        ]
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}