@vtex/admin-styles - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

CHANGELOG.md

@@ -6,45 +6,32 @@ # Change Log
 
+## [0.3.1](https://github.com/vtex/onda/compare/@vtex/admin-styles@0.3.0...@vtex/admin-styles@0.3.1) (2021-07-28)
+
+**Note:** Version bump only for package @vtex/admin-styles
+
 # [0.3.0](https://github.com/vtex/onda/compare/@vtex/admin-styles@0.2.0...@vtex/admin-styles@0.3.0) (2021-04-08)
 
-
 ### Bug Fixes
 
-* **responsive-aliases:** change media queries to have a max and min widths range ([f15efb0](https://github.com/vtex/onda/commit/f15efb04c416ff8cc7bd569ddeb9e76864d382bd))
+- **responsive-aliases:** change media queries to have a max and min widths range ([f15efb0](https://github.com/vtex/onda/commit/f15efb04c416ff8cc7bd569ddeb9e76864d382bd))
 
-
 ### Features
 
-* **responsive-value:** add responsive aliases on styleObject ([2019d0f](https://github.com/vtex/onda/commit/2019d0f1678478c02857ff3b6ad25e47075d8909))
+- **responsive-value:** add responsive aliases on styleObject ([2019d0f](https://github.com/vtex/onda/commit/2019d0f1678478c02857ff3b6ad25e47075d8909))
 
-
-
-
-
 # [0.2.0](https://github.com/vtex/onda/compare/@vtex/admin-styles@0.1.1...@vtex/admin-styles@0.2.0) (2021-02-25)
 
-
 ### Features
 
-* **theme:** move global styles from core to theme ([416c04b](https://github.com/vtex/onda/commit/416c04bd46e98cb65e428ac017577ac2ec6702ae))
+- **theme:** move global styles from core to theme ([416c04b](https://github.com/vtex/onda/commit/416c04bd46e98cb65e428ac017577ac2ec6702ae))
 
-
-
-
-
 ## [0.1.1](https://github.com/vtex/onda/compare/@vtex/admin-styles@0.1.0...@vtex/admin-styles@0.1.1) (2021-02-11)
 
-
 ### Bug Fixes
 
-* **admin:** emotion deps on all /admin packages ([3562180](https://github.com/vtex/onda/commit/35621800491ffc5132235e83edcf6c086d0b3ce4))
+- **admin:** emotion deps on all /admin packages ([3562180](https://github.com/vtex/onda/commit/35621800491ffc5132235e83edcf6c086d0b3ce4))
 
-
-
-
-
 # 0.1.0 (2021-02-01)
 
-
 ### Features
 
-* **admin-styles:** add package to parse styles from theme ([45e918b](https://github.com/vtex/onda/commit/45e918ba9f68cc83514bab0b4dcb5f23139acce6))
+- **admin-styles:** add package to parse styles from theme ([45e918b](https://github.com/vtex/onda/commit/45e918ba9f68cc83514bab0b4dcb5f23139acce6))

dist/aliases.d.ts

@@ -1,2 +0,2 @@
-import { Theme } from './index';
+import type { Theme } from './index';
 export declare const alias: (key: string, theme: Theme) => string;

dist/responsive.d.ts

@@ -1,2 +0,2 @@
-import { StyleProp, Theme, ThemeDerivedStyles } from './types';
+import type { StyleProp, Theme, ThemeDerivedStyles } from './types';
 export declare const responsive: (styles: Exclude<StyleProp, ThemeDerivedStyles>) => (theme?: Theme | undefined) => import("./types").StyleObject;

dist/styles.d.ts

@@ -1,3 +0,3 @@
-import { CSSObject } from '@emotion/css';
-import { CssPropsArgument, StyleProp } from './types';
+import type { CSSObject } from '@emotion/css';
+import type { CssPropsArgument, StyleProp } from './types';
 export declare const styles: (args?: StyleProp) => (props?: CssPropsArgument) => CSSObject;

dist/types.d.ts

@@ -1,2 +0,2 @@
-import * as CSS from 'csstype';
+import type * as CSS from 'csstype';
 declare type StandardCSSProperties = CSS.Properties<number | string>;
@@ -3,0 +3,0 @@ /**

package.json

 {
   "name": "@vtex/admin-styles",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "main": "dist/index.js",
@@ -19,3 +19,3 @@ "module": "dist/admin-styles.esm.js",
   "repository": {
-    "directory": "styleguides/admin/styles",
+    "directory": "packages/styles",
     "type": "git",
@@ -30,2 +30,3 @@ "url": "git+https://github.com/vtex/onda.git"
     "build": "tsdx build --tsconfig tsconfig.json",
+    "build:fast": "tsdx build --tsconfig tsconfig.json --transpileOnly --format esm,cjs",
     "test": "tsdx test"
@@ -51,3 +52,3 @@ },
   },
-  "gitHead": "897a953ab6c074c257b9f1bf0186b9b4c15283a1"
+  "gitHead": "00f24b5dd7fb9323a27127d4236d3dedb4527878"
 }

src/__tests__/styles.test.ts

 import get from 'lodash.get'
+
 import { styles } from '../styles'
-import { Theme } from '../types'
+import type { Theme } from '../types'
 
@@ -5,0 +6,0 @@ describe('component tests', () => {

src/aliases.ts

 import warning from 'tiny-warning'
-import { defaultBreakpoints, Theme } from './index'
 
+import type { Theme } from './index'
+import { defaultBreakpoints } from './index'
+
 export const alias = (key: string, theme: Theme) => {
@@ -5,0 +7,0 @@ const breakpoints =

src/responsive.ts

 import { defaultBreakpoints } from './defaultObjects'
-import { StyleProp, Theme, ThemeDerivedStyles } from './types'
+import type { StyleProp, Theme, ThemeDerivedStyles } from './types'
 
-export const responsive = (styles: Exclude<StyleProp, ThemeDerivedStyles>) => (
-  theme?: Theme
-) => {
-  const next: Exclude<StyleProp, ThemeDerivedStyles> = {}
-  const breakpoints =
-    (theme && (theme.breakpoints as string[])) || defaultBreakpoints
+export const responsive =
+  (styles: Exclude<StyleProp, ThemeDerivedStyles>) => (theme?: Theme) => {
+    const next: Exclude<StyleProp, ThemeDerivedStyles> = {}
+    const breakpoints =
+      (theme && (theme.breakpoints as string[])) || defaultBreakpoints
 
-  const mediaQueries = [
-    null,
-    ...breakpoints.map((n) => `@media screen and (min-width: ${n})`),
-  ]
+    const mediaQueries = [
+      null,
+      ...breakpoints.map((n) => `@media screen and (min-width: ${n})`),
+    ]
 
-  for (const k in styles) {
-    const key = k as keyof typeof styles
-    let value = styles[key]
+    for (const k in styles) {
+      const key = k as keyof typeof styles
+      let value = styles[key]
 
-    if (typeof value === 'function') {
-      value = value(theme ?? {})
-    }
+      if (typeof value === 'function') {
+        value = value(theme ?? {})
+      }
 
-    if (value == null) continue
+      if (value == null) continue
 
-    if (!Array.isArray(value)) {
-      next[key] = value
-      continue
-    }
+      if (!Array.isArray(value)) {
+        next[key] = value
+        continue
+      }
 
-    for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-      const media = mediaQueries[i]
+      for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        const media = mediaQueries[i]
 
-      if (!media) {
-        next[key] = value[i]
-        continue
+        if (!media) {
+          next[key] = value[i]
+          continue
+        }
+
+        next[media] = next[media] ?? {}
+        if (value[i] == null) continue
+        ;(next[media] as Record<string, unknown>)[key] = value[i]
       }
+    }
 
-      next[media] = next[media] ?? {}
-      if (value[i] == null) continue
-      ;(next[media] as Record<string, unknown>)[key] = value[i]
-    }
+    return next
   }
-
-  return next
-}

src/styles.ts

@@ -1,92 +0,98 @@
-import { CSSObject } from '@emotion/css'
+import type { CSSObject } from '@emotion/css'
+
 import { merge, get } from './util'
-
 import { transformations } from './transform'
-import { scales, Scales } from './scales'
+import type { Scales } from './scales'
+import { scales } from './scales'
 import { alias } from './aliases'
-import { multiples, Multiples } from './multiples'
+import type { Multiples } from './multiples'
+import { multiples } from './multiples'
 import { defaultTheme } from './defaultObjects'
 import { responsive } from './responsive'
-import { CssPropsArgument, StyleObject, StyleProp, Theme } from './types'
+import type { CssPropsArgument, StyleObject, StyleProp, Theme } from './types'
 
-export const styles = (args: StyleProp = {}) => (
-  props: CssPropsArgument = {}
-): CSSObject => {
-  const theme: Theme = {
-    ...defaultTheme,
-    ...('theme' in props ? props.theme : props),
-  }
+export const styles =
+  (args: StyleProp = {}) =>
+  (props: CssPropsArgument = {}): CSSObject => {
+    const theme: Theme = {
+      ...defaultTheme,
+      ...('theme' in props ? props.theme : props),
+    }
 
-  const result: CSSObject = {}
-  let obj = typeof args === 'function' ? args(theme) : args
+    const result: CSSObject = {}
+    let obj = typeof args === 'function' ? args(theme) : args
 
-  if (obj.themeKey) {
-    if (typeof obj.themeKey === 'object') {
-      const [componentName] = Object.keys(obj.themeKey)
-      const values = obj.themeKey[componentName]
-      const component = get(theme, `components.${componentName}`, {})
-      obj = {
-        ...Object.keys(values).reduce((acc, entry) => {
-          const defaultStyles = get(component, `${entry}.styles`, {})
-          const entryStyles = get(component, `${entry}.${values[entry]}`, {})
+    if (obj.themeKey) {
+      if (typeof obj.themeKey === 'object') {
+        const [componentName] = Object.keys(obj.themeKey)
+        const values = obj.themeKey[componentName]
+        const component = get(theme, `components.${componentName}`, {})
 
-          return merge(acc, defaultStyles, entryStyles)
-        }, component?.styles ?? {}),
-        ...obj,
+        obj = {
+          ...Object.keys(values).reduce((acc, entry) => {
+            const defaultStyles = get(component, `${entry}.styles`, {})
+            const entryStyles = get(component, `${entry}.${values[entry]}`, {})
+
+            return merge(acc, defaultStyles, entryStyles)
+          }, component?.styles ?? {}),
+          ...obj,
+        }
+      } else {
+        obj = { ...get(theme, obj.themeKey), ...obj }
       }
-    } else {
-      obj = { ...get(theme, obj.themeKey), ...obj }
+
+      delete obj.themeKey
     }
-    delete obj.themeKey
-  }
 
-  const stylx = responsive(obj)(theme)
+    const stylx = responsive(obj)(theme)
 
-  for (const key in stylx) {
-    const x = stylx[key as keyof typeof stylx]
-    const val = typeof x === 'function' ? x(theme) : x
-    const prop = alias(key, theme)
+    for (const key in stylx) {
+      const x = stylx[key as keyof typeof stylx]
+      const val = typeof x === 'function' ? x(theme) : x
+      const prop = alias(key, theme)
 
-    if (val && typeof val === 'object') {
-      result[prop] = styles(val as StyleObject)(theme)
-      continue
-    }
+      if (val && typeof val === 'object') {
+        result[prop] = styles(val as StyleObject)(theme)
+        continue
+      }
 
-    const scaleName = prop in scales ? scales[prop as keyof Scales] : undefined
-    const scale = scaleName ? theme?.[scaleName] : get(theme, prop, {})
-    const transform = get(transformations, prop, get)
-    let value = transform(scale, val, val)
-    const isObjectScale = value && typeof value === 'object'
+      const scaleName =
+        prop in scales ? scales[prop as keyof Scales] : undefined
 
-    if (isObjectScale) {
-      const defaultValue = value.default
+      const scale = scaleName ? theme?.[scaleName] : get(theme, prop, {})
+      const transform = get(transformations, prop, get)
+      let value = transform(scale, val, val)
+      const isObjectScale = value && typeof value === 'object'
 
-      if (defaultValue) {
-        if (typeof defaultValue === 'object') {
-          value = styles(defaultValue)(theme)
+      if (isObjectScale) {
+        const defaultValue = value.default
+
+        if (defaultValue) {
+          if (typeof defaultValue === 'object') {
+            value = styles(defaultValue)(theme)
+            Object.assign(result, value)
+            delete result[prop]
+          } else {
+            value = { [prop]: defaultValue }
+            Object.assign(result, value)
+          }
+        } else {
+          value = styles(value)(theme)
           Object.assign(result, value)
           delete result[prop]
-        } else {
-          value = { [prop]: defaultValue }
-          Object.assign(result, value)
         }
-      } else {
-        value = styles(value)(theme)
-        Object.assign(result, value)
-        delete result[prop]
       }
-    }
 
-    if (prop in multiples) {
-      const dirs = multiples[prop as keyof Multiples]
+      if (prop in multiples) {
+        const dirs = multiples[prop as keyof Multiples]
 
-      for (let i = 0; i < dirs.length; i++) {
-        result[dirs[i]] = value
+        for (let i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value
+        }
+      } else if (!isObjectScale) {
+        result[prop] = value
       }
-    } else if (!isObjectScale) {
-      result[prop] = value
     }
+
+    return result
   }
-
-  return result
-}

src/types.ts

@@ -1,2 +0,2 @@
-import * as CSS from 'csstype'
+import type * as CSS from 'csstype'
 
@@ -3,0 +3,0 @@ type StandardCSSProperties = CSS.Properties<number | string>

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

150806

increased by1.03%

Lines of code

2439

increased by0.12%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes