Merge pull request #255 from jaredh159/export-style

src/ClassParser.ts

@@ -1,16 +1,11 @@
+import type { TwConfig } from './tw-config';
+import type { StyleIR, DeviceContext, ParseContext, Platform } from './types';
+import type Cache from './cache';
 import fontSize from './resolve/font-size';
 import lineHeight from './resolve/line-height';
 import spacing from './resolve/spacing';
 import screens from './screens';
-import { TwConfig } from './tw-config';
-import {
-  StyleIR,
-  isOrientation,
-  isPlatform,
-  DeviceContext,
-  ParseContext,
-  Platform,
-} from './types';
+import { isOrientation, isPlatform } from './types';
 import fontFamily from './resolve/font-family';
 import { color, colorOpacity } from './resolve/color';
 import { border, borderRadius } from './resolve/borders';
@@ -28,7 +23,6 @@ import { widthHeight, minMaxWidthHeight } from './resolve/width-height';
 import { letterSpacing } from './resolve/letter-spacing';
 import { opacity } from './resolve/opacity';
 import { shadowOpacity, shadowOffset } from './resolve/shadow';
-import Cache from './cache';
 
 export default class ClassParser {
   private position = 0;

src/__tests__/custom-utils.spec.ts

@@ -1,9 +1,8 @@
 import { describe, test, expect } from '@jest/globals';
-import { create, plugin } from '../';
-import { TwConfig } from '../tw-config';
-
 // @ts-ignore
 import tailwindPlugin from 'tailwindcss/plugin';
+import type { TwConfig } from '../tw-config';
+import { create, plugin } from '../';
 
 describe(`custom registered utilities`, () => {
   test(`register custom utilities, using package plugin fn`, () => {
@@ -20,6 +19,10 @@ describe(`custom registered utilities`, () => {
     const tw = create(config);
     expect(tw`btn`).toEqual({ paddingTop: 33 });
     expect(tw`custom`).toEqual({ marginTop: 4, color: `#fff` });
+    // works with media queries
+    expect(tw`md:btn`).toEqual({});
+    tw.setWindowDimensions({ width: 800, height: 800 });
+    expect(tw`md:btn`).toEqual({ paddingTop: 33 });
   });
 
   test(`supports leading dot for added utilities`, () => {

src/__tests__/flex.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from '@jest/globals';
+import type { TwTheme } from '../tw-config';
 import { create } from '..';
-import { TwTheme } from '../tw-config';
 
 describe(`flex grow/shrink`, () => {
   let tw = create();

src/__tests__/font-size.spec.ts

@@ -1,6 +1,6 @@
 import { describe, test, expect } from '@jest/globals';
+import type { TwConfig } from '../tw-config';
 import { create } from '..';
-import { TwConfig } from '../tw-config';
 
 describe(`font size`, () => {
   let tw = create();

src/__tests__/screens.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, describe } from '@jest/globals';
-import { TwTheme } from '../tw-config';
+import type { TwTheme } from '../tw-config';
 import screens from '../screens';
 
 describe(`screens()`, () => {

src/__tests__/simple-mappings.spec.ts

@@ -1,6 +1,6 @@
 import { describe, test, expect } from '@jest/globals';
+import type { Style } from '../types';
 import { create } from '../';
-import { Style } from '../types';
 
 describe(`simple style mappings`, () => {
   const tw = create();

src/cache.ts

@@ -1,4 +1,4 @@
-import { StyleIR, Style } from './types';
+import type { StyleIR, Style } from './types';
 import defaultStyles from './styles';
 
 export default class Cache {

src/helpers.ts

@@ -1,4 +1,5 @@
-import { Unit, Style, Direction, CompleteStyle, ParseContext } from './types';
+import type { Style, Direction, CompleteStyle, ParseContext } from './types';
+import { Unit } from './types';
 
 export function complete(style: Style): CompleteStyle {
   return { kind: `complete`, style };

src/hooks.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useColorScheme, useWindowDimensions, Appearance } from 'react-native';
-import { TailwindFn, RnColorScheme } from './types';
+import type { TailwindFn, RnColorScheme } from './types';
 
 type Options = {
   withDeviceColorScheme: boolean;

src/index.ts

@@ -1,16 +1,18 @@
 import { Platform } from 'react-native';
-import { TailwindFn, RnColorScheme } from './types';
-import { TwConfig } from './tw-config';
+import type { TailwindFn, RnColorScheme, ClassInput, Style } from './types';
+import type { TwConfig } from './tw-config';
 import plugin from './plugin';
 import rawCreate from './create';
 
 // Apply default config and inject RN Platform
 const create = (twConfig: TwConfig = {}): TailwindFn => rawCreate(twConfig, Platform.OS);
 
-export { create, plugin };
-export type { TailwindFn, TwConfig, RnColorScheme };
+export type { TailwindFn, TwConfig, RnColorScheme, ClassInput, Style };
 export { useDeviceContext, useAppColorScheme } from './hooks';
 
 const tailwind = create();
+const style = tailwind.style;
 
 export default tailwind;
+
+export { create, plugin, style };

src/parse-inputs.ts

@@ -1,4 +1,4 @@
-import { ClassInput, Style } from './types';
+import type { ClassInput, Style } from './types';
 
 export function parseInputs(
   inputs: ClassInput[],

src/plugin.ts

@@ -1,5 +1,5 @@
-import { TwConfig } from './tw-config';
-import { AddedUtilities, CreatePlugin, PluginFunction } from './types';
+import type { TwConfig } from './tw-config';
+import type { AddedUtilities, CreatePlugin, PluginFunction } from './types';
 
 const plugin: CreatePlugin = (handler) => {
   return { handler, config: undefined };

src/resolve/borders.ts

@@ -1,5 +1,5 @@
-import { TwTheme } from '../tw-config';
-import { ColorStyleType, Direction, StyleIR } from '../types';
+import type { TwTheme } from '../tw-config';
+import type { ColorStyleType, Direction, StyleIR } from '../types';
 import {
   parseAndConsumeDirection,
   complete,

src/resolve/color.ts

@@ -1,5 +1,6 @@
-import { ColorStyleType, isObject, isString, Style, StyleIR } from '../types';
-import { TwColors } from '../tw-config';
+import type { ColorStyleType, Style, StyleIR } from '../types';
+import type { TwColors } from '../tw-config';
+import { isObject, isString } from '../types';
 import { warn, complete } from '../helpers';
 
 export function color(

src/resolve/flex.ts

@@ -1,5 +1,5 @@
-import { TwTheme } from '../tw-config';
-import { ParseContext, StyleIR } from '../types';
+import type { TwTheme } from '../tw-config';
+import type { ParseContext, StyleIR } from '../types';
 import { getCompleteStyle, complete, parseStyleVal, unconfiggedStyle } from '../helpers';
 
 export function flexGrowShrink(

src/resolve/font-family.ts

@@ -1,5 +1,5 @@
-import { TwTheme } from '../tw-config';
-import { StyleIR } from '../types';
+import type { TwTheme } from '../tw-config';
+import type { StyleIR } from '../types';
 import { complete } from '../helpers';
 
 export default function fontFamily(

src/resolve/font-size.ts

@@ -1,5 +1,6 @@
-import { TwTheme } from '../tw-config';
-import { ParseContext, Style, StyleIR, Unit } from '../types';
+import type { TwTheme } from '../tw-config';
+import type { ParseContext, Style, StyleIR } from '../types';
+import { Unit } from '../types';
 import {
   getCompleteStyle,
   complete,

src/resolve/inset.ts

@@ -1,5 +1,5 @@
-import { TwTheme } from '../tw-config';
-import { StyleIR } from '../types';
+import type { TwTheme } from '../tw-config';
+import type { StyleIR } from '../types';
 import { complete, parseStyleVal, parseUnconfigged } from '../helpers';
 
 type Inset = 'bottom' | 'top' | 'left' | 'right' | 'inset';

src/resolve/letter-spacing.ts

@@ -1,5 +1,6 @@
-import { TwTheme } from '../tw-config';
-import { DependentStyle, StyleIR, Unit } from '../types';
+import type { TwTheme } from '../tw-config';
+import type { DependentStyle, StyleIR } from '../types';
+import { Unit } from '../types';
 import {
   parseNumericValue,
   complete,

src/resolve/line-height.ts

@@ -1,5 +1,6 @@
-import { TwTheme } from '../tw-config';
-import { Unit, StyleIR } from '../types';
+import type { TwTheme } from '../tw-config';
+import type { StyleIR } from '../types';
+import { Unit } from '../types';
 import { parseNumericValue, complete, toStyleVal } from '../helpers';
 
 export default function lineHeight(

src/resolve/opacity.ts

@@ -1,5 +1,5 @@
-import { TwTheme } from '../tw-config';
-import { StyleIR } from '../types';
+import type { TwTheme } from '../tw-config';
+import type { StyleIR } from '../types';
 import { parseNumericValue, complete } from '../helpers';
 
 export function opacity(value: string, config?: TwTheme['opacity']): StyleIR | null {

src/resolve/shadow.ts

@@ -1,4 +1,4 @@
-import { StyleIR } from '../types';
+import type { StyleIR } from '../types';
 import { parseUnconfigged } from '../helpers';
 
 export function shadowOpacity(value: string): StyleIR | null {

src/resolve/spacing.ts

@@ -1,5 +1,6 @@
-import { TwTheme } from '../tw-config';
-import { Direction, Unit, StyleIR } from '../types';
+import type { TwTheme } from '../tw-config';
+import type { Direction, StyleIR } from '../types';
+import { Unit } from '../types';
 import { parseNumericValue, parseUnconfigged, toStyleVal } from '../helpers';
 
 export default function spacing(

src/resolve/width-height.ts

@@ -1,5 +1,5 @@
-import { TwTheme } from '../tw-config';
-import { ParseContext, StyleIR } from '../types';
+import type { TwTheme } from '../tw-config';
+import type { ParseContext, StyleIR } from '../types';
 import { getCompleteStyle, complete, parseStyleVal, unconfiggedStyle } from '../helpers';
 
 export function widthHeight(

src/screens.ts

@@ -1,4 +1,4 @@
-import { TwTheme } from './tw-config';
+import type { TwTheme } from './tw-config';
 import { toPx, warn } from './helpers';
 
 type Screens = Record<string, [min: number, max: number, order: number]>;

src/styles.ts

@@ -1,4 +1,4 @@
-import { StyleIR, DependentStyle } from './types';
+import type { StyleIR, DependentStyle } from './types';
 import { complete } from './helpers';
 
 const defaultStyles: Array<[string, StyleIR]> = [

src/tw-config.ts

@@ -1,4 +1,4 @@
-import { PluginFunction } from './types';
+import type { PluginFunction } from './types';
 
 type TwFontSize =
   | string