Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@compiled/react

Package Overview
Dependencies
Maintainers
1
Versions
143
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@compiled/react - npm Package Compare versions

Comparing version 0.4.8-3ba34a820c9ec4161ecf27a1911c54efc534f5ca.0 to 0.4.8-466dddaa3d6f690687fa1bebd6146fc971314ce9.0

runtime/package.json
runtime/README.md

3

dist/browser/class-names/index.d.ts
import { ReactNode } from 'react';
import { CssFunction, BasicTemplateInterpolations } from '../types';
export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
export interface ClassNamesProps {
children: (opts: {
css: (css: CssFunction | CssFunction[], ...interpoltations: BasicTemplateInterpolations[]) => string;
css: (css: CssFunction | CssFunction[], ...interpolations: Interpolations) => string;
style: {

@@ -7,0 +8,0 @@ [key: string]: string;

6

dist/browser/codemods/codemods-helpers.js

@@ -50,2 +50,4 @@ export var getImportDeclarationCollection = function (_a) {

if (importDefaultSpecifierCollection.length > 0) {
var oldNode = importDeclarationPath.node;
var comments = oldNode.comments;
j(importDeclarationPath).replaceWith([

@@ -56,2 +58,6 @@ j.importDeclaration([

]);
var newNode = importDeclarationPath.node;
if (newNode !== oldNode) {
newNode.comments = comments;
}
}

@@ -58,0 +64,0 @@ });

6

dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.js

@@ -126,5 +126,11 @@ import { hasImportDeclaration, getImportDeclarationCollection, findImportSpecifierName, buildDefaultImportDeclaration, addCommentToStartOfFile, getAllImportSpecifiers, } from '../codemods-helpers';

importDeclarationCollection.forEach(function (importDeclarationPath) {
var oldNode = importDeclarationPath.node;
var comments = oldNode.comments;
j(importDeclarationPath).replaceWith([
j.importDeclaration([], j.literal(imports.compiledPackageName)),
]);
var newNode = importDeclarationPath.node;
if (newNode !== oldNode) {
newNode.comments = comments;
}
});

@@ -131,0 +137,0 @@ };

2

dist/browser/runtime/ax.d.ts

@@ -22,2 +22,2 @@ /**

*/
export default function ax(classNames: (string | undefined | false)[]): string;
export default function ax(classNames: (string | undefined | false)[]): string | undefined;

26

dist/browser/runtime/ax.js

@@ -29,16 +29,26 @@ var UNDERSCORE_UNICODE = 95;

export default function ax(classNames) {
if (classNames.length <= 1) {
// short circuit if theres no custom class names.
return classNames[0] || undefined;
}
var atomicGroups = {};
var i = -1;
while (++i < classNames.length) {
if (!classNames[i]) {
for (var i = 0; i < classNames.length; i++) {
var cls = classNames[i];
if (!cls) {
continue;
}
var groups = classNames[i].split(' ');
var x = -1;
while (++x < groups.length) {
atomicGroups[groups[x].slice(0, groups[x].charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined)] = groups[x];
var groups = cls.split(' ');
for (var x = 0; x < groups.length; x++) {
var atomic = groups[x];
var atomicGroupName = atomic.slice(0, atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined);
atomicGroups[atomicGroupName] = atomic;
}
}
return Object.values(atomicGroups).join(' ');
var str = '';
for (var key in atomicGroups) {
var value = atomicGroups[key];
str += value + ' ';
}
return str.slice(0, -1);
}
//# sourceMappingURL=ax.js.map

2

dist/browser/runtime/provider/provider-browser.d.ts
import { ProviderComponent, UseCacheHook } from './types';
/**
* Noops on the client
* Will return a singleton objet used for knowing if a sheet has been inserted.
*/

@@ -5,0 +5,0 @@ export declare const useCache: UseCacheHook;

16

dist/browser/runtime/provider/provider-browser.js

@@ -11,6 +11,18 @@ import { isNodeEnvironment } from '../is-node';

/**
* Noops on the client
* Iterates through all found style elements generated when server side rendering.
*
* @param cb
*/
export var useCache = function () { return inserted; };
var ssrStyles = document.querySelectorAll('style[data-cmpld]');
for (var i = 0; i < ssrStyles.length; i++) {
// Move all found server-side rendered style elements to the head before React hydration happens.
document.head.appendChild(ssrStyles[i]);
}
/**
* Will return a singleton objet used for knowing if a sheet has been inserted.
*/
export var useCache = function () {
return inserted;
};
/**
* Noops on the client

@@ -17,0 +29,0 @@ */

6

dist/browser/runtime/provider/provider-server.js
import * as React from 'react';
import { useRef, useContext, createContext } from 'react';
import { useContext, createContext } from 'react';
import { isNodeEnvironment } from '../is-node';

@@ -13,6 +13,6 @@ if (process.env.NODE_ENV === 'development' && !false) {

var CompiledComponent = function (props) {
var inserted = useRef(useCache());
return React.createElement(Cache.Provider, { value: inserted.current }, props.children);
var inserted = useCache();
return React.createElement(Cache.Provider, { value: inserted }, props.children);
};
export default CompiledComponent;
//# sourceMappingURL=provider-server.js.map

27

dist/browser/runtime/sheet.d.ts

@@ -8,15 +8,26 @@ import { StyleSheetOpts, Bucket } from './types';

/**
* Group sheets by bucket.
* Gets the bucket depending on the sheet.
* This function makes assumptions as to the form of the input class name.
*
* @returns { 'h': ['._a1234567:hover{ color: red; }', '._a1234567:hover{ color: green; }'] }
* @param sheets styles which are grouping under bucket
* Input:
*
* ```
* "._a1234567:hover{ color: red; }"
* ```
*
* Output:
*
* ```
* "h"
* ```
*
* @param sheet styles for which we are getting the bucket
*/
export declare const groupSheetsByBucket: (sheets: string[]) => Record<Bucket, string[]>;
export declare const getStyleBucketName: (sheet: string) => Bucket;
/**
* Returns a style sheet object that is used to move styles to the head of the application
* during runtime.
* Used to move styles to the head of the application during runtime.
*
* @param css string
* @param opts StyleSheetOpts
* @param inserted Singleton cache for tracking what styles have already been added to the head
*/
export default function createStyleSheet(opts: StyleSheetOpts): (css: string) => void;
export default function insertRule(css: string, opts: StyleSheetOpts): void;

47

dist/browser/runtime/sheet.js

@@ -60,6 +60,6 @@ /**

if (!styleBucketsInHead[bucketName]) {
var currentBucketIndex = styleBucketOrdering.indexOf(bucketName);
var currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
var nextBucketFromCache = null;
// Find the next bucket which we will add our new style bucket before.
while (++currentBucketIndex < styleBucketOrdering.length) {
for (; currentBucketIndex < styleBucketOrdering.length; currentBucketIndex++) {
var nextBucket = styleBucketsInHead[styleBucketOrdering[currentBucketIndex]];

@@ -97,3 +97,3 @@ if (nextBucket) {

*/
var getStyleBucketName = function (sheet) {
export var getStyleBucketName = function (sheet) {
// We are grouping all the at-rules like @media, @supports etc under `m` bucket.

@@ -117,35 +117,18 @@ if (sheet.charCodeAt(0) === 64 /* "@" */) {

/**
* Group sheets by bucket.
* Used to move styles to the head of the application during runtime.
*
* @returns { 'h': ['._a1234567:hover{ color: red; }', '._a1234567:hover{ color: green; }'] }
* @param sheets styles which are grouping under bucket
*/
export var groupSheetsByBucket = function (sheets) {
return sheets.reduce(function (accum, sheet) {
var bucketName = getStyleBucketName(sheet);
accum[bucketName] = accum[bucketName] || [];
accum[bucketName].push(sheet);
return accum;
}, {});
};
/**
* Returns a style sheet object that is used to move styles to the head of the application
* during runtime.
*
* @param css string
* @param opts StyleSheetOpts
* @param inserted Singleton cache for tracking what styles have already been added to the head
*/
export default function createStyleSheet(opts) {
return function (css) {
var bucketName = getStyleBucketName(css);
var style = lazyAddStyleBucketToHead(bucketName, opts);
if (process.env.NODE_ENV === 'production') {
var sheet = style.sheet;
sheet.insertRule(css, sheet.cssRules.length);
}
else {
style.appendChild(document.createTextNode(css));
}
};
export default function insertRule(css, opts) {
var bucketName = getStyleBucketName(css);
var style = lazyAddStyleBucketToHead(bucketName, opts);
if (process.env.NODE_ENV === 'production') {
var sheet = style.sheet;
sheet.insertRule(css, sheet.cssRules.length);
}
else {
style.appendChild(document.createTextNode(css));
}
}
//# sourceMappingURL=sheet.js.map

7

dist/browser/runtime/style.d.ts

@@ -1,2 +0,2 @@

/// <reference types="react" />
import React from 'react';
import { StyleSheetOpts } from './types';

@@ -10,3 +10,4 @@ interface StyleProps extends StyleSheetOpts {

}
export default function Style(props: StyleProps): JSX.Element | null;
export {};
declare function Style(props: StyleProps): JSX.Element | null;
declare const _default: React.MemoExoticComponent<typeof Style>;
export default _default;

49

dist/browser/runtime/style.js

@@ -1,9 +0,7 @@

import * as React from 'react';
import createStyleSheet, { groupSheetsByBucket, styleBucketOrdering } from './sheet';
import React, { memo } from 'react';
import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
import { analyzeCssInDev } from './dev-warnings';
import { useCache } from './provider';
import { isNodeEnvironment } from './is-node';
// Variable declaration list because it's smaller.
var stylesheet;
export default function Style(props) {
function Style(props) {
var inserted = useCache();

@@ -13,18 +11,32 @@ if (process.env.NODE_ENV === 'development') {

}
var sheets = props.children.filter(function (sheet) {
if (inserted[sheet]) {
return false;
}
return (inserted[sheet] = true);
});
if (sheets.length) {
if (props.children.length) {
if (false) {
// The following code will not exist in the browser bundle.
var sheetsGroupedByBucket_1 = groupSheetsByBucket(sheets);
return (React.createElement("style", { nonce: props.nonce }, styleBucketOrdering.map(function (bucket) { return sheetsGroupedByBucket_1[bucket]; })));
var bucketedSheets_1 = {};
var hasSheets = false;
for (var i = 0; i < props.children.length; i++) {
var sheet = props.children[i];
if (inserted[sheet]) {
continue;
}
else {
inserted[sheet] = true;
hasSheets = true;
}
var bucketName = getStyleBucketName(sheet);
bucketedSheets_1[bucketName] = (bucketedSheets_1[bucketName] || '') + sheet;
}
if (!hasSheets) {
return null;
}
return (React.createElement("style", { "data-cmpld": true, nonce: props.nonce }, styleBucketOrdering.map(function (bucket) { return bucketedSheets_1[bucket]; }).join('')));
}
else {
// Keep re-assigning over ternary because it's smaller
stylesheet = stylesheet || createStyleSheet(props);
sheets.forEach(stylesheet);
for (var i = 0; i < props.children.length; i++) {
var sheet = props.children[i];
if (inserted[sheet]) {
continue;
}
inserted[sheet] = true;
insertRule(sheet, props);
}
}

@@ -34,2 +46,3 @@ }

}
export default memo(Style, function () { return true; });
//# sourceMappingURL=style.js.map

5

dist/browser/styled/index.d.ts

@@ -16,2 +16,3 @@ import { ComponentType } from 'react';

}
export declare type Interpolations<TProps extends {}> = (BasicTemplateInterpolations | FunctionIterpolation<TProps> | CssObject<TProps> | CssObject<TProps>[])[];
/**

@@ -23,6 +24,6 @@ * This allows us to take the generic `TTag` (that will be a valid `DOM` tag) and then use it to

export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements> {
<TProps extends {}>(css: CssObject<TProps> | CssObject<TProps>[], ...interpoltations: (BasicTemplateInterpolations | FunctionIterpolation<TProps>)[]): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
<TProps extends {}>(css: CssObject<TProps> | CssObject<TProps>[], ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
}
export interface StyledFunctionFromComponent<TInheritedProps extends {}> {
<TProps extends {}>(css: CssObject<TProps> | TemplateStringsArray, ...interpoltations: (BasicTemplateInterpolations | FunctionIterpolation<TProps>)[]): React.ComponentType<TProps & StyledProps & TInheritedProps>;
<TProps extends {}>(css: CssObject<TProps> | TemplateStringsArray, ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
}

@@ -29,0 +30,0 @@ export declare type StyledComponentMap = {

3

dist/class-names/index.d.ts
import { ReactNode } from 'react';
import { CssFunction, BasicTemplateInterpolations } from '../types';
export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
export interface ClassNamesProps {
children: (opts: {
css: (css: CssFunction | CssFunction[], ...interpoltations: BasicTemplateInterpolations[]) => string;
css: (css: CssFunction | CssFunction[], ...interpolations: Interpolations) => string;
style: {

@@ -7,0 +8,0 @@ [key: string]: string;

6

dist/codemods/codemods-helpers.js

@@ -50,2 +50,4 @@ export var getImportDeclarationCollection = function (_a) {

if (importDefaultSpecifierCollection.length > 0) {
var oldNode = importDeclarationPath.node;
var comments = oldNode.comments;
j(importDeclarationPath).replaceWith([

@@ -56,2 +58,6 @@ j.importDeclaration([

]);
var newNode = importDeclarationPath.node;
if (newNode !== oldNode) {
newNode.comments = comments;
}
}

@@ -58,0 +64,0 @@ });

6

dist/codemods/emotion-to-compiled/emotion-to-compiled.js

@@ -126,5 +126,11 @@ import { hasImportDeclaration, getImportDeclarationCollection, findImportSpecifierName, buildDefaultImportDeclaration, addCommentToStartOfFile, getAllImportSpecifiers, } from '../codemods-helpers';

importDeclarationCollection.forEach(function (importDeclarationPath) {
var oldNode = importDeclarationPath.node;
var comments = oldNode.comments;
j(importDeclarationPath).replaceWith([
j.importDeclaration([], j.literal(imports.compiledPackageName)),
]);
var newNode = importDeclarationPath.node;
if (newNode !== oldNode) {
newNode.comments = comments;
}
});

@@ -131,0 +137,0 @@ };

2

dist/runtime/ax.d.ts

@@ -22,2 +22,2 @@ /**

*/
export default function ax(classNames: (string | undefined | false)[]): string;
export default function ax(classNames: (string | undefined | false)[]): string | undefined;

26

dist/runtime/ax.js

@@ -29,16 +29,26 @@ var UNDERSCORE_UNICODE = 95;

export default function ax(classNames) {
if (classNames.length <= 1) {
// short circuit if theres no custom class names.
return classNames[0] || undefined;
}
var atomicGroups = {};
var i = -1;
while (++i < classNames.length) {
if (!classNames[i]) {
for (var i = 0; i < classNames.length; i++) {
var cls = classNames[i];
if (!cls) {
continue;
}
var groups = classNames[i].split(' ');
var x = -1;
while (++x < groups.length) {
atomicGroups[groups[x].slice(0, groups[x].charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined)] = groups[x];
var groups = cls.split(' ');
for (var x = 0; x < groups.length; x++) {
var atomic = groups[x];
var atomicGroupName = atomic.slice(0, atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined);
atomicGroups[atomicGroupName] = atomic;
}
}
return Object.values(atomicGroups).join(' ');
var str = '';
for (var key in atomicGroups) {
var value = atomicGroups[key];
str += value + ' ';
}
return str.slice(0, -1);
}
//# sourceMappingURL=ax.js.map

2

dist/runtime/provider/provider-browser.d.ts
import { ProviderComponent, UseCacheHook } from './types';
/**
* Noops on the client
* Will return a singleton objet used for knowing if a sheet has been inserted.
*/

@@ -5,0 +5,0 @@ export declare const useCache: UseCacheHook;

16

dist/runtime/provider/provider-browser.js

@@ -11,6 +11,18 @@ import { isNodeEnvironment } from '../is-node';

/**
* Noops on the client
* Iterates through all found style elements generated when server side rendering.
*
* @param cb
*/
export var useCache = function () { return inserted; };
var ssrStyles = document.querySelectorAll('style[data-cmpld]');
for (var i = 0; i < ssrStyles.length; i++) {
// Move all found server-side rendered style elements to the head before React hydration happens.
document.head.appendChild(ssrStyles[i]);
}
/**
* Will return a singleton objet used for knowing if a sheet has been inserted.
*/
export var useCache = function () {
return inserted;
};
/**
* Noops on the client

@@ -17,0 +29,0 @@ */

6

dist/runtime/provider/provider-server.js
import * as React from 'react';
import { useRef, useContext, createContext } from 'react';
import { useContext, createContext } from 'react';
import { isNodeEnvironment } from '../is-node';

@@ -13,6 +13,6 @@ if (process.env.NODE_ENV === 'development' && !isNodeEnvironment()) {

var CompiledComponent = function (props) {
var inserted = useRef(useCache());
return React.createElement(Cache.Provider, { value: inserted.current }, props.children);
var inserted = useCache();
return React.createElement(Cache.Provider, { value: inserted }, props.children);
};
export default CompiledComponent;
//# sourceMappingURL=provider-server.js.map

27

dist/runtime/sheet.d.ts

@@ -8,15 +8,26 @@ import { StyleSheetOpts, Bucket } from './types';

/**
* Group sheets by bucket.
* Gets the bucket depending on the sheet.
* This function makes assumptions as to the form of the input class name.
*
* @returns { 'h': ['._a1234567:hover{ color: red; }', '._a1234567:hover{ color: green; }'] }
* @param sheets styles which are grouping under bucket
* Input:
*
* ```
* "._a1234567:hover{ color: red; }"
* ```
*
* Output:
*
* ```
* "h"
* ```
*
* @param sheet styles for which we are getting the bucket
*/
export declare const groupSheetsByBucket: (sheets: string[]) => Record<Bucket, string[]>;
export declare const getStyleBucketName: (sheet: string) => Bucket;
/**
* Returns a style sheet object that is used to move styles to the head of the application
* during runtime.
* Used to move styles to the head of the application during runtime.
*
* @param css string
* @param opts StyleSheetOpts
* @param inserted Singleton cache for tracking what styles have already been added to the head
*/
export default function createStyleSheet(opts: StyleSheetOpts): (css: string) => void;
export default function insertRule(css: string, opts: StyleSheetOpts): void;

47

dist/runtime/sheet.js

@@ -60,6 +60,6 @@ /**

if (!styleBucketsInHead[bucketName]) {
var currentBucketIndex = styleBucketOrdering.indexOf(bucketName);
var currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
var nextBucketFromCache = null;
// Find the next bucket which we will add our new style bucket before.
while (++currentBucketIndex < styleBucketOrdering.length) {
for (; currentBucketIndex < styleBucketOrdering.length; currentBucketIndex++) {
var nextBucket = styleBucketsInHead[styleBucketOrdering[currentBucketIndex]];

@@ -97,3 +97,3 @@ if (nextBucket) {

*/
var getStyleBucketName = function (sheet) {
export var getStyleBucketName = function (sheet) {
// We are grouping all the at-rules like @media, @supports etc under `m` bucket.

@@ -117,35 +117,18 @@ if (sheet.charCodeAt(0) === 64 /* "@" */) {

/**
* Group sheets by bucket.
* Used to move styles to the head of the application during runtime.
*
* @returns { 'h': ['._a1234567:hover{ color: red; }', '._a1234567:hover{ color: green; }'] }
* @param sheets styles which are grouping under bucket
*/
export var groupSheetsByBucket = function (sheets) {
return sheets.reduce(function (accum, sheet) {
var bucketName = getStyleBucketName(sheet);
accum[bucketName] = accum[bucketName] || [];
accum[bucketName].push(sheet);
return accum;
}, {});
};
/**
* Returns a style sheet object that is used to move styles to the head of the application
* during runtime.
*
* @param css string
* @param opts StyleSheetOpts
* @param inserted Singleton cache for tracking what styles have already been added to the head
*/
export default function createStyleSheet(opts) {
return function (css) {
var bucketName = getStyleBucketName(css);
var style = lazyAddStyleBucketToHead(bucketName, opts);
if (process.env.NODE_ENV === 'production') {
var sheet = style.sheet;
sheet.insertRule(css, sheet.cssRules.length);
}
else {
style.appendChild(document.createTextNode(css));
}
};
export default function insertRule(css, opts) {
var bucketName = getStyleBucketName(css);
var style = lazyAddStyleBucketToHead(bucketName, opts);
if (process.env.NODE_ENV === 'production') {
var sheet = style.sheet;
sheet.insertRule(css, sheet.cssRules.length);
}
else {
style.appendChild(document.createTextNode(css));
}
}
//# sourceMappingURL=sheet.js.map

7

dist/runtime/style.d.ts

@@ -1,2 +0,2 @@

/// <reference types="react" />
import React from 'react';
import { StyleSheetOpts } from './types';

@@ -10,3 +10,4 @@ interface StyleProps extends StyleSheetOpts {

}
export default function Style(props: StyleProps): JSX.Element | null;
export {};
declare function Style(props: StyleProps): JSX.Element | null;
declare const _default: React.MemoExoticComponent<typeof Style>;
export default _default;

49

dist/runtime/style.js

@@ -1,9 +0,7 @@

import * as React from 'react';
import createStyleSheet, { groupSheetsByBucket, styleBucketOrdering } from './sheet';
import React, { memo } from 'react';
import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
import { analyzeCssInDev } from './dev-warnings';
import { useCache } from './provider';
import { isNodeEnvironment } from './is-node';
// Variable declaration list because it's smaller.
var stylesheet;
export default function Style(props) {
function Style(props) {
var inserted = useCache();

@@ -13,18 +11,32 @@ if (process.env.NODE_ENV === 'development') {

}
var sheets = props.children.filter(function (sheet) {
if (inserted[sheet]) {
return false;
}
return (inserted[sheet] = true);
});
if (sheets.length) {
if (props.children.length) {
if (isNodeEnvironment()) {
// The following code will not exist in the browser bundle.
var sheetsGroupedByBucket_1 = groupSheetsByBucket(sheets);
return (React.createElement("style", { nonce: props.nonce }, styleBucketOrdering.map(function (bucket) { return sheetsGroupedByBucket_1[bucket]; })));
var bucketedSheets_1 = {};
var hasSheets = false;
for (var i = 0; i < props.children.length; i++) {
var sheet = props.children[i];
if (inserted[sheet]) {
continue;
}
else {
inserted[sheet] = true;
hasSheets = true;
}
var bucketName = getStyleBucketName(sheet);
bucketedSheets_1[bucketName] = (bucketedSheets_1[bucketName] || '') + sheet;
}
if (!hasSheets) {
return null;
}
return (React.createElement("style", { "data-cmpld": true, nonce: props.nonce }, styleBucketOrdering.map(function (bucket) { return bucketedSheets_1[bucket]; }).join('')));
}
else {
// Keep re-assigning over ternary because it's smaller
stylesheet = stylesheet || createStyleSheet(props);
sheets.forEach(stylesheet);
for (var i = 0; i < props.children.length; i++) {
var sheet = props.children[i];
if (inserted[sheet]) {
continue;
}
inserted[sheet] = true;
insertRule(sheet, props);
}
}

@@ -34,2 +46,3 @@ }

}
export default memo(Style, function () { return true; });
//# sourceMappingURL=style.js.map

5

dist/styled/index.d.ts

@@ -16,2 +16,3 @@ import { ComponentType } from 'react';

}
export declare type Interpolations<TProps extends {}> = (BasicTemplateInterpolations | FunctionIterpolation<TProps> | CssObject<TProps> | CssObject<TProps>[])[];
/**

@@ -23,6 +24,6 @@ * This allows us to take the generic `TTag` (that will be a valid `DOM` tag) and then use it to

export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements> {
<TProps extends {}>(css: CssObject<TProps> | CssObject<TProps>[], ...interpoltations: (BasicTemplateInterpolations | FunctionIterpolation<TProps>)[]): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
<TProps extends {}>(css: CssObject<TProps> | CssObject<TProps>[], ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
}
export interface StyledFunctionFromComponent<TInheritedProps extends {}> {
<TProps extends {}>(css: CssObject<TProps> | TemplateStringsArray, ...interpoltations: (BasicTemplateInterpolations | FunctionIterpolation<TProps>)[]): React.ComponentType<TProps & StyledProps & TInheritedProps>;
<TProps extends {}>(css: CssObject<TProps> | TemplateStringsArray, ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
}

@@ -29,0 +30,0 @@ export declare type StyledComponentMap = {

52

package.json

@@ -1,51 +0,1 @@

{
"name": "@compiled/react",
"version": "0.4.8-3ba34a820c9ec4161ecf27a1911c54efc534f5ca.0",
"description": "The CSS in JS authoring experience you love without the runtime cost",
"author": "Michael Dougall",
"license": "Apache-2.0",
"homepage": "https://compiledcssinjs.com",
"bugs": "https://github.com/atlassian-labs/compiled-css-in-js/issues/new?assignees=&labels=bug&template=bug_report.md",
"repository": {
"type": "git",
"url": "https://github.com/atlassian-labs/compiled-css-in-js.git",
"directory": "packages/react"
},
"main": "./dist/index.js",
"module": "./dist/index.js",
"browser": "./dist/browser/index.js",
"types": "./dist/index.d.ts",
"sideEffects": false,
"keywords": [
"compiled",
"css-in-js",
"styled-components",
"emotion-js",
"typescript"
],
"exports": {
".": "./dist/index.js",
"./babel-plugin": "./dist/babel-plugin.js",
"./runtime": "./dist/runtime.js"
},
"files": [
"dist",
"src",
"babel-plugin",
"README.md"
],
"dependencies": {
"csstype": "^2.0.0"
},
"peerDependencies": {
"react": "^16.12.0"
},
"devDependencies": {
"@compiled/babel-plugin": "0.4.7",
"@testing-library/react": "^10.0.4",
"@types/jscodeshift": "^0.7.1",
"jscodeshift": "^0.11.0",
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
{"name":"@compiled/react","version":"0.4.8-466dddaa3d6f690687fa1bebd6146fc971314ce9.0","description":"The CSS in JS authoring experience you love without the runtime cost","author":"Michael Dougall","license":"Apache-2.0","homepage":"https://compiledcssinjs.com","bugs":"https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md","repository":{"type":"git","url":"https://github.com/atlassian-labs/compiled.git","directory":"packages/react"},"main":"./dist/index.js","module":"./dist/index.js","browser":"./dist/browser/index.js","types":"./dist/index.d.ts","sideEffects":false,"keywords":["compiled","css-in-js","styled-components","emotion-js","typescript"],"exports":{".":"./dist/index.js","./babel-plugin":"./dist/babel-plugin.js","./runtime":"./dist/runtime.js"},"files":["dist","src","babel-plugin","runtime","README.md"],"dependencies":{"@compiled/babel-plugin":"0.4.8-466dddaa3d6f690687fa1bebd6146fc971314ce9.0","csstype":"^2.0.0"},"peerDependencies":{"react":"^16.12.0"},"devDependencies":{"@testing-library/react":"^10.0.4","@types/jscodeshift":"^0.7.1","jscodeshift":"^0.11.0","react":"^16.13.1","react-dom":"^16.13.1"}}

45

src/codemods/emotion-to-compiled/README.md

@@ -5,7 +5,7 @@ # emotion-to-compiled

## Usage
```bash
# https://github.com/facebook/jscodeshift#usage-cli
npx jscodeshift --parser=tsx --extensions=tsx --transform node_modules/@compiled/react/dist/codemods/emotion-to-compiled <path>
# <path> is the source code folder eg. src
npx @compiled/cli --preset codemods
# and follow the instructions
```

@@ -61,36 +61,13 @@

## Caveats
## Updating Instructions
### Generating CSS at runtime
When wanting to update to a later version make sure `@compiled/cli` is being ran with the same version.
If you are generating CSS at runtime, you'll have to do conversion manually. Check out [the docs](https://compiledcssinjs.com/docs/migrating#generating-css-at-runtime) which explains why this conversion is necessary.
> Watch out for it being cached!
Please convert this code:
For example when upgrading `@compiled/react` to `v0.6.0` where you've already used the CLI,
on your next run explicitly set the version number:
```javascript
import styled from '@emotion/styled';
const getBackgroundGradient = (color, percent) => ({
background: `linear-gradient(${color}, ${color}) 0 / ${percent}% 100% no-repeat
${color}`,
});
styled.input`
＄{(props) => getBackgroundGradient(props.color, props.percent)}
`;
```bash
npx @compiled/cli@0.6.0 --preset codemods
```
as below before you run this codemod:
```javascript
import styled from '@emotion/styled';
const getBackgroundGradient = (color, percent) => ({
`linear-gradient(${color}, ${color}) 0 / ${percent}% 100% no-repeat
${color}`,
});
styled.input`
background: ＄{props => getBackgroundGradient(props.color, props.percent)};
`;
```

45

src/codemods/styled-components-to-compiled/README.md

@@ -5,7 +5,7 @@ # styled-components-to-compiled

## Usage
```bash
# https://github.com/facebook/jscodeshift#usage-cli
npx jscodeshift --parser=tsx --extensions=tsx --transform node_modules/@compiled/react/dist/codemods/styled-components-to-compiled <path>
# <path> is the source code folder eg. src
npx @compiled/cli --preset codemods
# and follow the instructions
```

@@ -27,36 +27,13 @@

## Caveats
## Updating Instructions
### Generating CSS at runtime
When wanting to update to a later version make sure `@compiled/cli` is being ran with the same version.
If you are generating CSS at runtime, you'll have to do conversion manually. Check out [the docs](https://compiledcssinjs.com/docs/migrating#generating-css-at-runtime) which explains why this conversion is necessary.
> Watch out for it being cached!
Please convert this code:
For example when upgrading `@compiled/react` to `v0.6.0` where you've already used the CLI,
on your next run explicitly set the version number:
```javascript
import styled from 'styled-components';
const getBackgroundGradient = (color, percent) => ({
background: `linear-gradient(${color}, ${color}) 0 / ${percent}% 100% no-repeat
${color}`,
});
styled.input`
＄{(props) => getBackgroundGradient(props.color, props.percent)}
`;
```bash
npx @compiled/cli@0.6.0 --preset codemods
```
as below before you run this codemod:
```javascript
import styled from 'styled-components';
const getBackgroundGradient = (color, percent) => ({
`linear-gradient(${color}, ${color}) 0 / ${percent}% 100% no-repeat
${color}`,
});
styled.input`
background: ＄{props => getBackgroundGradient(props.color, props.percent)};
`;
```
dist/browser/class-names/index.js.map

Sorry, the diff of this file is not supported yet

dist/browser/codemods/codemods-helpers.js.map

Sorry, the diff of this file is not supported yet

dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.js.map

Sorry, the diff of this file is not supported yet

dist/browser/runtime/ax.js.map

Sorry, the diff of this file is not supported yet

dist/browser/runtime/provider/provider-browser.js.map

Sorry, the diff of this file is not supported yet

dist/browser/runtime/provider/provider-server.js.map

Sorry, the diff of this file is not supported yet

dist/browser/runtime/sheet.js.map

Sorry, the diff of this file is not supported yet

dist/browser/runtime/style.js.map

Sorry, the diff of this file is not supported yet

dist/browser/styled/index.js.map

Sorry, the diff of this file is not supported yet

dist/class-names/index.js.map

Sorry, the diff of this file is not supported yet

dist/codemods/codemods-helpers.js.map

Sorry, the diff of this file is not supported yet

dist/codemods/emotion-to-compiled/emotion-to-compiled.js.map

Sorry, the diff of this file is not supported yet

dist/runtime/ax.js.map

Sorry, the diff of this file is not supported yet

dist/runtime/provider/provider-browser.js.map

Sorry, the diff of this file is not supported yet

dist/runtime/provider/provider-server.js.map

Sorry, the diff of this file is not supported yet

dist/runtime/sheet.js.map

Sorry, the diff of this file is not supported yet

dist/runtime/style.js.map

Sorry, the diff of this file is not supported yet

dist/styled/index.js.map

Sorry, the diff of this file is not supported yet

src/__tests__/server-side-hydrate.test.tsx

Sorry, the diff of this file is not supported yet

src/__tests__/ssr.test.tsx

Sorry, the diff of this file is not supported yet

src/class-names/__tests__/index.test.tsx

Sorry, the diff of this file is not supported yet

src/class-names/index.tsx

Sorry, the diff of this file is not supported yet

src/codemods/codemods-helpers.tsx

Sorry, the diff of this file is not supported yet

src/codemods/emotion-to-compiled/__tests__/emotion-to-compiled.test.tsx

Sorry, the diff of this file is not supported yet

src/codemods/emotion-to-compiled/emotion-to-compiled.tsx

Sorry, the diff of this file is not supported yet

src/codemods/styled-components-to-compiled/__tests__/styled-components-to-compiled.test.tsx

Sorry, the diff of this file is not supported yet

src/runtime/__tests__/style-ssr.test.tsx

Sorry, the diff of this file is not supported yet

src/runtime/ax.tsx

Sorry, the diff of this file is not supported yet

src/runtime/provider/provider-browser.tsx

Sorry, the diff of this file is not supported yet

src/runtime/provider/provider-server.tsx

Sorry, the diff of this file is not supported yet

src/runtime/sheet.tsx

Sorry, the diff of this file is not supported yet

src/runtime/style.tsx

Sorry, the diff of this file is not supported yet

src/styled/__tests__/index.test.tsx

Sorry, the diff of this file is not supported yet

src/styled/index.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc