Merge pull request #15 from ember-codemods/component-css

Add support for `ember-component-css`

Author: Turbo87

lib/__tests__/__snapshots__/transform.js.snap

@@ -119,6 +119,30 @@ foo
 =========="
 `;
 
+exports[`handles \`hasComponentCSS\` option correctly 1`] = `
+"==========
+
+    export default Component.extend({
+      classNames: ['foo', 'bar:baz'],
+    });
+  
+~~~~~~~~~~
+foo
+~~~~~~~~~~
+ => tagName: div
+~~~~~~~~~~
+
+    export default Component.extend({
+      tagName: \\"\\",
+    });
+  
+~~~~~~~~~~
+<div class=\\"{{styleNamespace}} foo bar:baz\\" ...attributes>
+  foo
+</div>
+=========="
+`;
+
 exports[`handles single \`classNames\` item correctly 1`] = `
 "==========
 

lib/__tests__/transform.js

@@ -1,7 +1,7 @@
 const { transform } = require('../transform');
 
-function generateSnapshot(source, template) {
-  let result = transform(source, template);
+function generateSnapshot(source, template, options = {}) {
+  let result = transform(source, template, options);
 
   return `==========
 ${source}
@@ -190,3 +190,15 @@ test('multi-line template', () => {
 
   expect(generateSnapshot(source, template)).toMatchSnapshot();
 });
+
+test('handles `hasComponentCSS` option correctly', () => {
+  let source = `
+    export default Component.extend({
+      classNames: ['foo', 'bar:baz'],
+    });
+  `;
+
+  let template = `foo`;
+
+  expect(generateSnapshot(source, template, { hasComponentCSS: true })).toMatchSnapshot();
+});

lib/index.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const pkgDir = require('pkg-dir');
 const globby = require('globby');
 const debug = require('debug')('tagless-ember-components-codemod');
@@ -16,15 +17,18 @@ async function runForPath(path, options = {}) {
 
   let log = options.log || console.log;
 
-  // TODO check for ember-component-css dependency
-
   log(` 🔍  Searching for component files...`);
   let paths = await globby('app/components/**/*.js', { cwd: path });
   debug('componentPaths = %O', paths);
 
+  let pkgContent = fs.readFileSync(`${path}/package.json`);
+  let pkg = JSON.parse(pkgContent);
+  let hasComponentCSS =
+    pkg.dependencies['ember-component-css'] || pkg.devDependencies['ember-component-css'];
+
   for (let path of paths) {
     try {
-      let tagName = transformPath(path);
+      let tagName = transformPath(path, { hasComponentCSS });
       if (tagName) {
         log(chalk.green(`${chalk.dim(path)}: <${tagName}>...</${tagName}>`));
       } else {

lib/transform.js

@@ -48,7 +48,7 @@ const EVENT_HANDLER_METHODS = [
 
 const PLACEHOLDER = '@@@PLACEHOLDER@@@';
 
-function transformPath(componentPath) {
+function transformPath(componentPath, options) {
   let debug = (fmt, ...args) => _debug(`${componentPath}: ${fmt}`, ...args);
 
   let templatePath = guessTemplatePath(componentPath);
@@ -60,7 +60,7 @@ function transformPath(componentPath) {
   let source = fs.readFileSync(componentPath, 'utf8');
   let template = fs.readFileSync(templatePath, 'utf8');
 
-  let result = transform(source, template, { debug });
+  let result = transform(source, template, Object.assign({}, { debug }, options));
 
   if (result.tagName) {
     fs.writeFileSync(componentPath, result.source, 'utf8');
@@ -178,6 +178,9 @@ function transform(source, template, options = {}) {
 
   // wrap existing template with root element
   let classNodes = [];
+  if (options.hasComponentCSS) {
+    classNodes.push(b.mustache('styleNamespace'));
+  }
   for (let className of classNames) {
     classNodes.push(b.text(className));
   }