feat: initial commit

vscodeshift · Mar 9, 2020 · 610cb90 · 610cb90
1 parent 63c228a
commit 610cb90
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 36 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -2,5 +2,8 @@
   "extends": [
     "@jedwards1211/eslint-config-typescript",
     "eslint-config-prettier"
-  ]
+  ],
+  "rules": {
+    "@typescript-eslint/no-var-requires": 0
+  }
 }
diff --git a/README.md b/README.md
@@ -1,15 +1,121 @@
-# @vscodeshift/extension-skeleton
+# @vscodeshift/jss-codemorphs
 
-[![CircleCI](https://circleci.com/gh/vscodeshift/extension-skeleton.svg?style=svg)](https://circleci.com/gh/vscodeshift/extension-skeleton)
-[![Coverage Status](https://codecov.io/gh/vscodeshift/extension-skeleton/branch/master/graph/badge.svg)](https://codecov.io/gh/vscodeshift/extension-skeleton)
+[![CircleCI](https://circleci.com/gh/vscodeshift/jss-codemorphs.svg?style=svg)](https://circleci.com/gh/vscodeshift/jss-codemorphs)
+[![Coverage Status](https://codecov.io/gh/vscodeshift/jss-codemorphs/branch/master/graph/badge.svg)](https://codecov.io/gh/vscodeshift/jss-codemorphs)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/vscodeshift.extension-skeleton)](https://marketplace.visualstudio.com/items?itemName=vscodeshift.extension-skeleton)
+[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/vscodeshift.jss-codemorphs)](https://marketplace.visualstudio.com/items?itemName=vscodeshift.jss-codemorphs)
 
-skeleton for a VSCode extension for applying JSCodeshift transforms
+# **Convert CSS to JSS** Command
 
-# Using this skeleton
+## Example
 
-It's pretty simple, just replace the command defined in `package.json`, `src/extension.ts`
-and `test/suite/extension.test.ts` with the name you want, and import or implement the transform
-you want in `src/extension.ts`. Add multiple commands if you want.
+### Before
+
+```ts
+@keyframes alarm {
+  from {
+    color: red;
+  }
+  50% {
+    color: initial;
+  }
+  to {
+    color: red;
+  }
+}
+.foo {
+  color: green;
+  & .bar-qux, & .glorm:after {
+    color: red;
+  }
+  & .baz:after {
+    content: 'whoo';
+  }
+}
+.glorm {
+  color: green;
+  display: box;
+  display: flex-box;
+  display: flex;
+}
+.bar-qux {
+  color: white;
+  animation: alarm 1s linear infinite;
+}
+@media screen {
+  a {
+    text-decoration: none;
+    .foo {
+      color: brown;
+    }
+  }
+  .foo {
+    & .bar-qux {
+      color: orange;
+    }
+  }
+}
+```
+
+### Command
+
+```
+jscodeshift -t path/to/jss-codemorphs/css-to-jss.js <file>
+```
+
+### After
+
+```ts
+'@keyframes alarm': {
+  from: {
+    color: 'red',
+  },
+  '50%': {
+    color: 'initial',
+  },
+  to: {
+    color: 'red',
+  },
+},
+foo: {
+  color: 'green',
+  '& $barQux, & $glorm:after': {
+    color: 'red',
+  },
+  '& .baz:after': {
+    content: '"whoo"',
+  },
+},
+glorm: {
+  color: 'green',
+  display: 'flex',
+  fallbacks: [
+    {
+      display: 'box',
+    },
+    {
+      display: 'flex-box',
+    },
+  ],
+},
+barQux: {
+  color: 'white',
+  animation: '$alarm 1s linear infinite',
+},
+'@media screen': {
+  $foo: {
+    '& $barQux': {
+      color: 'orange',
+    },
+  },
+  '@global': {
+    a: {
+      textDecoration: 'none',
+      '& $foo': {
+        color: 'brown',
+      },
+    },
+  },
+},
+```
diff --git a/package.json b/package.json
@@ -1,24 +1,24 @@
 {
-  "name": "@vscodeshift/extension-skeleton",
+  "name": "jss-codemorphs",
   "version": "0.0.0-development",
-  "displayName": "@vscodeshift/extension-skeleton",
+  "displayName": "CSS/JSS Codemorphs",
   "publisher": "vscodeshift",
-  "description": "skeleton for a VSCode extension for applying JSCodeshift transforms",
+  "description": "command for converting from CSS to JSS",
   "engines": {
     "vscode": "^1.40.0"
   },
   "categories": [
     "Other"
   ],
   "activationEvents": [
-    "onCommand:extension.YOUR.COMMAND.HERE"
+    "onCommand:extension.cssToJss"
   ],
   "main": "./out/extension.js",
   "contributes": {
     "commands": [
       {
-        "command": "extension.YOUR.COMMAND.HERE",
-        "title": "YOUR TITLE HERE"
+        "command": "extension.cssToJss",
+        "title": "Convert CSS to JSS"
       }
     ]
   },
@@ -46,13 +46,13 @@
     ],
     "prepare": {
       "path": "semantic-release-vsce",
-      "packageVsix": "extension-skeleton.vsix"
+      "packageVsix": "jss-codemorphs.vsix"
     },
     "publish": [
       "semantic-release-vsce",
       {
         "path": "@semantic-release/github",
-        "assets": "extension-skeleton.vsix"
+        "assets": "jss-codemorphs.vsix"
       }
     ]
   },
@@ -100,19 +100,22 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/vscodeshift/extension-skeleton.git"
+    "url": "https://github.com/vscodeshift/jss-codemorphs.git"
   },
   "keywords": [
-    "vscode",
-    "jscodeshift",
-    "codemods"
+    "jss",
+    "css",
+    "css-in-jss",
+    "codemods",
+    "vscodeshift",
+    "jscodeshift"
   ],
   "author": "Andy Edwards",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/vscodeshift/extension-skeleton/issues"
+    "url": "https://github.com/vscodeshift/jss-codemorphs/issues"
   },
-  "homepage": "https://github.com/vscodeshift/extension-skeleton#readme",
+  "homepage": "https://github.com/vscodeshift/jss-codemorphs#readme",
   "devDependencies": {
     "@babel/cli": "^7.1.5",
     "@babel/core": "^7.1.6",
@@ -166,7 +169,8 @@
   "dependencies": {
     "@babel/runtime": "^7.1.5",
     "@vscodeshift/apply-jscodeshift": "^1.0.12",
-    "jscodeshift": "^0.7.0"
+    "jscodeshift": "^0.7.0",
+    "jss-codemorphs": "^1.0.0"
   },
   "renovate": {
     "extends": [

diff --git a/src/extension.ts b/src/extension.ts
@@ -1,14 +1,9 @@
 import * as vscode from 'vscode'
 import applyTransform from '@vscodeshift/apply-jscodeshift'
 
-const transform = (): string | void | null | undefined => {
-  // REPLACE ME
-}
-
 export function activate(context: vscode.ExtensionContext): void {
-  const disposable = vscode.commands.registerCommand(
-    'extension.YOUR.COMMAND.HERE',
-    () => applyTransform(transform)
+  const disposable = vscode.commands.registerCommand('extension.cssToJss', () =>
+    applyTransform(require('jss-codemorphs/css-to-jss'))
   )
 
   context.subscriptions.push(disposable)

diff --git a/src/test/suite/extension.test.ts b/src/test/suite/extension.test.ts
@@ -4,8 +4,4 @@ import * as vscode from 'vscode'
 
 suite('Extension Test Suite', () => {
   vscode.window.showInformationMessage('Start all tests.')
-
-  test('extension.YOUR.COMMAND.HERE command', async function() {
-    await vscode.commands.executeCommand('extension.YOUR.COMMAND.HERE')
-  })
 })
diff --git a/yarn.lock b/yarn.lock
@@ -2716,6 +2716,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -4491,6 +4496,11 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
 infer-owner@^1.0.3, infer-owner@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
@@ -5101,6 +5111,13 @@ jscodeshift-choose-parser@^1.0.0:
   dependencies:
     resolve "^1.15.0"
 
+jscodeshift-paths-in-range@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/jscodeshift-paths-in-range/-/jscodeshift-paths-in-range-1.1.0.tgz#accc511afd807094f274a497f136b6d338efda8d"
+  integrity sha512-Hy/wwoLxXxLQXnvo2wBnqMXgvQODaU5EdjJjQp/5sPhbBujSJa+8K+jV75uJC+TnPeOM7ofdvQu72P6l/idn9g==
+  dependencies:
+    "@babel/runtime" "^7.1.5"
+
 jscodeshift@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.7.0.tgz#4eee7506fd4fdacbd80340287d61575af991fdab"
@@ -5194,6 +5211,18 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jss-codemorphs@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/jss-codemorphs/-/jss-codemorphs-1.0.1.tgz#625bd7603ecc0e6088fb5f40967c627752000942"
+  integrity sha512-hjg28hG8dVSahb+5abGIRbg5CY7H1BzlEnTueL0iztLsRqF1ilsRT+SYRK9YUuDCLfxNOLKN5U8quk31ijTi6g==
+  dependencies:
+    "@babel/runtime" "^7.1.5"
+    jscodeshift-paths-in-range "^1.0.0"
+    lodash "^4.17.15"
+    postcss "^7.0.26"
+    postcss-selector-parser "^6.0.2"
+    recast "^0.18.5"
+
 keypress@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/keypress/-/keypress-0.2.1.tgz#1e80454250018dbad4c3fe94497d6e67b6269c77"
@@ -7194,6 +7223,24 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-selector-parser@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
+  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
+  dependencies:
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss@^7.0.26:
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9"
+  integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -7567,6 +7614,16 @@ recast@^0.18.1:
     private "^0.1.8"
     source-map "~0.6.1"
 
+recast@^0.18.5:
+  version "0.18.7"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.18.7.tgz#56338a6d803c8c3b9113344440dc70d13c8a1ef7"
+  integrity sha512-qNfoxvMkW4k8jJgNCfmIES7S31MEejXcEQs57eKUcQGiJUuX7cXNOD2h+W9z0rjNun2EkKqf0WvuRtmHw4NPNg==
+  dependencies:
+    ast-types "0.13.2"
+    esprima "~4.0.0"
+    private "^0.1.8"
+    source-map "~0.6.1"
+
 redent@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
@@ -8985,6 +9042,11 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
 unique-filename@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"