Merge pull request #374 from zendesk/luis/themes-migrate-css-js

feat(themes): send style.css and script.js through themes:migrate

Author: luis-almeida

packages/zcli-themes/src/lib/migrate.test.ts

@@ -1,4 +1,6 @@
 import * as sinon from 'sinon'
+import * as fs from 'fs'
+import * as path from 'path'
 import { expect } from '@oclif/test'
 import * as getManifest from './getManifest'
 import * as getTemplates from './getTemplates'
@@ -7,6 +9,7 @@ import * as getAssets from './getAssets'
 import * as rewriteManifest from './rewriteManifest'
 import * as rewriteTemplates from './rewriteTemplates'
 import * as rewriteAssets from './rewriteAssets'
+import * as rewriteJsAndCss from './rewriteJsAndCss'
 import * as axios from 'axios'
 import { request } from '@zendesk/zcli-core'
 import migrate from './migrate'
@@ -39,8 +42,13 @@ describe('migrate', () => {
     const rewriteManifestStub = sinon.stub(rewriteManifest, 'default')
     const rewriteTemplatesStub = sinon.stub(rewriteTemplates, 'default')
     const rewriteAssetsStub = sinon.stub(rewriteAssets, 'default')
+    const rewriteJsAndCssStub = sinon.stub(rewriteJsAndCss, 'default')
+    const readFileSyncStub = sinon.stub(fs, 'readFileSync')
     const requestStub = sinon.stub(request, 'requestAPI')
 
+    readFileSyncStub.withArgs(path.join('theme/path', 'style.css'), 'utf8').returns('body { color: red; }')
+    readFileSyncStub.withArgs(path.join('theme/path', 'script.js'), 'utf8').returns('console.log("hi")')
+
     getManifestStub.withArgs('theme/path').returns(manifest)
     getTemplatesStub.withArgs('theme/path').returns({
       home_page: '<h1>Home</h1>',
@@ -87,7 +95,9 @@ describe('migrate', () => {
           templates: {
             home_page: '<h1>Updated Home</h1>',
             'article_pages/product_updates': '<h1>Updated Product updates</h1>',
-            'custom_pages/faq': '<h1>Updated FAQ</h1>'
+            'custom_pages/faq': '<h1>Updated FAQ</h1>',
+            css: '/* migrated css */',
+            js: '/* migrated js */'
           },
           assets: {
             'category_tree.js': Buffer.from('console.log("tree")').toString('base64')
@@ -112,6 +122,8 @@ describe('migrate', () => {
               home_page: '<h1>Home</h1>',
               'article_pages/product_updates': '<h1>Product updates</h1>',
               'custom_pages/faq': '<h1>FAQ</h1>',
+              css: 'body { color: red; }',
+              js: 'console.log("hi")',
               assets: {
                 'background.png': 'background.png'
               },
@@ -135,6 +147,13 @@ describe('migrate', () => {
       })
     ).to.equal(true)
 
+    expect(
+      rewriteJsAndCssStub.calledWith('theme/path', {
+        css: '/* migrated css */',
+        js: '/* migrated js */'
+      })
+    ).to.equal(true)
+
     expect(
       rewriteAssetsStub.calledWith('theme/path', {
         'category_tree.js': Buffer.from('console.log("tree")').toString('base64')
@@ -145,6 +164,7 @@ describe('migrate', () => {
   })
 
   it('propagates AxiosError on request failure', async () => {
+    sinon.stub(fs, 'readFileSync').returns('')
     sinon.stub(getManifest, 'default').returns(manifest)
     sinon.stub(getTemplates, 'default').returns({})
     sinon.stub(getVariables, 'default').returns([])

packages/zcli-themes/src/lib/migrate.ts

@@ -1,3 +1,5 @@
+import * as fs from 'fs'
+import * as path from 'path'
 import type { MigrateResponse, MigrationReport } from '../types'
 import getManifest from './getManifest'
 import getTemplates from './getTemplates'
@@ -7,12 +9,15 @@ import { request } from '@zendesk/zcli-core'
 import rewriteTemplates from './rewriteTemplates'
 import rewriteManifest from './rewriteManifest'
 import rewriteAssets from './rewriteAssets'
+import rewriteJsAndCss from './rewriteJsAndCss'
 
 export default async function migrate (themePath: string): Promise<MigrationReport> {
   const manifest = getManifest(themePath)
   const templates = getTemplates(themePath)
   const variables = getVariables(themePath, manifest.settings)
   const assets = getAssets(themePath)
+  const css = fs.readFileSync(path.join(themePath, 'style.css'), 'utf8')
+  const js = fs.readFileSync(path.join(themePath, 'script.js'), 'utf8')
 
   const variablesPayload = variables.reduce((payload, variable) => ({
     ...payload,
@@ -34,6 +39,8 @@ export default async function migrate (themePath: string): Promise<MigrationRepo
     data: {
       templates: {
         ...templates,
+        css,
+        js,
         assets: assetsPayload,
         variables: variablesPayload,
         metadata: metadataPayload
@@ -43,8 +50,10 @@ export default async function migrate (themePath: string): Promise<MigrationRepo
   })
 
   const response = data as MigrateResponse
+  const { css: migratedCss, js: migratedJs, ...templateEntries } = response.templates
   rewriteManifest(themePath, response.metadata.api_version)
-  rewriteTemplates(themePath, response.templates)
+  rewriteJsAndCss(themePath, { css: migratedCss, js: migratedJs })
+  rewriteTemplates(themePath, templateEntries)
   rewriteAssets(themePath, response.assets)
   return response.migration_report
 }

packages/zcli-themes/src/lib/rewriteJsAndCss.test.ts

@@ -0,0 +1,46 @@
+import * as sinon from 'sinon'
+import * as fs from 'fs'
+import * as path from 'path'
+import { expect } from '@oclif/test'
+import rewriteJsAndCss from './rewriteJsAndCss'
+
+describe('rewriteJsAndCss', () => {
+  beforeEach(() => {
+    sinon.restore()
+  })
+
+  it('writes style.css and script.js to the theme root', () => {
+    const writeFileSyncStub = sinon.stub(fs, 'writeFileSync')
+
+    rewriteJsAndCss('theme/path', {
+      css: 'body { color: red; }',
+      js: 'console.log("hi")'
+    })
+
+    expect(writeFileSyncStub.callCount).to.equal(2)
+    expect(writeFileSyncStub.firstCall.args[0]).to.equal(path.join('theme/path', 'style.css'))
+    expect(writeFileSyncStub.firstCall.args[1]).to.equal('body { color: red; }')
+    expect(writeFileSyncStub.secondCall.args[0]).to.equal(path.join('theme/path', 'script.js'))
+    expect(writeFileSyncStub.secondCall.args[1]).to.equal('console.log("hi")')
+  })
+
+  it('throws if style.css cannot be written', () => {
+    const cssPath = path.join('theme/path', 'style.css')
+    const writeFileSyncStub = sinon.stub(fs, 'writeFileSync')
+    writeFileSyncStub.withArgs(cssPath).throws(new Error('Permission denied'))
+
+    expect(() => {
+      rewriteJsAndCss('theme/path', { css: 'a', js: 'b' })
+    }).to.throw(`Failed to write file: ${cssPath}`)
+  })
+
+  it('throws if script.js cannot be written', () => {
+    const jsPath = path.join('theme/path', 'script.js')
+    const writeFileSyncStub = sinon.stub(fs, 'writeFileSync')
+    writeFileSyncStub.withArgs(jsPath).throws(new Error('Permission denied'))
+
+    expect(() => {
+      rewriteJsAndCss('theme/path', { css: 'a', js: 'b' })
+    }).to.throw(`Failed to write file: ${jsPath}`)
+  })
+})

packages/zcli-themes/src/lib/rewriteJsAndCss.ts

@@ -0,0 +1,24 @@
+import { CLIError } from '@oclif/core/lib/errors'
+import * as fs from 'fs'
+import * as path from 'path'
+import * as chalk from 'chalk'
+
+export default function rewriteJsAndCss (
+  themePath: string,
+  { css, js }: { css: string; js: string }
+) {
+  const cssPath = path.join(themePath, 'style.css')
+  const jsPath = path.join(themePath, 'script.js')
+
+  try {
+    fs.writeFileSync(cssPath, css)
+  } catch (error) {
+    throw new CLIError(chalk.red(`Failed to write file: ${cssPath}`))
+  }
+
+  try {
+    fs.writeFileSync(jsPath, js)
+  } catch (error) {
+    throw new CLIError(chalk.red(`Failed to write file: ${jsPath}`))
+  }
+}

packages/zcli-themes/tests/functional/migrate.test.ts

@@ -11,6 +11,8 @@ describe('themes:migrate', function () {
   let fetchStub: sinon.SinonStub
   let manifestBackup: string
   let templateBackup: string
+  let styleBackup: string
+  let scriptBackup: string
   const migratedAssetPath = path.join(baseThemePath, 'assets/category_tree.js')
   const partialsDir = path.join(baseThemePath, 'templates/partials')
 
@@ -25,6 +27,8 @@ describe('themes:migrate', function () {
       path.join(baseThemePath, 'templates/document_head.hbs'),
       'utf8'
     )
+    styleBackup = fs.readFileSync(path.join(baseThemePath, 'style.css'), 'utf8')
+    scriptBackup = fs.readFileSync(path.join(baseThemePath, 'script.js'), 'utf8')
   })
 
   afterEach(() => {
@@ -35,6 +39,8 @@ describe('themes:migrate', function () {
       path.join(baseThemePath, 'templates/document_head.hbs'),
       templateBackup
     )
+    fs.writeFileSync(path.join(baseThemePath, 'style.css'), styleBackup)
+    fs.writeFileSync(path.join(baseThemePath, 'script.js'), scriptBackup)
     // Clean up migrated asset
     if (fs.existsSync(migratedAssetPath)) {
       fs.unlinkSync(migratedAssetPath)
@@ -65,7 +71,9 @@ describe('themes:migrate', function () {
                 },
                 templates: {
                   document_head: '{{!chat (obsolete)}}',
-                  'partials/user_info': '<div>{{user.name}}</div>'
+                  'partials/user_info': '<div>{{user.name}}</div>',
+                  css: '/* migrated */\nbody {}',
+                  js: '/* migrated */\nconsole.log("hi")'
                 },
                 assets: {
                   'category_tree.js': Buffer.from('console.log("category_tree");\n').toString('base64')
@@ -113,6 +121,12 @@ describe('themes:migrate', function () {
         const asset = fs.readFileSync(migratedAssetPath, 'utf8')
         expect(asset).to.equal('console.log("category_tree");\n')
 
+        // Verify root style.css and script.js were rewritten
+        const style = fs.readFileSync(path.join(baseThemePath, 'style.css'), 'utf8')
+        expect(style).to.equal('/* migrated */\nbody {}')
+        const script = fs.readFileSync(path.join(baseThemePath, 'script.js'), 'utf8')
+        expect(script).to.equal('/* migrated */\nconsole.log("hi")')
+
         // Verify migration report was printed
         expect(ctx.stdout).to.contain('Theme migrated successfully')
         expect(ctx.stdout).to.contain('document_head')