test(styles-tokens): adding test cases to cover the use-case of havin…

…g only tokens

packages/teleport-plugin-css-modules/src/style-sheet.ts

@@ -8,13 +8,18 @@ import {
 } from '@teleporthq/teleport-types'
 interface StyleSheetPlugin {
   fileName?: string
-  omitModuleextension?: boolean
+  moduleExtension?: boolean
+}
+
+const defaultConfig = {
+  fileName: 'style',
+  moduleExtension: false,
 }
 
 export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> = (config) => {
-  const { fileName, omitModuleextension } = config || {
-    fileName: 'style',
-    omitModuleextension: false,
+  const { fileName, moduleExtension } = {
+    ...defaultConfig,
+    ...config,
   }
   const styleSheetPlugin: ComponentPlugin = async (structure) => {
     const { uidl, chunks } = structure
@@ -91,9 +96,8 @@ export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> =
       return structure
     }
 
-    const sheeName = omitModuleextension ? fileName : `${fileName}.module`
     uidl.outputOptions = uidl.outputOptions || {}
-    uidl.outputOptions.styleFileName = sheeName
+    uidl.outputOptions.styleFileName = moduleExtension ? `${fileName}.module` : fileName
 
     chunks.push({
       name: fileName,

packages/teleport-project-generator-angular/__tests__/end2end/index.ts

@@ -1,8 +1,9 @@
+import { FileType } from '@teleporthq/teleport-types'
 import uidlSample from '../../../../examples/test-samples/project-sample-with-dependency.json'
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
-import template from './template-definition.json'
+import uidlSampleWithJustTokens from '../../../../examples/test-samples/project-with-only-tokens.json'
 import { createAngularProjectGenerator } from '../../src'
-import { FileType } from '@teleporthq/teleport-types'
+import template from './template-definition.json'
 
 describe('Angular Project Generator', () => {
   const generator = createAngularProjectGenerator()
@@ -65,6 +66,16 @@ import { ModalWindow } from './modal-window/modal-window.component'`)
     expect(packageJSON.content).toContain(`"antd": "4.5.4"`)
   })
 
+  it('creates style sheet and adds to the webpack file', async () => {
+    const result = await generator.generateProject(uidlSampleWithJustTokens, template)
+    const styleSheet = result.subFolders[0].files.find(
+      (file) => file.name === 'style' && file.fileType === FileType.CSS
+    )
+
+    expect(styleSheet).toBeDefined()
+    expect(styleSheet.content).toContain(`--greys-500: #595959`)
+  })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)
 

packages/teleport-project-generator-angular/src/index.ts

@@ -44,11 +44,7 @@ const createAngularProjectGenerator = () => {
   htmlFileGenerator.addPostProcessor(createPrettierHTMLPostProcessor())
 
   const styleSheetGenerator = createComponentGenerator()
-  styleSheetGenerator.addPlugin(
-    createStyleSheetPlugin({
-      fileName: 'styles',
-    })
-  )
+  styleSheetGenerator.addPlugin(createStyleSheetPlugin())
 
   const generator = createProjectGenerator({
     components: {

packages/teleport-project-generator-gatsby/__tests__/end2end/index.ts

@@ -1,9 +1,10 @@
+import { FileType, ReactStyleVariation } from '@teleporthq/teleport-types'
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
 import uidlSampleWithExternalDependencies from '../../../../examples/test-samples/project-sample-with-dependency.json'
+import uidlSampleWithJustTokens from '../../../../examples/test-samples/project-with-only-tokens.json'
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
 import template from './mocks'
 import { createGatsbyProjectGenerator } from '../../src'
-import { FileType, ReactStyleVariation } from '@teleporthq/teleport-types'
 
 describe('Gatsby Project Generator', () => {
   const generator = createGatsbyProjectGenerator()
@@ -58,6 +59,17 @@ describe('Gatsby Project Generator', () => {
     expect(pagesFolder.files[0].content).toContain(`import 'antd/dist/antd.css'`)
   })
 
+  it('runs without crashing and using only tokens', async () => {
+    const result = await generator.generateProject(uidlSampleWithJustTokens, template)
+    const srcFolder = result.subFolders.find((folder) => folder.name === 'src')
+    const styleSheet = srcFolder.files.find(
+      (file) => file.name === 'style.module' && file.fileType === FileType.CSS
+    )
+
+    expect(styleSheet).toBeDefined()
+    expect(styleSheet.content).toContain(`--greys-500: #595959`)
+  })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)
 
@@ -101,6 +113,17 @@ describe('Gatsby Project Generator with Styled Components', () => {
     expect(componentsFolder.name).toBe('components')
   })
 
+  it('runs without crashing and using only tokens', async () => {
+    const result = await generator.generateProject(uidlSampleWithJustTokens, template)
+    const srcFolder = result.subFolders.find((folder) => folder.name === 'src')
+    const styleSheet = srcFolder.files.find(
+      (file) => file.name === 'style' && file.fileType === FileType.JS
+    )
+
+    expect(styleSheet).toBeDefined()
+    expect(styleSheet.content).toContain(`Greys700: '#999999'`)
+  })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)
 

packages/teleport-project-generator-gatsby/src/index.ts

@@ -43,10 +43,7 @@ interface GatsbyProjectConfig {
 }
 
 const createGatsbyProjectGenerator = (config?: GatsbyProjectConfig) => {
-  const variation =
-    config?.variation === ReactStyleVariation.CSSModules
-      ? ReactStyleVariation.CSSModules
-      : ReactStyleVariation.StyledComponents
+  const variation = config?.variation || ReactStyleVariation.CSSModules
   const reactComponentGenerator = createCustomReactComponentGenerator(variation)
   const reactPagesGenerator = createCustomReactComponentGenerator(variation, [headConfigPlugin])
 
@@ -68,7 +65,7 @@ const createGatsbyProjectGenerator = (config?: GatsbyProjectConfig) => {
     styleSheetGenerator.addPlugin(importStatementsPlugin)
     styleSheetGenerator.addPostProcessor(prettierJS)
   } else {
-    styleSheetGenerator.addPlugin(createStyleSheetPlugin())
+    styleSheetGenerator.addPlugin(createStyleSheetPlugin({ moduleExtension: true }))
   }
 
   const strategy: ProjectStrategy = {

packages/teleport-project-generator-next/__tests__/end2end/index.ts

@@ -1,7 +1,9 @@
+import { FileType } from '@teleporthq/teleport-types'
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
 import uidlSampleWithoutProjectStyleesButImports from './project-with-import-without-global-styles.json'
 import uidlSampleWithProjectStyleSheet from '../../../../examples/test-samples/project-with-import-global-styles.json'
+import uidlSampleWithJustTokens from '../../../../examples/test-samples/project-with-only-tokens.json'
 import template from './template-definition.json'
 import { createNextProjectGenerator } from '../../src'
 
@@ -56,6 +58,24 @@ describe('React Next Project Generator', () => {
     expect(pages.files[0].name).toBe('index')
     expect(pages.files[1].name).toBe('about')
   })
+
+  it('runs without crashing and adds import of style sheet in _app.js', async () => {
+    const result = await generator.generateProject(uidlSampleWithJustTokens, template)
+
+    const pagesFolder = result.subFolders.find((folder) => folder.name === 'pages')
+    const styleSheet = pagesFolder.files.find(
+      (file) => file.name === 'style' && file.fileType === FileType.CSS
+    )
+    const appFile = pagesFolder.files.find(
+      (file) => file.name === '_app' && file.fileType === FileType.JS
+    )
+
+    expect(styleSheet).toBeDefined()
+    expect(styleSheet.content).toContain(`--greys-500: #595959`)
+    expect(appFile).toBeDefined()
+    expect(appFile.content).toContain(`import './style.css'`)
+  })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)
 

packages/teleport-project-generator-preact/__tests__/end2end/index.ts

@@ -1,6 +1,8 @@
+import { FileType } from '@teleporthq/teleport-types'
 import uidlSampleWithDependencies from '../../../../examples/test-samples/project-sample-with-dependency.json'
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
+import uidlSampleWithJustTokens from '../../../../examples/test-samples/project-with-only-tokens.json'
 import template from './template-definition.json'
 import { createPreactProjectGenerator } from '../../src'
 
@@ -58,6 +60,9 @@ describe('Preact Project Generator', () => {
     expect(componentFiles.length).toBe(6)
     expect(componentFiles[componentFiles.length - 1].fileType).toBe('js')
     expect(componentFiles[componentFiles.length - 1].name).toBe('app')
+    expect(componentFiles[componentFiles.length - 1].content).not.toContain(
+      `import '../routes/style.css'`
+    )
     expect(modalComponent.content).toContain(
       `<Button type="primary" onClick={() => setIsOpen(true)}>
         Show Popup
@@ -70,6 +75,25 @@ describe('Preact Project Generator', () => {
     )
   })
 
+  it('runs without crashing and using only tokens', async () => {
+    const result = await generator.generateProject(uidlSampleWithJustTokens, template)
+    const routes = result.subFolders[0].subFolders.find((folder) => folder.name === 'routes')
+    const styleSheet = routes.files.find(
+      (file) => file.name === 'style' && file.fileType === FileType.CSS
+    )
+    const components = result.subFolders[0].subFolders.find(
+      (folder) => folder.name === 'components'
+    )
+    const index = components.files.find(
+      (file) => file.name === 'app' && file.fileType === FileType.JS
+    )
+
+    expect(styleSheet).toBeDefined()
+    expect(styleSheet.content).toContain(`--greys-500: #595959`)
+    expect(index).toBeDefined()
+    expect(index.content).toContain(`import '../routes/style.css'`)
+  })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)
 

packages/teleport-project-generator-preact/src/index.ts

@@ -30,7 +30,6 @@ const createPreactProjectGenerator = () => {
   styleSheetGenerator.addPlugin(
     createStyleSheetPlugin({
       fileName: 'style',
-      omitModuleextension: true,
     })
   )
 

packages/teleport-project-generator-react/__tests__/end2end/index.ts

@@ -1,5 +1,7 @@
+import { FileType } from '@teleporthq/teleport-types'
 import uidlSampleWithExternalDependencies from '../../../../examples/test-samples/project-sample-with-dependency.json'
 import uidlSample from '../../../../examples/test-samples/project-sample.json'
+import uidlSampleWithJustTokens from '../../../../examples/test-samples/project-with-only-tokens.json'
 import invalidUidlSample from '../../../../examples/test-samples/project-invalid-sample.json'
 import template from './template-definition.json'
 import { createReactProjectGenerator } from '../../src'
@@ -49,6 +51,7 @@ describe('React Project Generator', () => {
     expect(packageJSON.name).toBe('package')
     expect(srcFolder.files[0].name).toBe('index')
     expect(srcFolder.files[0].fileType).toBe('js')
+    expect(srcFolder.files[0].content).not.toContain(`import './style.module.css'`)
     expect(publicFolder.files[0].name).toBe('manifest')
     expect(publicFolder.files[0].fileType).toBe('json')
     expect(publicFolder.files[1].name).toBe('index')
@@ -87,6 +90,22 @@ describe('React Project Generator', () => {
     expect(srcFolder.files[0].content).toContain(`import 'antd/dist/antd.css'`)
   })
 
+  it('runs without crashing and using only tokens', async () => {
+    const result = await generator.generateProject(uidlSampleWithJustTokens, template)
+    const srcFolder = result.subFolders.find((folder) => folder.name === 'src')
+    const styleSheet = srcFolder.files.find(
+      (file) => file.name === 'style.module' && file.fileType === FileType.CSS
+    )
+    const index = srcFolder.files.find(
+      (file) => file.name === 'index' && file.fileType === FileType.JS
+    )
+
+    expect(styleSheet).toBeDefined()
+    expect(styleSheet.content).toContain(`--greys-500: #595959`)
+    expect(index).toBeDefined()
+    expect(index.content).toContain(`import './style.module.css'`)
+  })
+
   it('throws error when invalid UIDL sample is used', async () => {
     const result = generator.generateProject(invalidUidlSample, template)
 

packages/teleport-project-generator-react/src/index.ts

@@ -31,7 +31,7 @@ const createReactProjectGenerator = () => {
   routingComponentGenerator.addPostProcessor(prettierJS)
 
   const styleSheetGenerator = createComponentGenerator()
-  styleSheetGenerator.addPlugin(createStyleSheetPlugin())
+  styleSheetGenerator.addPlugin(createStyleSheetPlugin({ moduleExtension: true }))
 
   const htmlFileGenerator = createComponentGenerator()
   htmlFileGenerator.addPostProcessor(prettierHTML)

packages/teleport-test/src/standalone.ts

@@ -4,9 +4,9 @@ import { packProject } from '@teleporthq/teleport-code-generator'
 import { ProjectUIDL, PackerOptions, ProjectType, PublisherType } from '@teleporthq/teleport-types'
 
 import reactProjectJSON from '../../../examples/uidl-samples/react-project.json'
-// import projectJSON from '../../../examples/uidl-samples/project.json'
+import projectJSON from '../../../examples/uidl-samples/project.json'
 
-// const projectUIDL = (projectJSON as unknown) as ProjectUIDL
+const projectUIDL = (projectJSON as unknown) as ProjectUIDL
 const reactProjectUIDL = (reactProjectJSON as unknown) as ProjectUIDL
 const assetFile = readFileSync(join(__dirname, 'asset.png'))
 const base64File = Buffer.from(assetFile).toString('base64')
@@ -43,34 +43,34 @@ const run = async () => {
     //   projectType: ProjectType.REACTNATIVE,
     // })
     // console.info(ProjectType.REACTNATIVE, '-', result.payload)
-    // result = await packProject(reactProjectUIDL, {
-    //   ...packerOptions,
-    //   projectType: ProjectType.REACT,
-    // })
-    // console.info(ProjectType.REACT, '-', result.payload)
-    // result = await packProject(projectUIDL, {
-    //   ...packerOptions,
-    //   projectType: ProjectType.NEXT,
-    // })
-    // console.info(ProjectType.NEXT, '-', result.payload)
-    // result = await packProject(projectUIDL, { ...packerOptions, projectType: ProjectType.NUXT })
-    // console.info(ProjectType.NUXT, '-', result.payload)
-    // result = await packProject(projectUIDL, { ...packerOptions, projectType: ProjectType.VUE })
-    // console.info(ProjectType.VUE, '-', result.payload)
-    // result = await packProject(projectUIDL, { ...packerOptions, projectType: ProjectType.STENCIL })
-    // console.info(ProjectType.STENCIL, '-', result.payload)
-    // result = await packProject(projectUIDL, {
-    //   ...packerOptions,
-    //   projectType: ProjectType.PREACT,
-    // })
-    // console.info(ProjectType.PREACT, '-', result.payload)
-    // result = await packProject(projectUIDL, {
-    //   ...packerOptions,
-    //   projectType: ProjectType.ANGULAR,
-    // })
-    // console.info(ProjectType.ANGULAR, '-', result.payload)
-    // result = await packProject(projectUIDL, { ...packerOptions, projectType: ProjectType.GRIDSOME })
-    // console.info(ProjectType.GRIDSOME, '-', result.payload)
+    result = await packProject(reactProjectUIDL, {
+      ...packerOptions,
+      projectType: ProjectType.REACT,
+    })
+    console.info(ProjectType.REACT, '-', result.payload)
+    result = await packProject(projectUIDL, {
+      ...packerOptions,
+      projectType: ProjectType.NEXT,
+    })
+    console.info(ProjectType.NEXT, '-', result.payload)
+    result = await packProject(projectUIDL, { ...packerOptions, projectType: ProjectType.NUXT })
+    console.info(ProjectType.NUXT, '-', result.payload)
+    result = await packProject(projectUIDL, { ...packerOptions, projectType: ProjectType.VUE })
+    console.info(ProjectType.VUE, '-', result.payload)
+    result = await packProject(projectUIDL, { ...packerOptions, projectType: ProjectType.STENCIL })
+    console.info(ProjectType.STENCIL, '-', result.payload)
+    result = await packProject(projectUIDL, {
+      ...packerOptions,
+      projectType: ProjectType.PREACT,
+    })
+    console.info(ProjectType.PREACT, '-', result.payload)
+    result = await packProject(projectUIDL, {
+      ...packerOptions,
+      projectType: ProjectType.ANGULAR,
+    })
+    console.info(ProjectType.ANGULAR, '-', result.payload)
+    result = await packProject(projectUIDL, { ...packerOptions, projectType: ProjectType.GRIDSOME })
+    console.info(ProjectType.GRIDSOME, '-', result.payload)
     result = await packProject(reactProjectUIDL, {
       ...packerOptions,
       projectType: ProjectType.GATSBY,