@pyreon/unistyle 0.11.5 → 0.11.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +39 -34
  2. package/lib/index.d.ts +13 -8
  3. package/lib/index.js +9 -4
  4. package/package.json +24 -24
  5. package/src/__tests__/alignContent.test.ts +57 -57
  6. package/src/__tests__/borderRadius.test.ts +40 -40
  7. package/src/__tests__/camelToKebab.test.ts +23 -23
  8. package/src/__tests__/context.test.ts +28 -28
  9. package/src/__tests__/createMediaQueries.test.ts +21 -21
  10. package/src/__tests__/edge.test.ts +76 -76
  11. package/src/__tests__/enrichTheme.test.ts +13 -13
  12. package/src/__tests__/index.test.ts +31 -31
  13. package/src/__tests__/makeItResponsive.test.ts +32 -32
  14. package/src/__tests__/processDescriptor.test.ts +107 -107
  15. package/src/__tests__/responsive.test.ts +66 -66
  16. package/src/__tests__/styles.test.ts +52 -52
  17. package/src/__tests__/units.test.ts +63 -63
  18. package/src/context.tsx +11 -6
  19. package/src/enrichTheme.ts +3 -3
  20. package/src/index.ts +11 -11
  21. package/src/responsive/createMediaQueries.ts +4 -4
  22. package/src/responsive/index.ts +14 -14
  23. package/src/responsive/makeItResponsive.ts +9 -9
  24. package/src/responsive/normalizeTheme.ts +2 -2
  25. package/src/responsive/transformTheme.ts +2 -2
  26. package/src/styles/alignContent.ts +14 -14
  27. package/src/styles/extendCss.ts +4 -4
  28. package/src/styles/index.ts +6 -6
  29. package/src/styles/shorthands/borderRadius.ts +6 -6
  30. package/src/styles/shorthands/edge.ts +29 -29
  31. package/src/styles/shorthands/index.ts +4 -4
  32. package/src/styles/styles/index.ts +6 -6
  33. package/src/styles/styles/processDescriptor.ts +31 -31
  34. package/src/styles/styles/propertyMap.ts +326 -326
  35. package/src/styles/styles/utils.ts +4 -4
  36. package/src/types.ts +155 -155
  37. package/src/units/index.ts +6 -6
  38. package/src/units/stripUnit.ts +1 -1
  39. package/src/units/value.ts +20 -20
  40. package/src/units/values.ts +18 -18
@@ -1,5 +1,5 @@
1
- import type { PropertyValue } from "../../types"
2
- import value from "../../units/value"
1
+ import type { PropertyValue } from '../../types'
2
+ import value from '../../units/value'
3
3
 
4
4
  const isValidValue = (v: unknown) => !!v || v === 0
5
5
 
@@ -47,7 +47,7 @@ const formatSpacing = (property: string, sides: (PropertyValue | null | undefine
47
47
  if (sides.every((val) => !!val))
48
48
  return `${property}: ${value(t)} ${value(r)} ${value(b)} ${value(l)};`
49
49
 
50
- let output = ""
50
+ let output = ''
51
51
  if (t) output += `${property}-top: ${value(t)};`
52
52
  if (b) output += `${property}-bottom: ${value(b)};`
53
53
  if (l) output += `${property}-left: ${value(l)};`
@@ -56,7 +56,7 @@ const formatSpacing = (property: string, sides: (PropertyValue | null | undefine
56
56
  return output
57
57
  }
58
58
 
59
- export type SpacingShorthand = (property: "padding" | "margin") => (props: SideValues) => string
59
+ export type SpacingShorthand = (property: 'padding' | 'margin') => (props: SideValues) => string
60
60
 
61
61
  export const spacingShorthand: SpacingShorthand = (property) => (props) =>
62
62
  formatSpacing(property, resolveSides(props))
package/src/types.ts CHANGED
@@ -1,18 +1,18 @@
1
- import type { config } from "@pyreon/ui-core"
1
+ import type { config } from '@pyreon/ui-core'
2
2
 
3
3
  export type Css = typeof config.css
4
4
 
5
- export type Defaults = "initial" | "inherit"
6
- export type Units = "px" | "rem" | "em" | "%" | "vh" | "vw" | "vmin" | "vmax" | "ex"
5
+ export type Defaults = 'initial' | 'inherit'
6
+ export type Units = 'px' | 'rem' | 'em' | '%' | 'vh' | 'vw' | 'vmin' | 'vmax' | 'ex'
7
7
  export type UnitValue = number | `${number}${Units}`
8
- export type PropertyValue = UnitValue | "auto" | Defaults | `calc(${string | number})`
8
+ export type PropertyValue = UnitValue | 'auto' | Defaults | `calc(${string | number})`
9
9
 
10
- export type Size = "max-content" | "min-content" | "fit-content"
10
+ export type Size = 'max-content' | 'min-content' | 'fit-content'
11
11
 
12
12
  export type Color =
13
13
  | `#${string | number}`
14
- | "currentColor"
15
- | "transparent"
14
+ | 'currentColor'
15
+ | 'transparent'
16
16
  | `rgb(${number}, ${number}, ${number})`
17
17
  | `rgb(${number},${number},${number})`
18
18
  | `rgba(${number}, ${number}, ${number}, ${number})`
@@ -25,151 +25,151 @@ export type Color =
25
25
  | Defaults
26
26
 
27
27
  export type BrowserColors =
28
- | "black"
29
- | "silver"
30
- | "gray"
31
- | "white"
32
- | "maroon"
33
- | "red"
34
- | "purple"
35
- | "fuchsia"
36
- | "green"
37
- | "lime"
38
- | "olive"
39
- | "yellow"
40
- | "navy"
41
- | "blue"
42
- | "teal"
43
- | "aqua"
44
- | "orange"
45
- | "aliceblue"
46
- | "antiquewhite"
47
- | "aquamarine"
48
- | "azure"
49
- | "beige"
50
- | "bisque"
51
- | "blanchedalmond"
52
- | "blueviolet"
53
- | "brown"
54
- | "burlywood"
55
- | "cadetblue"
56
- | "chartreuse"
57
- | "chocolate"
58
- | "coral"
59
- | "cornflowerblue"
60
- | "cornsilk"
61
- | "crimson"
62
- | "cyan"
63
- | "darkblue"
64
- | "darkcyan"
65
- | "darkgoldenrod"
66
- | "darkgray"
67
- | "darkgreen"
68
- | "darkgrey"
69
- | "darkkhaki"
70
- | "darkmagenta"
71
- | "darkolivegreen"
72
- | "darkorange"
73
- | "darkorchid"
74
- | "darkred"
75
- | "darksalmon"
76
- | "darkseagreen"
77
- | "darkslateblue"
78
- | "darkslategray"
79
- | "darkslategrey"
80
- | "darkturquoise"
81
- | "darkviolet"
82
- | "deeppink"
83
- | "deepskyblue"
84
- | "dimgray"
85
- | "dimgrey"
86
- | "dodgerblue"
87
- | "firebrick"
88
- | "floralwhite"
89
- | "forestgreen"
90
- | "gainsboro"
91
- | "ghostwhite"
92
- | "gold"
93
- | "goldenrod"
94
- | "greenyellow"
95
- | "grey"
96
- | "honeydew"
97
- | "hotpink"
98
- | "indianred"
99
- | "indigo"
100
- | "ivory"
101
- | "khaki"
102
- | "lavender"
103
- | "lavenderblush"
104
- | "lawngreen"
105
- | "lemonchiffon"
106
- | "lightblue"
107
- | "lightcoral"
108
- | "lightcyan"
109
- | "lightgoldenrodyellow"
110
- | "lightgray"
111
- | "lightgreen"
112
- | "lightgrey"
113
- | "lightpink"
114
- | "lightsalmon"
115
- | "lightseagreen"
116
- | "lightskyblue"
117
- | "lightslategray"
118
- | "lightslategrey"
119
- | "lightsteelblue"
120
- | "lightyellow"
121
- | "limegreen"
122
- | "linen"
123
- | "magenta"
124
- | "mediumaquamarine"
125
- | "mediumblue"
126
- | "mediumorchid"
127
- | "mediumpurple"
128
- | "mediumseagreen"
129
- | "mediumslateblue"
130
- | "mediumspringgreen"
131
- | "mediumturquoise"
132
- | "mediumvioletred"
133
- | "midnightblue"
134
- | "mintcream"
135
- | "mistyrose"
136
- | "moccasin"
137
- | "navajowhite"
138
- | "oldlace"
139
- | "olivedrab"
140
- | "orangered"
141
- | "orchid"
142
- | "palegoldenrod"
143
- | "palegreen"
144
- | "paleturquoise"
145
- | "palevioletred"
146
- | "papayawhip"
147
- | "peachpuff"
148
- | "peru"
149
- | "pink"
150
- | "plum"
151
- | "powderblue"
152
- | "rosybrown"
153
- | "royalblue"
154
- | "saddlebrown"
155
- | "salmon"
156
- | "sandybrown"
157
- | "seagreen"
158
- | "seashell"
159
- | "sienna"
160
- | "skyblue"
161
- | "slateblue"
162
- | "slategray"
163
- | "slategrey"
164
- | "snow"
165
- | "springgreen"
166
- | "steelblue"
167
- | "tan"
168
- | "thistle"
169
- | "tomato"
170
- | "turquoise"
171
- | "violet"
172
- | "wheat"
173
- | "whitesmoke"
174
- | "yellowgreen"
175
- | "rebeccapurple"
28
+ | 'black'
29
+ | 'silver'
30
+ | 'gray'
31
+ | 'white'
32
+ | 'maroon'
33
+ | 'red'
34
+ | 'purple'
35
+ | 'fuchsia'
36
+ | 'green'
37
+ | 'lime'
38
+ | 'olive'
39
+ | 'yellow'
40
+ | 'navy'
41
+ | 'blue'
42
+ | 'teal'
43
+ | 'aqua'
44
+ | 'orange'
45
+ | 'aliceblue'
46
+ | 'antiquewhite'
47
+ | 'aquamarine'
48
+ | 'azure'
49
+ | 'beige'
50
+ | 'bisque'
51
+ | 'blanchedalmond'
52
+ | 'blueviolet'
53
+ | 'brown'
54
+ | 'burlywood'
55
+ | 'cadetblue'
56
+ | 'chartreuse'
57
+ | 'chocolate'
58
+ | 'coral'
59
+ | 'cornflowerblue'
60
+ | 'cornsilk'
61
+ | 'crimson'
62
+ | 'cyan'
63
+ | 'darkblue'
64
+ | 'darkcyan'
65
+ | 'darkgoldenrod'
66
+ | 'darkgray'
67
+ | 'darkgreen'
68
+ | 'darkgrey'
69
+ | 'darkkhaki'
70
+ | 'darkmagenta'
71
+ | 'darkolivegreen'
72
+ | 'darkorange'
73
+ | 'darkorchid'
74
+ | 'darkred'
75
+ | 'darksalmon'
76
+ | 'darkseagreen'
77
+ | 'darkslateblue'
78
+ | 'darkslategray'
79
+ | 'darkslategrey'
80
+ | 'darkturquoise'
81
+ | 'darkviolet'
82
+ | 'deeppink'
83
+ | 'deepskyblue'
84
+ | 'dimgray'
85
+ | 'dimgrey'
86
+ | 'dodgerblue'
87
+ | 'firebrick'
88
+ | 'floralwhite'
89
+ | 'forestgreen'
90
+ | 'gainsboro'
91
+ | 'ghostwhite'
92
+ | 'gold'
93
+ | 'goldenrod'
94
+ | 'greenyellow'
95
+ | 'grey'
96
+ | 'honeydew'
97
+ | 'hotpink'
98
+ | 'indianred'
99
+ | 'indigo'
100
+ | 'ivory'
101
+ | 'khaki'
102
+ | 'lavender'
103
+ | 'lavenderblush'
104
+ | 'lawngreen'
105
+ | 'lemonchiffon'
106
+ | 'lightblue'
107
+ | 'lightcoral'
108
+ | 'lightcyan'
109
+ | 'lightgoldenrodyellow'
110
+ | 'lightgray'
111
+ | 'lightgreen'
112
+ | 'lightgrey'
113
+ | 'lightpink'
114
+ | 'lightsalmon'
115
+ | 'lightseagreen'
116
+ | 'lightskyblue'
117
+ | 'lightslategray'
118
+ | 'lightslategrey'
119
+ | 'lightsteelblue'
120
+ | 'lightyellow'
121
+ | 'limegreen'
122
+ | 'linen'
123
+ | 'magenta'
124
+ | 'mediumaquamarine'
125
+ | 'mediumblue'
126
+ | 'mediumorchid'
127
+ | 'mediumpurple'
128
+ | 'mediumseagreen'
129
+ | 'mediumslateblue'
130
+ | 'mediumspringgreen'
131
+ | 'mediumturquoise'
132
+ | 'mediumvioletred'
133
+ | 'midnightblue'
134
+ | 'mintcream'
135
+ | 'mistyrose'
136
+ | 'moccasin'
137
+ | 'navajowhite'
138
+ | 'oldlace'
139
+ | 'olivedrab'
140
+ | 'orangered'
141
+ | 'orchid'
142
+ | 'palegoldenrod'
143
+ | 'palegreen'
144
+ | 'paleturquoise'
145
+ | 'palevioletred'
146
+ | 'papayawhip'
147
+ | 'peachpuff'
148
+ | 'peru'
149
+ | 'pink'
150
+ | 'plum'
151
+ | 'powderblue'
152
+ | 'rosybrown'
153
+ | 'royalblue'
154
+ | 'saddlebrown'
155
+ | 'salmon'
156
+ | 'sandybrown'
157
+ | 'seagreen'
158
+ | 'seashell'
159
+ | 'sienna'
160
+ | 'skyblue'
161
+ | 'slateblue'
162
+ | 'slategray'
163
+ | 'slategrey'
164
+ | 'snow'
165
+ | 'springgreen'
166
+ | 'steelblue'
167
+ | 'tan'
168
+ | 'thistle'
169
+ | 'tomato'
170
+ | 'turquoise'
171
+ | 'violet'
172
+ | 'wheat'
173
+ | 'whitesmoke'
174
+ | 'yellowgreen'
175
+ | 'rebeccapurple'
@@ -1,6 +1,6 @@
1
- export type { StripUnit } from "./stripUnit"
2
- export { default as stripUnit } from "./stripUnit"
3
- export type { Value } from "./value"
4
- export { default as value } from "./value"
5
- export type { Values } from "./values"
6
- export { default as values } from "./values"
1
+ export type { StripUnit } from './stripUnit'
2
+ export { default as stripUnit } from './stripUnit'
3
+ export type { Value } from './value'
4
+ export { default as value } from './value'
5
+ export type { Values } from './values'
6
+ export { default as values } from './values'
@@ -9,7 +9,7 @@ export type StripUnit = <V extends string | number, UR extends boolean = false>(
9
9
  const stripUnit = ((value: string | number, unitReturn?: boolean) => {
10
10
  const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/
11
11
 
12
- if (typeof value !== "string") return unitReturn ? [value, undefined] : value
12
+ if (typeof value !== 'string') return unitReturn ? [value, undefined] : value
13
13
 
14
14
  const matchedValue = value.match(cssRegex)
15
15
 
@@ -1,21 +1,21 @@
1
- import stripUnit from "./stripUnit"
1
+ import stripUnit from './stripUnit'
2
2
 
3
3
  type CssUnits =
4
- | "px"
5
- | "rem"
6
- | "%"
7
- | "em"
8
- | "ex"
9
- | "cm"
10
- | "mm"
11
- | "in"
12
- | "pt"
13
- | "pc"
14
- | "ch"
15
- | "vh"
16
- | "vw"
17
- | "vmin"
18
- | "vmax"
4
+ | 'px'
5
+ | 'rem'
6
+ | '%'
7
+ | 'em'
8
+ | 'ex'
9
+ | 'cm'
10
+ | 'mm'
11
+ | 'in'
12
+ | 'pt'
13
+ | 'pc'
14
+ | 'ch'
15
+ | 'vh'
16
+ | 'vw'
17
+ | 'vmin'
18
+ | 'vmax'
19
19
 
20
20
  const isNotValue = (val: unknown) => !val && val !== 0
21
21
 
@@ -25,7 +25,7 @@ export type Value = (
25
25
  outputUnit?: CssUnits,
26
26
  ) => string | number | null
27
27
 
28
- const value: Value = (param, rootSize = 16, outputUnit = "rem"): string | number | null => {
28
+ const value: Value = (param, rootSize = 16, outputUnit = 'rem'): string | number | null => {
29
29
  if (isNotValue(param)) return null
30
30
 
31
31
  // After the guard above, param is guaranteed to be string | number (non-null)
@@ -33,12 +33,12 @@ const value: Value = (param, rootSize = 16, outputUnit = "rem"): string | number
33
33
 
34
34
  const [val, unit] = stripUnit(p as string, true)
35
35
  if (isNotValue(val)) return null
36
- if (val === 0 || typeof val === "string") return p
36
+ if (val === 0 || typeof val === 'string') return p
37
37
 
38
38
  const canConvert = rootSize && !Number.isNaN(val)
39
- if (canConvert && !unit && outputUnit === "px") return `${val}${outputUnit}`
39
+ if (canConvert && !unit && outputUnit === 'px') return `${val}${outputUnit}`
40
40
  if (canConvert && !unit) return `${val / rootSize}rem`
41
- if (canConvert && unit === "px" && outputUnit === "rem") return `${val / rootSize}rem`
41
+ if (canConvert && unit === 'px' && outputUnit === 'rem') return `${val / rootSize}rem`
42
42
  if (unit) return p
43
43
 
44
44
  return `${val}${outputUnit}`
@@ -1,25 +1,25 @@
1
- import value from "./value"
1
+ import value from './value'
2
2
 
3
3
  type CssUnits =
4
- | "px"
5
- | "rem"
6
- | "%"
7
- | "em"
8
- | "ex"
9
- | "cm"
10
- | "mm"
11
- | "in"
12
- | "pt"
13
- | "pc"
14
- | "ch"
15
- | "vh"
16
- | "vw"
17
- | "vmin"
18
- | "vmax"
4
+ | 'px'
5
+ | 'rem'
6
+ | '%'
7
+ | 'em'
8
+ | 'ex'
9
+ | 'cm'
10
+ | 'mm'
11
+ | 'in'
12
+ | 'pt'
13
+ | 'pc'
14
+ | 'ch'
15
+ | 'vh'
16
+ | 'vw'
17
+ | 'vmin'
18
+ | 'vmax'
19
19
 
20
20
  type GetValueOf = (...args: unknown[]) => number | string
21
21
  const getValueOf: GetValueOf = (...args: any[]) =>
22
- args.find((v) => typeof v !== "undefined" && v !== null)
22
+ args.find((v) => typeof v !== 'undefined' && v !== null)
23
23
 
24
24
  export type Values = (
25
25
  items: unknown[],
@@ -31,7 +31,7 @@ const values: Values = (items, rootSize, outputUnit) => {
31
31
  const param = getValueOf(...items)
32
32
 
33
33
  if (Array.isArray(param)) {
34
- return param.map((item) => value(item, rootSize, outputUnit)).join(" ")
34
+ return param.map((item) => value(item, rootSize, outputUnit)).join(' ')
35
35
  }
36
36
 
37
37
  return value(param, rootSize, outputUnit)