@compiled/react - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

CHANGELOG.md

 # @compiled/react
 
+## 0.8.0
+
+### Minor Changes
+
+- 4210ff6: Add flow types support
+- 53935b3: Add `ObjectExpression` support to `css`
+
 ## 0.7.0
@@ -4,0 +11,0 @@

dist/browser/class-names/index.d.ts

@@ -1,3 +0,3 @@
-import { ReactNode } from 'react';
-import { CssFunction, BasicTemplateInterpolations } from '../types';
+import type { ReactNode } from 'react';
+import type { CssFunction, BasicTemplateInterpolations } from '../types';
 export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
@@ -4,0 +4,0 @@ export interface ClassNamesProps {

dist/browser/css/index.d.ts

 import type { CSSProps } from '../types';
 /**
- * Create styles that can be re-used between components.
+ * Create styles that can be re-used between components with a template literal.
  *
@@ -16,1 +16,14 @@ * ```
 export default function css(_css: TemplateStringsArray, ..._values: (string | number)[]): CSSProps;
+/**
+ * Create styles that can be re-used between components with an object
+ *
+ * ```
+ * css({ color: 'red' });
+ * ```
+ *
+ * For more help, read the docs:
+ * https://compiledcssinjs.com/docs/api-css
+ *
+ * @param css
+ */
+export default function css(_css: CSSProps): CSSProps;

dist/browser/css/index.js

 import { createSetupError } from '../utils/error';
-/**
- * Create styles that can be re-used between components.
- *
- * ```
- * css`color: red;`;
- * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
- *
- * @param css
- * @param values
- */
 export default function css(_css) {
@@ -16,0 +3,0 @@ var _values = [];

dist/browser/index.d.ts

@@ -0,1 +1,2 @@
+import type { CssFunction, CSSProps } from './types';
 export { keyframes } from './keyframes';
@@ -5,3 +6,4 @@ export { styled } from './styled';
 export { default as css } from './css';
-import { CssFunction } from './types';
+export type { CssFunction, CSSProps };
+export type { CssObject } from './styled';
 declare module 'react' {
@@ -8,0 +10,0 @@ interface DOMAttributes<T> {

dist/browser/runtime/sheet.d.ts

@@ -1,2 +0,2 @@
-import { StyleSheetOpts, Bucket } from './types';
+import type { StyleSheetOpts, Bucket } from './types';
 /**
@@ -3,0 +3,0 @@ * Ordered style buckets using their short psuedo name.

dist/browser/runtime/style-cache.d.ts

@@ -1,2 +0,2 @@
-import { ProviderComponent, UseCacheHook } from './types';
+import type { ProviderComponent, UseCacheHook } from './types';
 /**
@@ -3,0 +3,0 @@ * Hook using the cache created on the server or client.

dist/browser/runtime/style.d.ts

 /// <reference types="react" />
-import { StyleSheetOpts } from './types';
+import type { StyleSheetOpts } from './types';
 interface StyleProps extends StyleSheetOpts {
@@ -4,0 +4,0 @@ /**

dist/browser/styled/index.d.ts

@@ -1,3 +0,3 @@
-import { ComponentType } from 'react';
-import { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
+import type { ComponentType } from 'react';
+import type { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
 export interface FunctionIterpolation<TProps> {
@@ -23,6 +23,6 @@ (props: TProps): CSSProps | string | number | boolean | undefined;
 export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements> {
-    <TProps extends unknown>(css: CssObject<TProps> | CssObject<TProps>[], ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
+    <TProps extends unknown>(css: CssObject<TProps> | CssObject<TProps>[], ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
 }
 export interface StyledFunctionFromComponent<TInheritedProps extends unknown> {
-    <TProps extends unknown>(css: CssObject<TProps> | TemplateStringsArray, ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
+    <TProps extends unknown>(css: CssObject<TProps> | TemplateStringsArray, ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
 }
@@ -29,0 +29,0 @@ export declare type StyledComponentMap = {

dist/browser/types.d.ts

@@ -1,2 +0,2 @@
-import * as CSS from 'csstype';
+import type * as CSS from 'csstype';
 /**
@@ -3,0 +3,0 @@ * Typing for the interpolations.

dist/cjs/class-names/index.d.ts

@@ -1,3 +0,3 @@
-import { ReactNode } from 'react';
-import { CssFunction, BasicTemplateInterpolations } from '../types';
+import type { ReactNode } from 'react';
+import type { CssFunction, BasicTemplateInterpolations } from '../types';
 export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
@@ -4,0 +4,0 @@ export interface ClassNamesProps {

dist/cjs/css/index.d.ts

 import type { CSSProps } from '../types';
 /**
- * Create styles that can be re-used between components.
+ * Create styles that can be re-used between components with a template literal.
  *
@@ -16,1 +16,14 @@ * ```
 export default function css(_css: TemplateStringsArray, ..._values: (string | number)[]): CSSProps;
+/**
+ * Create styles that can be re-used between components with an object
+ *
+ * ```
+ * css({ color: 'red' });
+ * ```
+ *
+ * For more help, read the docs:
+ * https://compiledcssinjs.com/docs/api-css
+ *
+ * @param css
+ */
+export default function css(_css: CSSProps): CSSProps;

dist/cjs/css/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var error_1 = require("../utils/error");
-/**
- * Create styles that can be re-used between components.
- *
- * ```
- * css`color: red;`;
- * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
- *
- * @param css
- * @param values
- */
 function css(_css) {
@@ -18,0 +5,0 @@ var _values = [];

dist/cjs/index.d.ts

@@ -0,1 +1,2 @@
+import type { CssFunction, CSSProps } from './types';
 export { keyframes } from './keyframes';
@@ -5,3 +6,4 @@ export { styled } from './styled';
 export { default as css } from './css';
-import { CssFunction } from './types';
+export type { CssFunction, CSSProps };
+export type { CssObject } from './styled';
 declare module 'react' {
@@ -8,0 +10,0 @@ interface DOMAttributes<T> {

dist/cjs/runtime/sheet.d.ts

@@ -1,2 +0,2 @@
-import { StyleSheetOpts, Bucket } from './types';
+import type { StyleSheetOpts, Bucket } from './types';
 /**
@@ -3,0 +3,0 @@ * Ordered style buckets using their short psuedo name.

dist/cjs/runtime/style-cache.d.ts

@@ -1,2 +0,2 @@
-import { ProviderComponent, UseCacheHook } from './types';
+import type { ProviderComponent, UseCacheHook } from './types';
 /**
@@ -3,0 +3,0 @@ * Hook using the cache created on the server or client.

dist/cjs/runtime/style.d.ts

 /// <reference types="react" />
-import { StyleSheetOpts } from './types';
+import type { StyleSheetOpts } from './types';
 interface StyleProps extends StyleSheetOpts {
@@ -4,0 +4,0 @@ /**

dist/cjs/styled/index.d.ts

@@ -1,3 +0,3 @@
-import { ComponentType } from 'react';
-import { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
+import type { ComponentType } from 'react';
+import type { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
 export interface FunctionIterpolation<TProps> {
@@ -23,6 +23,6 @@ (props: TProps): CSSProps | string | number | boolean | undefined;
 export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements> {
-    <TProps extends unknown>(css: CssObject<TProps> | CssObject<TProps>[], ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
+    <TProps extends unknown>(css: CssObject<TProps> | CssObject<TProps>[], ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
 }
 export interface StyledFunctionFromComponent<TInheritedProps extends unknown> {
-    <TProps extends unknown>(css: CssObject<TProps> | TemplateStringsArray, ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
+    <TProps extends unknown>(css: CssObject<TProps> | TemplateStringsArray, ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
 }
@@ -29,0 +29,0 @@ export declare type StyledComponentMap = {

dist/cjs/types.d.ts

@@ -1,2 +0,2 @@
-import * as CSS from 'csstype';
+import type * as CSS from 'csstype';
 /**
@@ -3,0 +3,0 @@ * Typing for the interpolations.

dist/esm/class-names/index.d.ts

@@ -1,3 +0,3 @@
-import { ReactNode } from 'react';
-import { CssFunction, BasicTemplateInterpolations } from '../types';
+import type { ReactNode } from 'react';
+import type { CssFunction, BasicTemplateInterpolations } from '../types';
 export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
@@ -4,0 +4,0 @@ export interface ClassNamesProps {

dist/esm/css/index.d.ts

 import type { CSSProps } from '../types';
 /**
- * Create styles that can be re-used between components.
+ * Create styles that can be re-used between components with a template literal.
  *
@@ -16,1 +16,14 @@ * ```
 export default function css(_css: TemplateStringsArray, ..._values: (string | number)[]): CSSProps;
+/**
+ * Create styles that can be re-used between components with an object
+ *
+ * ```
+ * css({ color: 'red' });
+ * ```
+ *
+ * For more help, read the docs:
+ * https://compiledcssinjs.com/docs/api-css
+ *
+ * @param css
+ */
+export default function css(_css: CSSProps): CSSProps;

dist/esm/css/index.js

 import { createSetupError } from '../utils/error';
-/**
- * Create styles that can be re-used between components.
- *
- * ```
- * css`color: red;`;
- * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
- *
- * @param css
- * @param values
- */
 export default function css(_css) {
@@ -16,0 +3,0 @@ var _values = [];

dist/esm/index.d.ts

@@ -0,1 +1,2 @@
+import type { CssFunction, CSSProps } from './types';
 export { keyframes } from './keyframes';
@@ -5,3 +6,4 @@ export { styled } from './styled';
 export { default as css } from './css';
-import { CssFunction } from './types';
+export type { CssFunction, CSSProps };
+export type { CssObject } from './styled';
 declare module 'react' {
@@ -8,0 +10,0 @@ interface DOMAttributes<T> {

dist/esm/runtime/sheet.d.ts

@@ -1,2 +0,2 @@
-import { StyleSheetOpts, Bucket } from './types';
+import type { StyleSheetOpts, Bucket } from './types';
 /**
@@ -3,0 +3,0 @@ * Ordered style buckets using their short psuedo name.

dist/esm/runtime/style-cache.d.ts

@@ -1,2 +0,2 @@
-import { ProviderComponent, UseCacheHook } from './types';
+import type { ProviderComponent, UseCacheHook } from './types';
 /**
@@ -3,0 +3,0 @@ * Hook using the cache created on the server or client.

dist/esm/runtime/style.d.ts

 /// <reference types="react" />
-import { StyleSheetOpts } from './types';
+import type { StyleSheetOpts } from './types';
 interface StyleProps extends StyleSheetOpts {
@@ -4,0 +4,0 @@ /**

dist/esm/styled/index.d.ts

@@ -1,3 +0,3 @@
-import { ComponentType } from 'react';
-import { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
+import type { ComponentType } from 'react';
+import type { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
 export interface FunctionIterpolation<TProps> {
@@ -23,6 +23,6 @@ (props: TProps): CSSProps | string | number | boolean | undefined;
 export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements> {
-    <TProps extends unknown>(css: CssObject<TProps> | CssObject<TProps>[], ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
+    <TProps extends unknown>(css: CssObject<TProps> | CssObject<TProps>[], ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
 }
 export interface StyledFunctionFromComponent<TInheritedProps extends unknown> {
-    <TProps extends unknown>(css: CssObject<TProps> | TemplateStringsArray, ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
+    <TProps extends unknown>(css: CssObject<TProps> | TemplateStringsArray, ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
 }
@@ -29,0 +29,0 @@ export declare type StyledComponentMap = {

dist/esm/types.d.ts

@@ -1,2 +0,2 @@
-import * as CSS from 'csstype';
+import type * as CSS from 'csstype';
 /**
@@ -3,0 +3,0 @@ * Typing for the interpolations.

package.json

 {
   "name": "@compiled/react",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
@@ -48,8 +48,6 @@ "keywords": [
   "dependencies": {
-    "csstype": "^3.0.8"
+    "csstype": "^3.0.9"
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.7",
-    "@types/jscodeshift": "^0.11.2",
-    "jscodeshift": "^0.12.0",
     "react": "^17.0.2",
@@ -56,0 +54,0 @@ "react-dom": "^17.0.2"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

3

decreased by-40%

Number of package files

270

increased by3.05%

Worsened metrics

Total package byte prevSize

257547

decreased by-26.48%

Lines of code

4472

decreased by-36.67%

Dependency changes

• Updatedcsstype@^3.0.9