glamorous - npm Package Compare versions

Comparing version 3.9.0 to 3.9.1

package.json

 {
   "name": "glamorous",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "React component styling solved",
@@ -5,0 +5,0 @@ "main": "dist/glamorous.cjs.js",

README.md

@@ -648,2 +648,11 @@ <img src="https://github.com/paypal/glamorous/raw/master/other/glamorous.png" alt="glamorous logo" title="glamorous" align="right" width="150" height="150" />
 
+The current size of `glamorous/dist/glamorous.umd.tiny.min.js` is: [![tiny size][tiny-size-badge]][unpkg-dist]
+[![tiny gzip size][tiny-gzip-badge]][unpkg-dist]
+
+> IMPORTANT NOTE ABOUT SIZE: Because `glamorous` depends on `glamor`, you should consider the full size you'll be adding
+> to your application if you don't already have `glamor`.
+> The current size of `glamor/umd/index.min.js` is: [![glamor size][glamor-size-badge]][unpkg-glamor]
+> [![glamor gzip size][glamor-gzip-badge]][unpkg-glamor]
+
+
 ### Server Side Rendering (SSR)
@@ -858,3 +867,8 @@
 [size-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.min.js?label=size&style=flat-square
+[tiny-gzip-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.tiny.min.js?compression=gzip&label=gzip%20size&style=flat-square
+[tiny-size-badge]: http://img.badgesize.io/https://unpkg.com/glamorous/dist/glamorous.umd.tiny.min.js?label=size&style=flat-square
 [unpkg-dist]: https://unpkg.com/glamorous/dist/
+[glamor-gzip-badge]: http://img.badgesize.io/https://unpkg.com/glamor/umd/index.min.js?compression=gzip&label=gzip%20size&style=flat-square
+[glamor-size-badge]: http://img.badgesize.io/https://unpkg.com/glamor/umd/index.min.js?label=size&style=flat-square
+[unpkg-glamor]: https://unpkg.com/glamor/umd/
 [module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square
@@ -861,0 +875,0 @@ [mainFields]: https://webpack.js.org/configuration/resolve/#resolve-mainfields

typings/element-interfaces.d.ts

@@ -1,119 +0,121 @@
-import { CSSProperties, SVGAttributes } from 'react'
+import { CSSProperties, SVGAttributes } from "react";
+import {
+  HtmlStyledFunction,
+  SvgStyledFunction,
+} from "./glamorous";
 
-import { StyledFunction } from './glamorous'
-
 export interface HTMLGlamorousInterface {
-    a: StyledFunction<CSSProperties>
-    abbr: StyledFunction<CSSProperties>
-    address: StyledFunction<CSSProperties>
-    area: StyledFunction<CSSProperties>
-    article: StyledFunction<CSSProperties>
-    aside: StyledFunction<CSSProperties>
-    audio: StyledFunction<CSSProperties>
-    b: StyledFunction<CSSProperties>
-    base: StyledFunction<CSSProperties>
-    bdi: StyledFunction<CSSProperties>
-    bdo: StyledFunction<CSSProperties>
-    big: StyledFunction<CSSProperties>
-    blockquote: StyledFunction<CSSProperties>
-    body: StyledFunction<CSSProperties>
-    br: StyledFunction<CSSProperties>
-    button: StyledFunction<CSSProperties>
-    canvas: StyledFunction<CSSProperties>
-    caption: StyledFunction<CSSProperties>
-    cite: StyledFunction<CSSProperties>
-    code: StyledFunction<CSSProperties>
-    col: StyledFunction<CSSProperties>
-    colgroup: StyledFunction<CSSProperties>
-    data: StyledFunction<CSSProperties>
-    datalist: StyledFunction<CSSProperties>
-    dd: StyledFunction<CSSProperties>
-    del: StyledFunction<CSSProperties>
-    details: StyledFunction<CSSProperties>
-    dfn: StyledFunction<CSSProperties>
-    dialog: StyledFunction<CSSProperties>
-    div: StyledFunction<CSSProperties>
-    dl: StyledFunction<CSSProperties>
-    dt: StyledFunction<CSSProperties>
-    em: StyledFunction<CSSProperties>
-    embed: StyledFunction<CSSProperties>
-    fieldset: StyledFunction<CSSProperties>
-    figcaption: StyledFunction<CSSProperties>
-    figure: StyledFunction<CSSProperties>
-    footer: StyledFunction<CSSProperties>
-    form: StyledFunction<CSSProperties>
-    h1: StyledFunction<CSSProperties>
-    h2: StyledFunction<CSSProperties>
-    h3: StyledFunction<CSSProperties>
-    h4: StyledFunction<CSSProperties>
-    h5: StyledFunction<CSSProperties>
-    h6: StyledFunction<CSSProperties>
-    head: StyledFunction<CSSProperties>
-    header: StyledFunction<CSSProperties>
-    hgroup: StyledFunction<CSSProperties>
-    hr: StyledFunction<CSSProperties>
-    html: StyledFunction<CSSProperties>
-    i: StyledFunction<CSSProperties>
-    iframe: StyledFunction<CSSProperties>
-    img: StyledFunction<CSSProperties>
-    input: StyledFunction<CSSProperties>
-    ins: StyledFunction<CSSProperties>
-    kbd: StyledFunction<CSSProperties>
-    keygen: StyledFunction<CSSProperties>
-    label: StyledFunction<CSSProperties>
-    legend: StyledFunction<CSSProperties>
-    li: StyledFunction<CSSProperties>
-    link: StyledFunction<CSSProperties>
-    main: StyledFunction<CSSProperties>
-    map: StyledFunction<CSSProperties>
-    mark: StyledFunction<CSSProperties>
-    menu: StyledFunction<CSSProperties>
-    menuitem: StyledFunction<CSSProperties>
-    meta: StyledFunction<CSSProperties>
-    meter: StyledFunction<CSSProperties>
-    nav: StyledFunction<CSSProperties>
-    noscript: StyledFunction<CSSProperties>
-    object: StyledFunction<CSSProperties>
-    ol: StyledFunction<CSSProperties>
-    optgroup: StyledFunction<CSSProperties>
-    option: StyledFunction<CSSProperties>
-    output: StyledFunction<CSSProperties>
-    p: StyledFunction<CSSProperties>
-    param: StyledFunction<CSSProperties>
-    picture: StyledFunction<CSSProperties>
-    pre: StyledFunction<CSSProperties>
-    progress: StyledFunction<CSSProperties>
-    q: StyledFunction<CSSProperties>
-    rp: StyledFunction<CSSProperties>
-    rt: StyledFunction<CSSProperties>
-    ruby: StyledFunction<CSSProperties>
-    s: StyledFunction<CSSProperties>
-    samp: StyledFunction<CSSProperties>
-    script: StyledFunction<CSSProperties>
-    section: StyledFunction<CSSProperties>
-    select: StyledFunction<CSSProperties>
-    small: StyledFunction<CSSProperties>
-    source: StyledFunction<CSSProperties>
-    span: StyledFunction<CSSProperties>
-    strong: StyledFunction<CSSProperties>
-    style: StyledFunction<CSSProperties>
-    sub: StyledFunction<CSSProperties>
-    summary: StyledFunction<CSSProperties>
-    sup: StyledFunction<CSSProperties>
-    table: StyledFunction<CSSProperties>
-    tbody: StyledFunction<CSSProperties>
-    td: StyledFunction<CSSProperties>
-    textarea: StyledFunction<CSSProperties>
-    tfoot: StyledFunction<CSSProperties>
-    th: StyledFunction<CSSProperties>
-    thead: StyledFunction<CSSProperties>
-    time: StyledFunction<CSSProperties>
-    title: StyledFunction<CSSProperties>
-    tr: StyledFunction<CSSProperties>
-    track: StyledFunction<CSSProperties>
-    u: StyledFunction<CSSProperties>
-    ul: StyledFunction<CSSProperties>
-    var: StyledFunction<CSSProperties>
-    video: StyledFunction<CSSProperties>
-    wbr: StyledFunction<CSSProperties>
+  a: HtmlStyledFunction<HTMLAnchorElement, CSSProperties>;
+  abbr: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  address: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  area: HtmlStyledFunction<HTMLAreaElement, CSSProperties>;
+  article: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  aside: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  audio: HtmlStyledFunction<HTMLAudioElement, CSSProperties>;
+  b: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  base: HtmlStyledFunction<HTMLBaseElement, CSSProperties>;
+  bdi: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  bdo: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  big: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  blockquote: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  body: HtmlStyledFunction<HTMLBodyElement, CSSProperties>;
+  br: HtmlStyledFunction<HTMLBRElement, CSSProperties>;
+  button: HtmlStyledFunction<HTMLButtonElement, CSSProperties>;
+  canvas: HtmlStyledFunction<HTMLCanvasElement, CSSProperties>;
+  caption: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  cite: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  code: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  col: HtmlStyledFunction<HTMLTableColElement, CSSProperties>;
+  colgroup: HtmlStyledFunction<HTMLTableColElement, CSSProperties>;
+  data: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  datalist: HtmlStyledFunction<HTMLDataListElement, CSSProperties>;
+  dd: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  del: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  details: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  dfn: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  dialog: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  div: HtmlStyledFunction<HTMLDivElement, CSSProperties>;
+  dl: HtmlStyledFunction<HTMLDListElement, CSSProperties>;
+  dt: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  em: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  embed: HtmlStyledFunction<HTMLEmbedElement, CSSProperties>;
+  fieldset: HtmlStyledFunction<HTMLFieldSetElement, CSSProperties>;
+  figcaption: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  figure: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  footer: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  form: HtmlStyledFunction<HTMLFormElement, CSSProperties>;
+  h1: HtmlStyledFunction<HTMLHeadingElement, CSSProperties>;
+  h2: HtmlStyledFunction<HTMLHeadingElement, CSSProperties>;
+  h3: HtmlStyledFunction<HTMLHeadingElement, CSSProperties>;
+  h4: HtmlStyledFunction<HTMLHeadingElement, CSSProperties>;
+  h5: HtmlStyledFunction<HTMLHeadingElement, CSSProperties>;
+  h6: HtmlStyledFunction<HTMLHeadingElement, CSSProperties>;
+  head: HtmlStyledFunction<HTMLHeadElement, CSSProperties>;
+  header: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  hgroup: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  hr: HtmlStyledFunction<HTMLHRElement, CSSProperties>;
+  html: HtmlStyledFunction<HTMLHtmlElement, CSSProperties>;
+  i: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  iframe: HtmlStyledFunction<HTMLIFrameElement, CSSProperties>;
+  img: HtmlStyledFunction<HTMLImageElement, CSSProperties>;
+  input: HtmlStyledFunction<HTMLInputElement, CSSProperties>;
+  ins: HtmlStyledFunction<HTMLModElement, CSSProperties>;
+  kbd: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  keygen: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  label: HtmlStyledFunction<HTMLLabelElement, CSSProperties>;
+  legend: HtmlStyledFunction<HTMLLegendElement, CSSProperties>;
+  li: HtmlStyledFunction<HTMLLIElement, CSSProperties>;
+  link: HtmlStyledFunction<HTMLLinkElement, CSSProperties>;
+  main: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  map: HtmlStyledFunction<HTMLMapElement, CSSProperties>;
+  mark: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  menu: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  menuitem: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  meta: HtmlStyledFunction<HTMLMetaElement, CSSProperties>;
+  meter: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  nav: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  noscript: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  object: HtmlStyledFunction<HTMLObjectElement, CSSProperties>;
+  ol: HtmlStyledFunction<HTMLOListElement, CSSProperties>;
+  optgroup: HtmlStyledFunction<HTMLOptGroupElement, CSSProperties>;
+  option: HtmlStyledFunction<HTMLOptionElement, CSSProperties>;
+  output: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  p: HtmlStyledFunction<HTMLParagraphElement, CSSProperties>;
+  param: HtmlStyledFunction<HTMLParamElement, CSSProperties>;
+  picture: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  pre: HtmlStyledFunction<HTMLPreElement, CSSProperties>;
+  progress: HtmlStyledFunction<HTMLProgressElement, CSSProperties>;
+  q: HtmlStyledFunction<HTMLQuoteElement, CSSProperties>;
+  rp: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  rt: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  ruby: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  s: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  samp: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  script: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  section: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  select: HtmlStyledFunction<HTMLSelectElement, CSSProperties>;
+  small: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  source: HtmlStyledFunction<HTMLSourceElement, CSSProperties>;
+  span: HtmlStyledFunction<HTMLSpanElement, CSSProperties>;
+  strong: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  style: HtmlStyledFunction<HTMLStyleElement, CSSProperties>;
+  sub: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  summary: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  sup: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  table: HtmlStyledFunction<HTMLTableElement, CSSProperties>;
+  tbody: HtmlStyledFunction<HTMLTableSectionElement, CSSProperties>;
+  td: HtmlStyledFunction<HTMLTableDataCellElement, CSSProperties>;
+  textarea: HtmlStyledFunction<HTMLTextAreaElement, CSSProperties>;
+  tfoot: HtmlStyledFunction<HTMLTableSectionElement, CSSProperties>;
+  th: HtmlStyledFunction<HTMLTableHeaderCellElement, CSSProperties>;
+  thead: HtmlStyledFunction<HTMLTableSectionElement, CSSProperties>;
+  time: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  title: HtmlStyledFunction<HTMLTitleElement, CSSProperties>;
+  tr: HtmlStyledFunction<HTMLTableRowElement, CSSProperties>;
+  track: HtmlStyledFunction<HTMLTrackElement, CSSProperties>;
+  u: HtmlStyledFunction<HTMLElement, CSSProperties>;
+  ul: HtmlStyledFunction<HTMLUListElement, CSSProperties>;
+  "var": HtmlStyledFunction<HTMLElement, CSSProperties>;
+  video: HtmlStyledFunction<HTMLVideoElement, CSSProperties>;
+  wbr: HtmlStyledFunction<HTMLElement, CSSProperties>;
 }
@@ -123,3 +125,21 @@
 export interface SVGGlamorousInterface {
-    svg: StyledFunction<SVGAttributes<any>>
+  circle: SvgStyledFunction<SVGCircleElement, SVGAttributes<any>>;
+  clipPath: SvgStyledFunction<SVGClipPathElement, SVGAttributes<any>>;
+  defs: SvgStyledFunction<SVGDefsElement, SVGAttributes<any>>;
+  ellipse: SvgStyledFunction<SVGEllipseElement, SVGAttributes<any>>;
+  g: SvgStyledFunction<SVGGElement, SVGAttributes<any>>;
+  image: SvgStyledFunction<SVGImageElement, SVGAttributes<any>>;
+  line: SvgStyledFunction<SVGLineElement,SVGAttributes<any>>;
+  linearGradient: SvgStyledFunction<SVGLinearGradientElement, SVGAttributes<any>>;
+  mask: SvgStyledFunction<SVGMaskElement, SVGAttributes<any>>;
+  path: SvgStyledFunction<SVGPathElement, SVGAttributes<any>>;
+  pattern: SvgStyledFunction<SVGPatternElement, SVGAttributes<any>>;
+  polygon: SvgStyledFunction<SVGPolygonElement, SVGAttributes<any>>;
+  polyline: SvgStyledFunction<SVGPolylineElement, SVGAttributes<any>>;
+  radialGradient: SvgStyledFunction<SVGRadialGradientElement, SVGAttributes<any>>;
+  rect: SvgStyledFunction<SVGRectElement, SVGAttributes<any>>;
+  stop: SvgStyledFunction<SVGStopElement, SVGAttributes<any>>;
+  svg: SvgStyledFunction<SVGSVGElement, SVGAttributes<any>>;
+  text: SvgStyledFunction<SVGTextElement, SVGAttributes<any>>;
+  tspan: SvgStyledFunction<SVGTSpanElement, SVGAttributes<any>>;
 }

typings/glamorous.d.ts

@@ -6,28 +6,38 @@ // Type definitions for Glamorous v3.2.0
 import * as React from 'react';
-import { ComponentClass, CSSProperties, StatelessComponent, SVGAttributes } from 'react'
+import {
+  HTMLGlamorousInterface,
+  SVGGlamorousInterface,
+} from "./element-interfaces.d";
 
-import { HTMLGlamorousInterface, SVGGlamorousInterface } from './element-interfaces'
+import { StyledFunction } from './styled-function'
 
-export type Component = ComponentClass<{}> | StatelessComponent<{}>;
+export { StyledFunction }
 
-export interface DynamicStyledFunction {
-  (props?: object, theme?: object): object;
+export type GlamorousComponent<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
+
+export type HtmlStyledFunction<Element, Properties> = StyledFunction<React.HTMLProps<Element>, Properties>;
+
+export type SvgStyledFunction<Element extends SVGElement, Properties> = StyledFunction<React.SVGAttributes<Element>, Properties>;
+
+export interface GlamorousOptions {
+  displayName: string
+  rootEl: string | Element
+  forwardProps: String[]
 }
 
-export interface StyledFunction<Properties> {
-  (
-    staticStyles: Partial<Properties>,
-    dynamicStyles?: DynamicStyledFunction
-  ): Component;
+export interface GlamorousInterface extends HTMLGlamorousInterface, SVGGlamorousInterface {
+  <P>(
+    component: GlamorousComponent<P>,
+    options?: GlamorousOptions
+  ): StyledFunction<P, React.CSSProperties | React.SVGAttributes<any>>;
+
+  Div: React.StatelessComponent<React.CSSProperties>
+  Svg: React.StatelessComponent<React.SVGAttributes<any>>
 }
 
-export interface GlamorousBaseInterface {
-  (component: Component): StyledFunction<CSSProperties | SVGAttributes<any>>;
+interface ThemeProps {
+  theme: object;
 }
 
-export interface GlamorousInterface extends
-  GlamorousBaseInterface, HTMLGlamorousInterface, SVGGlamorousInterface {
-    Div: StatelessComponent<CSSProperties>
-    Svg: StatelessComponent<SVGAttributes<any>>
-  }
+export class ThemeProvider extends React.Component<ThemeProps, any> { }
 
@@ -34,0 +44,0 @@ declare const glamorous: GlamorousInterface;

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

320727

increased by2.77%

Number of package files

19

increased by5.56%

Lines of code

4691

increased by3.44%

Number of lines in readme file

885

increased by1.61%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes