winduum 0.3.0 → 0.3.1

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 (5) hide show
  1. package/package.json +5 -5
  2. package/tailwind.config.js +12 -0
  3. package/utils/tailwind.cjs +8 -5
  4. package/utils/tailwind.js +8 -5
  5. package/tailwind.config.cjs +0 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "winduum",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "type": "module",
5
5
  "main": "utils/tailwind.cjs",
6
6
  "module": "utils/tailwind.js",
@@ -21,21 +21,21 @@
21
21
  "css-has-pseudo": "^6.0.0",
22
22
  "eslint": "^8.44.0",
23
23
  "eslint-config-standard": "^17.1.0",
24
- "postcss": "^8.4.25",
24
+ "postcss": "^8.4.26",
25
25
  "postcss-import": "^15.1.0",
26
26
  "postcss-nesting": "^12.0.0",
27
27
  "postcss-custom-media": "^10.0.0",
28
28
  "stylelint": "^15.10.1",
29
29
  "stylelint-config-standard": "^34.0.0",
30
30
  "stylelint-stylistic": "^0.4.3",
31
- "tailwindcss": "^3.3.2",
31
+ "tailwindcss": "^3.3.3",
32
32
  "fast-glob": "^3.3.0",
33
- "vite": "^4.4.2",
33
+ "vite": "^4.4.4",
34
34
  "vue": "^3.3.4"
35
35
  },
36
36
  "files": [
37
37
  "index.js",
38
- "tailwind.config.cjs",
38
+ "tailwind.config.js",
39
39
  "dist",
40
40
  "src",
41
41
  "utils"
package/tailwind.config.js ADDED
@@ -0,0 +1,12 @@
1
+ import winduum from './utils/tailwind.js'
2
+
3
+ export default {
4
+ darkMode: 'class',
5
+ content: [
6
+ './src/**/*.{js,html}',
7
+ './playground/**/*.{js,html,vue}'
8
+ ],
9
+ plugins: [
10
+ winduum()
11
+ ]
12
+ }
package/utils/tailwind.cjs CHANGED
@@ -67,7 +67,8 @@ const defaultConfig = {
67
67
  '2xxl': '158em'
68
68
  },
69
69
  settings: {
70
- rgb: true
70
+ rgb: true,
71
+ colorMix: true
71
72
  }
72
73
  };
73
74
 
@@ -77,7 +78,9 @@ const tailwindColors = (colors = []) => {
77
78
  colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`;
78
79
  }
79
80
 
80
- colors[name] = `color-mix(in sRGB, var(--color-${name}) calc(<alpha-value> * 100%), transparent)`;
81
+ colors[name] = defaultConfig.settings.colorMix
82
+ ? `color-mix(in sRGB, var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
83
+ : `rgb(var(--color-${name}) / <alpha-value>)`;
81
84
  });
82
85
 
83
86
  return colors
@@ -143,21 +146,21 @@ const createPlugin = (userConfig = {}) => {
143
146
  ...colorProperties,
144
147
  '--color-accent': fallbackRgb ? toColorValue(value) : matchValue[0],
145
148
  '--color-accent-fg': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-fg-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-fg, var(--color-light))`,
146
- 'accent-color': 'var(--color-accent)'
149
+ 'accent-color': defaultConfig.settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))'
147
150
  }
148
151
  } else {
149
152
  return {
150
153
  ...colorProperties,
151
154
  '--color-accent': toColorValue(value),
152
155
  '--color-accent-fg': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-fg-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-fg, var(--color-light))`,
153
- 'accent-color': 'var(--color-accent)'
156
+ 'accent-color': defaultConfig.settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))'
154
157
  }
155
158
  }
156
159
  }
157
160
 
158
161
  return {
159
162
  '--color-accent': toColorValue(value),
160
- 'accent-color': toColorValue(value)
163
+ 'accent-color': 'var(--color-accent)'
161
164
  }
162
165
  }
163
166
  },
package/utils/tailwind.js CHANGED
@@ -63,7 +63,8 @@ export const defaultConfig = {
63
63
  '2xxl': '158em'
64
64
  },
65
65
  settings: {
66
- rgb: true
66
+ rgb: true,
67
+ colorMix: true
67
68
  }
68
69
  }
69
70
 
@@ -73,7 +74,9 @@ export const tailwindColors = (colors = []) => {
73
74
  colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`
74
75
  }
75
76
 
76
- colors[name] = `color-mix(in sRGB, var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
77
+ colors[name] = defaultConfig.settings.colorMix
78
+ ? `color-mix(in sRGB, var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
79
+ : `rgb(var(--color-${name}) / <alpha-value>)`
77
80
  })
78
81
 
79
82
  return colors
@@ -139,21 +142,21 @@ export const createPlugin = (userConfig = {}) => {
139
142
  ...colorProperties,
140
143
  '--color-accent': fallbackRgb ? toColorValue(value) : matchValue[0],
141
144
  '--color-accent-fg': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-fg-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-fg, var(--color-light))`,
142
- 'accent-color': 'var(--color-accent)'
145
+ 'accent-color': defaultConfig.settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))'
143
146
  }
144
147
  } else {
145
148
  return {
146
149
  ...colorProperties,
147
150
  '--color-accent': toColorValue(value),
148
151
  '--color-accent-fg': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-fg-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-fg, var(--color-light))`,
149
- 'accent-color': 'var(--color-accent)'
152
+ 'accent-color': defaultConfig.settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))'
150
153
  }
151
154
  }
152
155
  }
153
156
 
154
157
  return {
155
158
  '--color-accent': toColorValue(value),
156
- 'accent-color': toColorValue(value)
159
+ 'accent-color': 'var(--color-accent)'
157
160
  }
158
161
  }
159
162
  },
package/tailwind.config.cjs DELETED
@@ -1,10 +0,0 @@
1
- module.exports = {
2
- darkMode: 'class',
3
- content: [
4
- './src/**/*.{js,html}',
5
- './playground/**/*.{js,html,vue}'
6
- ],
7
- plugins: [
8
- require('./utils/tailwind.cjs')()
9
- ]
10
- }