tailwindcss 0.0.0-oxide-insiders.9e216e4 → 0.0.0-oxide-insiders.17c060e
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.
- package/lib/util/color.js +16 -2
- package/package.json +2 -2
- package/src/util/color.js +17 -2
- package/stubs/defaultConfig.stub.js +1 -0
package/lib/util/color.js
CHANGED
|
@@ -24,8 +24,8 @@ let VALUE = /(?:\d+|\d*\.\d+)%?/;
|
|
|
24
24
|
let SEP = /(?:\s*,\s*|\s+)/;
|
|
25
25
|
let ALPHA_SEP = /\s*[,/]\s*/;
|
|
26
26
|
let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/;
|
|
27
|
-
let RGB = new RegExp(`^(
|
|
28
|
-
let HSL = new RegExp(`^(
|
|
27
|
+
let RGB = new RegExp(`^(rgba?)\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`);
|
|
28
|
+
let HSL = new RegExp(`^(hsla?)\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`);
|
|
29
29
|
function parseColor(value, { loose =false } = {}) {
|
|
30
30
|
var _match_, _match__toString;
|
|
31
31
|
if (typeof value !== "string") {
|
|
@@ -80,6 +80,17 @@ function parseColor(value, { loose =false } = {}) {
|
|
|
80
80
|
match[3],
|
|
81
81
|
match[4]
|
|
82
82
|
].filter(Boolean).map((v)=>v.toString());
|
|
83
|
+
// rgba(var(--my-color), 0.1)
|
|
84
|
+
// hsla(var(--my-color), 0.1)
|
|
85
|
+
if (color.length === 2 && color[0].startsWith("var(")) {
|
|
86
|
+
return {
|
|
87
|
+
mode: match[1],
|
|
88
|
+
color: [
|
|
89
|
+
color[0]
|
|
90
|
+
],
|
|
91
|
+
alpha: color[1]
|
|
92
|
+
};
|
|
93
|
+
}
|
|
83
94
|
if (!loose && color.length !== 3) {
|
|
84
95
|
return null;
|
|
85
96
|
}
|
|
@@ -94,5 +105,8 @@ function parseColor(value, { loose =false } = {}) {
|
|
|
94
105
|
}
|
|
95
106
|
function formatColor({ mode , color , alpha }) {
|
|
96
107
|
let hasAlpha = alpha !== undefined;
|
|
108
|
+
if (mode === "rgba" || mode === "hsla") {
|
|
109
|
+
return `${mode}(${color.join(", ")}${hasAlpha ? `, ${alpha}` : ""})`;
|
|
110
|
+
}
|
|
97
111
|
return `${mode}(${color.join(" ")}${hasAlpha ? ` / ${alpha}` : ""})`;
|
|
98
112
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tailwindcss",
|
|
3
|
-
"version": "0.0.0-oxide-insiders.
|
|
3
|
+
"version": "0.0.0-oxide-insiders.17c060e",
|
|
4
4
|
"description": "A utility-first CSS framework for rapidly building custom user interfaces.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"postcss": "^8.0.9"
|
|
71
71
|
},
|
|
72
72
|
"dependencies": {
|
|
73
|
-
"@tailwindcss/oxide": "0.0.0-oxide-insiders.
|
|
73
|
+
"@tailwindcss/oxide": "0.0.0-oxide-insiders.17c060e",
|
|
74
74
|
"arg": "^5.0.2",
|
|
75
75
|
"browserslist": "^4.21.4",
|
|
76
76
|
"chokidar": "^3.5.3",
|
package/src/util/color.js
CHANGED
|
@@ -8,10 +8,10 @@ let ALPHA_SEP = /\s*[,/]\s*/
|
|
|
8
8
|
let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/
|
|
9
9
|
|
|
10
10
|
let RGB = new RegExp(
|
|
11
|
-
`^(
|
|
11
|
+
`^(rgba?)\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
|
|
12
12
|
)
|
|
13
13
|
let HSL = new RegExp(
|
|
14
|
-
`^(
|
|
14
|
+
`^(hsla?)\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
|
|
15
15
|
)
|
|
16
16
|
|
|
17
17
|
// In "loose" mode the color may contain fewer than 3 parts, as long as at least
|
|
@@ -52,6 +52,16 @@ export function parseColor(value, { loose = false } = {}) {
|
|
|
52
52
|
|
|
53
53
|
let color = [match[2], match[3], match[4]].filter(Boolean).map((v) => v.toString())
|
|
54
54
|
|
|
55
|
+
// rgba(var(--my-color), 0.1)
|
|
56
|
+
// hsla(var(--my-color), 0.1)
|
|
57
|
+
if (color.length === 2 && color[0].startsWith('var(')) {
|
|
58
|
+
return {
|
|
59
|
+
mode: match[1],
|
|
60
|
+
color: [color[0]],
|
|
61
|
+
alpha: color[1],
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
55
65
|
if (!loose && color.length !== 3) {
|
|
56
66
|
return null
|
|
57
67
|
}
|
|
@@ -69,5 +79,10 @@ export function parseColor(value, { loose = false } = {}) {
|
|
|
69
79
|
|
|
70
80
|
export function formatColor({ mode, color, alpha }) {
|
|
71
81
|
let hasAlpha = alpha !== undefined
|
|
82
|
+
|
|
83
|
+
if (mode === 'rgba' || mode === 'hsla') {
|
|
84
|
+
return `${mode}(${color.join(', ')}${hasAlpha ? `, ${alpha}` : ''})`
|
|
85
|
+
}
|
|
86
|
+
|
|
72
87
|
return `${mode}(${color.join(' ')}${hasAlpha ? ` / ${alpha}` : ''})`
|
|
73
88
|
}
|