		@@ -0,1 +1,2 @@
		/// <reference types="node" />
		import emotion from './emotion';
		@@ -12,2 +13,3 @@ export declare const flush: () => void, hydrate: (ids: string[]) => void, cx: (...classNames: import("create-emotion").ClassNamesArg[]) => string, merge: (className: string) => string, getRegisteredStyles: (registeredStyles: string[], className: string) => string, injectGlobal: {
		}, sheet: import("create-emotion").StyleSheet, cache: import("create-emotion").EmotionCache;
		export declare const extractCritical: (html: string) => import("create-emotion-server").EmotionCritical, renderStylesToString: (html: string) => string, renderStylesToNodeStream: () => NodeJS.ReadWriteStream;
		export default emotion;

package.json

		{
		"name": "@leafygreen-ui/emotion",
		"version": "1.0.6",
		"version": "2.0.0",
		"description": "leafyGreen UI Kit's Custom Instance of Emotion",
		"main": "./dist/index.js",
		"browser": "./dist/index.web.js",
		"main": "./dist/index.node.js",
		"types": "./dist/index.d.ts",
		"scripts": {
		"build": "../../node_modules/.bin/webpack --config ../../webpack.config.js",
		"ts:emit": "tsc --project ./tsconfig.json"
		"build": "../../node_modules/.bin/webpack --config ../../webpack.config.js"
		},
		@@ -18,2 +18,3 @@ "keywords": [],
		"create-emotion": "^10.0.7",
		"create-emotion-server": "10.0.27",
		"emotion": "^10.0.7"
		@@ -20,0 +21,0 @@ },

src/emotion.ts

		import createEmotion from 'create-emotion';

		// __TARGET__ is a global variable that indicates the webpack build target.
		//
		// We're typing this here because doing it globally was proving problematic.
		// We should solve for this if we need to use __TARGET__ elsewhere.
		declare const __TARGET__: 'web' \| 'node';

		interface CreateEmotionConfig {
		key: string;
		container?: HTMLElement;
		}

		// In case the original emotion, and create-emotion packages become unsupported,
		@@ -9,10 +20,13 @@ // we should consider implementing our own wrapper around createCache like what's
		function createEmotionInstance() {
		const head = document.head;
		const config = {
		container: document.createElement('div'),
		const config: CreateEmotionConfig = {
		key: 'leafygreen-ui',
		};

		head.insertBefore(config.container, head.firstChild);
		if (__TARGET__ === 'web') {
		config.container = document.createElement('div');

		const head = document.head;
		head.insertBefore(config.container, head.firstChild);
		}

		return createEmotion(config);
		@@ -19,0 +33,0 @@ }

src/index.ts

		import emotion from './emotion';
		import createEmotionServer from 'create-emotion-server';

		@@ -15,2 +16,9 @@ export const {
		} = emotion;

		export const {
		extractCritical,
		renderStylesToString,
		renderStylesToNodeStream,
		} = createEmotionServer(cache);

		export default emotion;

tsconfig.json

		{
		"extends": "../../package.tsconfig.json",
		"compilerOptions": {
		"declarationDir": "dist"
		"declarationDir": "dist",
		"rootDir": "src"
		},
		"include": ["./*/"]
		"include": ["src/*/"]
		}

dist/index.js

dist/index.js.map

@leafygreen-ui/emotion - npm Package Compare versions

New alerts