add component

packages/css-in-js/src/index.tsx

@@ -1,7 +1,9 @@
-export { CS, CC } from '@compiled/style';
+import { CssFunction } from './types';
+
+export { CS, CC, CT } from '@compiled/style';
 export { styled } from './styled';
 export { ClassNames } from './class-names';
-import { CssFunction } from './types';
+export { createThemeProvider } from './theme';
 
 declare module 'react' {
   interface DOMAttributes<T> {

packages/css-in-js/src/theme/__tests__/index.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createThemeProvider } from '@compiled/css-in-js';
+import { render } from '@testing-library/react';
+
+describe('create theme provider', () => {
+  it('should create a provider component', () => {
+    const Provider = createThemeProvider();
+
+    const { getByText } = render(
+      <Provider mode="default">{style => <div style={style}>hello world</div>}</Provider>
+    );
+
+    expect(getByText('hello world').getAttribute('style')).toEqual('--cc-1tivpv1: #0052CC;');
+  });
+});

packages/css-in-js/src/theme/index.tsx

@@ -0,0 +1,11 @@
+import { ReactNode, ComponentType } from 'react';
+import { createSetupError } from '../utils/error';
+
+interface ProviderProps {
+  children: (style: {}) => ReactNode;
+  mode: 'default' | (string & {});
+}
+
+export const createThemeProvider = (): ComponentType<ProviderProps> => {
+  throw createSetupError();
+};

packages/css-in-js/tsconfig.json

@@ -5,8 +5,7 @@
     "outDir": "dist",
     "baseUrl": "src",
     "paths": {
-      "@compiled/css-in-js": ["index.tsx"],
-      "@compiled/css-in-js/jsx": ["jsx.tsx"]
+      "@compiled/css-in-js": ["index.tsx"]
     }
   },
   "references": [{ "path": "../style" }]

packages/ts-transform/src/constants.tsx

@@ -74,3 +74,11 @@ export const getCompiledComponentImport = (context: ts.TransformationContext) =>
         ts.createIdentifier(COMPILED_COMPONENT_NAME)
       ) as ts.JsxTagNamePropertyAccess)
     : ts.createIdentifier(COMPILED_COMPONENT_NAME);
+
+export const getThemeComponentImport = (context: ts.TransformationContext) =>
+  context.getCompilerOptions().module === ts.ModuleKind.CommonJS
+    ? (ts.createPropertyAccess(
+        ts.createIdentifier(COMMON_JS_COMPILED_IMPORT),
+        ts.createIdentifier(COMPILED_THEME_NAME)
+      ) as ts.JsxTagNamePropertyAccess)
+    : ts.createIdentifier(COMPILED_THEME_NAME);

packages/ts-transform/src/index.tsx

@@ -3,9 +3,15 @@ import path from 'path';
 import cssPropTransformer from './css-prop';
 import styledComponentTransformer from './styled-component';
 import classNamesTransformer from './class-names';
+import themeTransformer from './theme';
 import { RootTransformerOptions, Tokens, TransformerOptions } from './types';
 
-const transformers = [cssPropTransformer, styledComponentTransformer, classNamesTransformer];
+const transformers = [
+  cssPropTransformer,
+  styledComponentTransformer,
+  classNamesTransformer,
+  themeTransformer,
+];
 
 export { RootTransformerOptions as TransformerOptions } from './types';
 

packages/ts-transform/src/theme/__tests__/create-theme-provider.test.tsx

@@ -81,6 +81,6 @@ describe('create theme provider', () => {
       { tokens }
     );
 
-    expect(actual).toInclude('const tokens = { default: { --cc-1tivpv1: "#0052CC" } }');
+    expect(actual).toInclude('const tokens = { "default": { "--cc-1tivpv1": "#0052CC" } }');
   });
 });

packages/ts-transform/src/theme/index.tsx

@@ -37,11 +37,11 @@ const buildTokensObject = (tokens: Tokens, tokenPrefix?: string) => {
       }));
 
       return ts.createPropertyAssignment(
-        ts.createIdentifier(name),
+        ts.createStringLiteral(name),
         ts.createObjectLiteral(
           themeTokens.map(themeToken =>
             ts.createPropertyAssignment(
-              ts.createIdentifier(themeToken.key),
+              ts.createStringLiteral(themeToken.key),
               ts.createStringLiteral(themeToken.value)
             )
           ),

packages/ts-transform/src/theme/visitors/visit-create-theme-provider.tsx

@@ -5,7 +5,7 @@ import { createJsxClosingElement, createJsxOpeningElement } from '../../utils/as
 
 export const visitCreateThemeProvider = (
   node: ts.CallExpression,
-  __: ts.TransformationContext,
+  context: ts.TransformationContext,
   ___: TransformerOptions
 ): ts.Node => {
   return ts.createArrowFunction(
@@ -28,7 +28,7 @@ export const visitCreateThemeProvider = (
       ts.createJsxElement(
         createJsxOpeningElement(
           node,
-          ts.createIdentifier(constants.COMPILED_THEME_NAME),
+          constants.getThemeComponentImport(context),
           undefined,
           ts.createJsxAttributes([ts.createJsxSpreadAttribute(ts.createIdentifier('props'))])
         ),
@@ -53,7 +53,7 @@ export const visitCreateThemeProvider = (
             )
           ),
         ],
-        createJsxClosingElement(node, ts.createIdentifier(constants.COMPILED_THEME_NAME))
+        createJsxClosingElement(node, constants.getThemeComponentImport(context))
       )
     )
   );

tsconfig.json

@@ -5,7 +5,8 @@
       {
         "transform": "./packages/ts-transform/src/index.tsx",
         "options": {
-          "nonce": "\"k0Mp1lEd\""
+          "nonce": "\"k0Mp1lEd\"",
+          "tokens": "tokens-pkg"
         }
       }
     ]