diff --git a/examples/test-samples/project-with-only-tokens.json b/examples/test-samples/project-with-only-tokens.json
new file mode 100644
index 000000000..0b97f674a
--- /dev/null
+++ b/examples/test-samples/project-with-only-tokens.json
@@ -0,0 +1,766 @@
+{
+    "name": "dsffdsf",
+    "globals": {
+      "settings": {
+        "title": "dsffdsf",
+        "language": "en"
+      },
+      "assets": [
+        {
+          "type": "style",
+          "content": "html {  line-height: 1.15;}body {  margin: 0;}* {  box-sizing: border-box;  border-width: 0;  border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6 {  margin: 0;  padding: 0;}button,input,optgroup,select,textarea {  font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;}button,select {  text-transform: none;}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"] {  -webkit-appearance: button;}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type=\"button\"]:-moz-focus,[type=\"reset\"]:-moz-focus,[type=\"submit\"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}"
+        }
+      ],
+      "meta": [
+        {
+          "name": "viewport",
+          "content": "width=device-width, initial-scale=1.0"
+        },
+        {
+          "charSet": "utf-8"
+        },
+        {
+          "property": "twitter:card",
+          "content": "summary_large_image"
+        }
+      ],
+      "customCode": {}
+    },
+    "root": {
+      "name": "App",
+      "designLanguage": {
+        "tokens": {
+          "Primary-900": {
+            "type": "static",
+            "content": "#E6FAFF"
+          },
+          "Space-Unit": {
+            "type": "static",
+            "content": "1rem"
+          },
+          "Space-TripleUnit": {
+            "type": "static",
+            "content": "3rem"
+          },
+          "Greys-White": {
+            "type": "static",
+            "content": "#FFFFFF"
+          },
+          "Radius-Round": {
+            "type": "static",
+            "content": "50%"
+          },
+          "Greys-700": {
+            "type": "static",
+            "content": "#999999"
+          },
+          "Danger-300": {
+            "type": "static",
+            "content": "#A22020"
+          },
+          "Primary-500": {
+            "type": "static",
+            "content": "#14A9FF"
+          },
+          "Success-300": {
+            "type": "static",
+            "content": "#199033"
+          },
+          "Success-700": {
+            "type": "static",
+            "content": "#4CC366"
+          },
+          "Size-HalfUnit": {
+            "type": "static",
+            "content": "0.5rem"
+          },
+          "Primary-700": {
+            "type": "static",
+            "content": "#85DCFF"
+          },
+          "Greys-Black": {
+            "type": "static",
+            "content": "#000000"
+          },
+          "Success-500": {
+            "type": "static",
+            "content": "#32A94C"
+          },
+          "Primary-300": {
+            "type": "static",
+            "content": "#0074F0"
+          },
+          "Space-DoubleUnit": {
+            "type": "static",
+            "content": "2rem"
+          },
+          "Radius-Square": {
+            "type": "static",
+            "content": "0"
+          },
+          "Danger-500": {
+            "type": "static",
+            "content": "#BF2626"
+          },
+          "Size-Unit": {
+            "type": "static",
+            "content": "1rem"
+          },
+          "Space-HalfUnit": {
+            "type": "static",
+            "content": "0.5rem"
+          },
+          "Size-DoubleUnit": {
+            "type": "static",
+            "content": "2rem"
+          },
+          "Greys-500": {
+            "type": "static",
+            "content": "#595959"
+          },
+          "Size-TripleUnit": {
+            "type": "static",
+            "content": "3rem"
+          },
+          "Danger-700": {
+            "type": "static",
+            "content": "#E14747"
+          },
+          "Primary-100": {
+            "type": "static",
+            "content": "#003EB3"
+          }
+        }
+      },
+      "stateDefinitions": {
+        "route": {
+          "type": "string",
+          "defaultValue": "Home",
+          "values": [
+            {
+              "value": "Abolut",
+              "seo": {
+                "title": "Abolut - dsffdsf",
+                "metaTags": [
+                  {
+                    "property": "og:title",
+                    "content": "Abolut - dsffdsf"
+                  }
+                ]
+              }
+            },
+            {
+              "value": "Home",
+              "seo": {
+                "title": "dsffdsf",
+                "metaTags": [
+                  {
+                    "property": "og:title",
+                    "content": "dsffdsf"
+                  }
+                ]
+              }
+            },
+            {
+              "value": "Contact",
+              "seo": {
+                "title": "Contact - dsffdsf",
+                "metaTags": [
+                  {
+                    "property": "og:title",
+                    "content": "Contact - dsffdsf"
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      },
+      "node": {
+        "type": "element",
+        "content": {
+          "elementType": "Router",
+          "children": [
+            {
+              "type": "conditional",
+              "content": {
+                "node": {
+                  "type": "element",
+                  "content": {
+                    "elementType": "container",
+                    "semanticType": "div",
+                    "referencedStyles": {},
+                    "attrs": {},
+                    "abilities": {},
+                    "style": {
+                      "height": {
+                        "type": "static",
+                        "content": "auto"
+                      },
+                      "display": {
+                        "type": "static",
+                        "content": "flex"
+                      },
+                      "minHeight": {
+                        "type": "static",
+                        "content": "100vh"
+                      },
+                      "alignItems": {
+                        "type": "static",
+                        "content": "flex-start"
+                      },
+                      "flexDirection": {
+                        "type": "static",
+                        "content": "column"
+                      }
+                    },
+                    "children": []
+                  }
+                },
+                "value": "Abolut",
+                "reference": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType": "state",
+                    "id": "route"
+                  }
+                }
+              }
+            },
+            {
+              "type": "conditional",
+              "content": {
+                "node": {
+                  "type": "element",
+                  "content": {
+                    "elementType": "container",
+                    "semanticType": "div",
+                    "referencedStyles": {},
+                    "attrs": {},
+                    "abilities": {},
+                    "style": {
+                      "height": {
+                        "type": "static",
+                        "content": "auto"
+                      },
+                      "display": {
+                        "type": "static",
+                        "content": "flex"
+                      },
+                      "minHeight": {
+                        "type": "static",
+                        "content": "100vh"
+                      },
+                      "alignItems": {
+                        "type": "static",
+                        "content": "flex-start"
+                      },
+                      "flexDirection": {
+                        "type": "static",
+                        "content": "column"
+                      },
+                      "justifyContent": {
+                        "type": "static",
+                        "content": "flex-start"
+                      }
+                    },
+                    "children": [
+                      {
+                        "type": "element",
+                        "content": {
+                          "elementType": "container",
+                          "semanticType": "div",
+                          "referencedStyles": {},
+                          "attrs": {},
+                          "abilities": {},
+                          "style": {
+                            "width": {
+                              "type": "static",
+                              "content": "100%"
+                            },
+                            "height": {
+                              "type": "static",
+                              "content": "100px"
+                            },
+                            "display": {
+                              "type": "static",
+                              "content": "flex"
+                            },
+                            "flexWrap": {
+                              "type": "static",
+                              "content": "wrap"
+                            },
+                            "alignItems": {
+                              "type": "static",
+                              "content": "center"
+                            },
+                            "flexDirection": {
+                              "type": "static",
+                              "content": "row"
+                            },
+                            "justifyContent": {
+                              "type": "static",
+                              "content": "flex-start"
+                            },
+                            "backgroundColor": {
+                              "type": "dynamic",
+                              "content": {
+                                "referenceType": "token",
+                                "id": "Primary-100"
+                              }
+                            }
+                          },
+                          "children": [
+                            {
+                              "type": "element",
+                              "content": {
+                                "elementType": "text",
+                                "semanticType": "h1",
+                                "attrs": {},
+                                "abilities": {},
+                                "style": {
+                                  "backgroundColor": {
+                                    "type": "dynamic",
+                                    "content": {
+                                      "referenceType": "token",
+                                      "id": "Primary-900"
+                                    }
+                                  }
+                                },
+                                "children": [
+                                  {
+                                    "type": "static",
+                                    "content": "Heading"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    ]
+                  }
+                },
+                "value": "Home",
+                "reference": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType": "state",
+                    "id": "route"
+                  }
+                }
+              }
+            },
+            {
+              "type": "conditional",
+              "content": {
+                "node": {
+                  "type": "element",
+                  "content": {
+                    "elementType": "container",
+                    "semanticType": "div",
+                    "referencedStyles": {},
+                    "attrs": {},
+                    "abilities": {},
+                    "style": {
+                      "height": {
+                        "type": "static",
+                        "content": "auto"
+                      },
+                      "display": {
+                        "type": "static",
+                        "content": "flex"
+                      },
+                      "minHeight": {
+                        "type": "static",
+                        "content": "100vh"
+                      },
+                      "alignItems": {
+                        "type": "static",
+                        "content": "flex-start"
+                      },
+                      "flexDirection": {
+                        "type": "static",
+                        "content": "column"
+                      }
+                    },
+                    "children": [
+                      {
+                        "type": "element",
+                        "content": {
+                          "elementType": "container",
+                          "semanticType": "div",
+                          "referencedStyles": {},
+                          "attrs": {},
+                          "abilities": {},
+                          "style": {
+                            "width": {
+                              "type": "static",
+                              "content": "100%"
+                            },
+                            "height": {
+                              "type": "static",
+                              "content": "100px"
+                            },
+                            "display": {
+                              "type": "static",
+                              "content": "flex"
+                            },
+                            "flexWrap": {
+                              "type": "static",
+                              "content": "wrap"
+                            },
+                            "alignItems": {
+                              "type": "static",
+                              "content": "center"
+                            },
+                            "flexDirection": {
+                              "type": "static",
+                              "content": "row"
+                            },
+                            "justifyContent": {
+                              "type": "static",
+                              "content": "flex-start"
+                            },
+                            "backgroundColor": {
+                              "type": "static",
+                              "content": "rgba(120, 120, 120, 0.4)"
+                            }
+                          },
+                          "children": []
+                        }
+                      },
+                      {
+                        "type": "element",
+                        "content": {
+                          "elementType": "container",
+                          "semanticType": "div",
+                          "referencedStyles": {},
+                          "attrs": {},
+                          "abilities": {},
+                          "style": {
+                            "width": {
+                              "type": "static",
+                              "content": "100%"
+                            },
+                            "height": {
+                              "type": "static",
+                              "content": "100px"
+                            },
+                            "display": {
+                              "type": "static",
+                              "content": "flex"
+                            },
+                            "flexWrap": {
+                              "type": "static",
+                              "content": "wrap"
+                            },
+                            "alignItems": {
+                              "type": "static",
+                              "content": "center"
+                            },
+                            "flexDirection": {
+                              "type": "static",
+                              "content": "row"
+                            },
+                            "justifyContent": {
+                              "type": "static",
+                              "content": "flex-start"
+                            },
+                            "backgroundColor": {
+                              "type": "static",
+                              "content": "rgba(120, 120, 120, 0.4)"
+                            }
+                          },
+                          "children": []
+                        }
+                      },
+                      {
+                        "type": "element",
+                        "content": {
+                          "elementType": "container",
+                          "semanticType": "div",
+                          "referencedStyles": {},
+                          "attrs": {},
+                          "abilities": {},
+                          "style": {
+                            "width": {
+                              "type": "static",
+                              "content": "100%"
+                            },
+                            "height": {
+                              "type": "static",
+                              "content": "100px"
+                            },
+                            "display": {
+                              "type": "static",
+                              "content": "flex"
+                            },
+                            "flexWrap": {
+                              "type": "static",
+                              "content": "wrap"
+                            },
+                            "alignItems": {
+                              "type": "static",
+                              "content": "center"
+                            },
+                            "flexDirection": {
+                              "type": "static",
+                              "content": "row"
+                            },
+                            "justifyContent": {
+                              "type": "static",
+                              "content": "flex-start"
+                            },
+                            "backgroundColor": {
+                              "type": "static",
+                              "content": "rgba(120, 120, 120, 0.4)"
+                            }
+                          },
+                          "children": []
+                        }
+                      },
+                      {
+                        "type": "element",
+                        "content": {
+                          "elementType": "container",
+                          "semanticType": "div",
+                          "referencedStyles": {},
+                          "attrs": {},
+                          "abilities": {},
+                          "style": {
+                            "width": {
+                              "type": "static",
+                              "content": "100%"
+                            },
+                            "height": {
+                              "type": "static",
+                              "content": "100px"
+                            },
+                            "display": {
+                              "type": "static",
+                              "content": "flex"
+                            },
+                            "flexWrap": {
+                              "type": "static",
+                              "content": "wrap"
+                            },
+                            "alignItems": {
+                              "type": "static",
+                              "content": "center"
+                            },
+                            "flexDirection": {
+                              "type": "static",
+                              "content": "row"
+                            },
+                            "justifyContent": {
+                              "type": "static",
+                              "content": "flex-start"
+                            },
+                            "backgroundColor": {
+                              "type": "static",
+                              "content": "rgba(120, 120, 120, 0.4)"
+                            }
+                          },
+                          "children": []
+                        }
+                      },
+                      {
+                        "type": "element",
+                        "content": {
+                          "elementType": "container",
+                          "semanticType": "div",
+                          "referencedStyles": {},
+                          "attrs": {},
+                          "abilities": {},
+                          "style": {
+                            "width": {
+                              "type": "static",
+                              "content": "100%"
+                            },
+                            "height": {
+                              "type": "static",
+                              "content": "100px"
+                            },
+                            "display": {
+                              "type": "static",
+                              "content": "flex"
+                            },
+                            "flexWrap": {
+                              "type": "static",
+                              "content": "wrap"
+                            },
+                            "alignItems": {
+                              "type": "static",
+                              "content": "center"
+                            },
+                            "flexDirection": {
+                              "type": "static",
+                              "content": "row"
+                            },
+                            "justifyContent": {
+                              "type": "static",
+                              "content": "flex-start"
+                            },
+                            "backgroundColor": {
+                              "type": "static",
+                              "content": "rgba(120, 120, 120, 0.4)"
+                            }
+                          },
+                          "children": []
+                        }
+                      },
+                      {
+                        "type": "element",
+                        "content": {
+                          "elementType": "container",
+                          "semanticType": "div",
+                          "referencedStyles": {},
+                          "attrs": {},
+                          "abilities": {},
+                          "style": {
+                            "width": {
+                              "type": "static",
+                              "content": "100%"
+                            },
+                            "height": {
+                              "type": "static",
+                              "content": "100px"
+                            },
+                            "display": {
+                              "type": "static",
+                              "content": "flex"
+                            },
+                            "flexWrap": {
+                              "type": "static",
+                              "content": "wrap"
+                            },
+                            "alignItems": {
+                              "type": "static",
+                              "content": "center"
+                            },
+                            "flexDirection": {
+                              "type": "static",
+                              "content": "row"
+                            },
+                            "justifyContent": {
+                              "type": "static",
+                              "content": "flex-start"
+                            },
+                            "backgroundColor": {
+                              "type": "static",
+                              "content": "rgba(120, 120, 120, 0.4)"
+                            }
+                          },
+                          "children": []
+                        }
+                      },
+                      {
+                        "type": "element",
+                        "content": {
+                          "elementType": "container",
+                          "semanticType": "div",
+                          "referencedStyles": {},
+                          "attrs": {},
+                          "abilities": {},
+                          "style": {
+                            "width": {
+                              "type": "static",
+                              "content": "100%"
+                            },
+                            "height": {
+                              "type": "static",
+                              "content": "100px"
+                            },
+                            "display": {
+                              "type": "static",
+                              "content": "flex"
+                            },
+                            "flexWrap": {
+                              "type": "static",
+                              "content": "wrap"
+                            },
+                            "alignItems": {
+                              "type": "static",
+                              "content": "center"
+                            },
+                            "flexDirection": {
+                              "type": "static",
+                              "content": "row"
+                            },
+                            "justifyContent": {
+                              "type": "static",
+                              "content": "flex-start"
+                            },
+                            "backgroundColor": {
+                              "type": "static",
+                              "content": "rgba(120, 120, 120, 0.4)"
+                            }
+                          },
+                          "children": []
+                        }
+                      },
+                      {
+                        "type": "element",
+                        "content": {
+                          "elementType": "container",
+                          "semanticType": "div",
+                          "referencedStyles": {},
+                          "attrs": {},
+                          "abilities": {},
+                          "style": {
+                            "width": {
+                              "type": "static",
+                              "content": "100%"
+                            },
+                            "height": {
+                              "type": "static",
+                              "content": "100px"
+                            },
+                            "display": {
+                              "type": "static",
+                              "content": "flex"
+                            },
+                            "flexWrap": {
+                              "type": "static",
+                              "content": "wrap"
+                            },
+                            "alignItems": {
+                              "type": "static",
+                              "content": "center"
+                            },
+                            "flexDirection": {
+                              "type": "static",
+                              "content": "row"
+                            },
+                            "justifyContent": {
+                              "type": "static",
+                              "content": "flex-start"
+                            },
+                            "backgroundColor": {
+                              "type": "static",
+                              "content": "rgba(120, 120, 120, 0.4)"
+                            }
+                          },
+                          "children": []
+                        }
+                      }
+                    ]
+                  }
+                },
+                "value": "Contact",
+                "reference": {
+                  "type": "dynamic",
+                  "content": {
+                    "referenceType": "state",
+                    "id": "route"
+                  }
+                }
+              }
+            }
+          ]
+        }
+      }
+    },
+    "components": {}
+  }
\ No newline at end of file
diff --git a/packages/teleport-plugin-css-modules/src/style-sheet.ts b/packages/teleport-plugin-css-modules/src/style-sheet.ts
index 4664db0bc..92b23157e 100644
--- a/packages/teleport-plugin-css-modules/src/style-sheet.ts
+++ b/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,
diff --git a/packages/teleport-project-generator-angular/__tests__/end2end/index.ts b/packages/teleport-project-generator-angular/__tests__/end2end/index.ts
index b87e31608..42d802992 100644
--- a/packages/teleport-project-generator-angular/__tests__/end2end/index.ts
+++ b/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)
 
diff --git a/packages/teleport-project-generator-angular/src/index.ts b/packages/teleport-project-generator-angular/src/index.ts
index e7c00e1c0..13f6baa46 100644
--- a/packages/teleport-project-generator-angular/src/index.ts
+++ b/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: {
diff --git a/packages/teleport-project-generator-gatsby/__tests__/end2end/index.ts b/packages/teleport-project-generator-gatsby/__tests__/end2end/index.ts
index e92e65ad7..0ff9a6f97 100644
--- a/packages/teleport-project-generator-gatsby/__tests__/end2end/index.ts
+++ b/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)
 
diff --git a/packages/teleport-project-generator-gatsby/src/index.ts b/packages/teleport-project-generator-gatsby/src/index.ts
index cace3aabe..fb96dcecb 100644
--- a/packages/teleport-project-generator-gatsby/src/index.ts
+++ b/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 = {
diff --git a/packages/teleport-project-generator-next/__tests__/end2end/index.ts b/packages/teleport-project-generator-next/__tests__/end2end/index.ts
index 9564d1a2b..7b88aa290 100644
--- a/packages/teleport-project-generator-next/__tests__/end2end/index.ts
+++ b/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)
 
diff --git a/packages/teleport-project-generator-preact/__tests__/end2end/index.ts b/packages/teleport-project-generator-preact/__tests__/end2end/index.ts
index 089a9c854..c99dcaa00 100644
--- a/packages/teleport-project-generator-preact/__tests__/end2end/index.ts
+++ b/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)
 
diff --git a/packages/teleport-project-generator-preact/src/index.ts b/packages/teleport-project-generator-preact/src/index.ts
index f47b08bbc..c58433ec9 100644
--- a/packages/teleport-project-generator-preact/src/index.ts
+++ b/packages/teleport-project-generator-preact/src/index.ts
@@ -30,7 +30,6 @@ const createPreactProjectGenerator = () => {
   styleSheetGenerator.addPlugin(
     createStyleSheetPlugin({
       fileName: 'style',
-      omitModuleextension: true,
     })
   )
 
diff --git a/packages/teleport-project-generator-react/__tests__/end2end/index.ts b/packages/teleport-project-generator-react/__tests__/end2end/index.ts
index 9b5fb81af..e8fe0af26 100644
--- a/packages/teleport-project-generator-react/__tests__/end2end/index.ts
+++ b/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)
 
diff --git a/packages/teleport-project-generator-react/src/index.ts b/packages/teleport-project-generator-react/src/index.ts
index 74644a214..c390ccf10 100644
--- a/packages/teleport-project-generator-react/src/index.ts
+++ b/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)
diff --git a/packages/teleport-test/src/standalone.ts b/packages/teleport-test/src/standalone.ts
index 9d016e4d3..88b1a0a18 100644
--- a/packages/teleport-test/src/standalone.ts
+++ b/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,