tailwind-to-style 2.5.2 → 2.6.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.
- package/README.md +19 -0
- package/dist/index.browser.js +153 -100
- package/{index.js → dist/index.cjs.js} +153 -100
- package/dist/index.esm.js +1144 -1108
- package/dist/index.min.js +2 -0
- package/dist/index.min.js.map +1 -0
- package/package.json +2 -7
- package/index.min.js +0 -2
package/README.md
CHANGED
|
@@ -340,6 +340,25 @@ const styles = twsx({
|
|
|
340
340
|
|
|
341
341
|
The `@css` feature provides a powerful way to bridge the gap between Tailwind's utility classes and custom CSS when needed, without leaving the `twsx` syntax.
|
|
342
342
|
|
|
343
|
+
### Inject Option (Browser Only)
|
|
344
|
+
|
|
345
|
+
By default, every call to `twsx` in the browser will automatically inject the generated CSS into a `<style id="twsx-auto-style">` tag in the document `<head>`. This makes it easy to use dynamic styles in browser or CDN scenarios without manual CSS management.
|
|
346
|
+
|
|
347
|
+
You can control this behavior with the `inject` option:
|
|
348
|
+
|
|
349
|
+
```js
|
|
350
|
+
// Auto-inject (default)
|
|
351
|
+
twsx({ ... }) // CSS is injected automatically
|
|
352
|
+
|
|
353
|
+
// Disable auto-inject
|
|
354
|
+
twsx({ ... }, { inject: false }) // CSS is NOT injected, just returned as string
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
- **inject: true** (default): CSS is injected into the page (browser only).
|
|
358
|
+
- **inject: false**: CSS is only returned as a string, not injected. Useful for SSR, testing, or custom handling.
|
|
359
|
+
|
|
360
|
+
> Note: This option only affects browser usage. In Node.js or SSR, no injection occurs.
|
|
361
|
+
|
|
343
362
|
## License
|
|
344
363
|
|
|
345
364
|
## Contributing
|
package/dist/index.browser.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* tailwind-to-style v2.
|
|
2
|
+
* tailwind-to-style v2.6.1
|
|
3
3
|
* Convert tailwind classes to inline style
|
|
4
4
|
*
|
|
5
5
|
* @author Bigetion
|
|
@@ -1350,8 +1350,15 @@ var tailwindToStyle = (function (exports) {
|
|
|
1350
1350
|
}
|
|
1351
1351
|
};
|
|
1352
1352
|
|
|
1353
|
+
const vars = {
|
|
1354
|
+
transform: `transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1));`,
|
|
1355
|
+
filter: `filter: blur(var(--blur, 0)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1)) grayscale(var(--grayscale, 0)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0)) saturate(var(--saturate, 1)) sepia(var(--sepia, 0)) drop-shadow(var(--drop-shadow, 0 0 #0000));`,
|
|
1356
|
+
backdropFilter: `-webkit-backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0)); backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0));`
|
|
1357
|
+
};
|
|
1358
|
+
|
|
1353
1359
|
const configOptions = {
|
|
1354
|
-
theme
|
|
1360
|
+
theme,
|
|
1361
|
+
vars
|
|
1355
1362
|
};
|
|
1356
1363
|
|
|
1357
1364
|
function isFunction(functionToCheck) {
|
|
@@ -1390,6 +1397,7 @@ var tailwindToStyle = (function (exports) {
|
|
|
1390
1397
|
});
|
|
1391
1398
|
return {
|
|
1392
1399
|
prefix: "",
|
|
1400
|
+
...configOptions,
|
|
1393
1401
|
...options,
|
|
1394
1402
|
theme: newTheme
|
|
1395
1403
|
};
|
|
@@ -1864,7 +1872,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
1864
1872
|
function generator$2b(configOptions = {}) {
|
|
1865
1873
|
const {
|
|
1866
1874
|
prefix: globalPrefix,
|
|
1867
|
-
theme = {}
|
|
1875
|
+
theme = {},
|
|
1876
|
+
vars = {}
|
|
1868
1877
|
} = configOptions;
|
|
1869
1878
|
const prefix = `${globalPrefix}blur`;
|
|
1870
1879
|
const basePrefix = prefix.replace(globalPrefix, "");
|
|
@@ -1878,10 +1887,12 @@ var tailwindToStyle = (function (exports) {
|
|
|
1878
1887
|
const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
|
|
1879
1888
|
return `
|
|
1880
1889
|
${prefix}${key} {
|
|
1881
|
-
--blur:
|
|
1890
|
+
--blur: ${value};
|
|
1891
|
+
${vars.filter}
|
|
1882
1892
|
}
|
|
1883
1893
|
${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
|
|
1884
|
-
--backdrop-blur:
|
|
1894
|
+
--backdrop-blur: ${value};
|
|
1895
|
+
${vars.backdropFilter}
|
|
1885
1896
|
}
|
|
1886
1897
|
`;
|
|
1887
1898
|
});
|
|
@@ -2278,7 +2289,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
2278
2289
|
function generator$20(configOptions = {}) {
|
|
2279
2290
|
const {
|
|
2280
2291
|
prefix: globalPrefix,
|
|
2281
|
-
theme = {}
|
|
2292
|
+
theme = {},
|
|
2293
|
+
vars = {}
|
|
2282
2294
|
} = configOptions;
|
|
2283
2295
|
const prefix = `${globalPrefix}brightness`;
|
|
2284
2296
|
const basePrefix = prefix.replace(globalPrefix, "");
|
|
@@ -2292,10 +2304,12 @@ var tailwindToStyle = (function (exports) {
|
|
|
2292
2304
|
const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
|
|
2293
2305
|
return `
|
|
2294
2306
|
${prefix}${key} {
|
|
2295
|
-
--brightness:
|
|
2307
|
+
--brightness: ${value};
|
|
2308
|
+
${vars.filter}
|
|
2296
2309
|
}
|
|
2297
2310
|
${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
|
|
2298
|
-
--backdrop-brightness:
|
|
2311
|
+
--backdrop-brightness: ${value};
|
|
2312
|
+
${vars.backdropFilter}
|
|
2299
2313
|
}
|
|
2300
2314
|
`;
|
|
2301
2315
|
});
|
|
@@ -2404,7 +2418,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
2404
2418
|
function generator$1X(configOptions = {}) {
|
|
2405
2419
|
const {
|
|
2406
2420
|
prefix: globalPrefix,
|
|
2407
|
-
theme = {}
|
|
2421
|
+
theme = {},
|
|
2422
|
+
vars = {}
|
|
2408
2423
|
} = configOptions;
|
|
2409
2424
|
const prefix = `${globalPrefix}contrast`;
|
|
2410
2425
|
const basePrefix = prefix.replace(globalPrefix, "");
|
|
@@ -2418,10 +2433,12 @@ var tailwindToStyle = (function (exports) {
|
|
|
2418
2433
|
const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
|
|
2419
2434
|
return `
|
|
2420
2435
|
${prefix}${key} {
|
|
2421
|
-
--contrast:
|
|
2436
|
+
--contrast: ${value};
|
|
2437
|
+
${vars.filter}
|
|
2422
2438
|
}
|
|
2423
2439
|
${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
|
|
2424
|
-
--backdrop-contrast:
|
|
2440
|
+
--backdrop-contrast: ${value};
|
|
2441
|
+
${vars.backdropFilter}
|
|
2425
2442
|
}
|
|
2426
2443
|
`;
|
|
2427
2444
|
});
|
|
@@ -2636,34 +2653,11 @@ var tailwindToStyle = (function (exports) {
|
|
|
2636
2653
|
function generator$1O({
|
|
2637
2654
|
prefix
|
|
2638
2655
|
}) {
|
|
2639
|
-
return `
|
|
2640
|
-
${prefix}filter {
|
|
2641
|
-
--blur: ;
|
|
2642
|
-
--brightness: ;
|
|
2643
|
-
--contrast: ;
|
|
2644
|
-
--grayscale: ;
|
|
2645
|
-
--hue-rotate: ;
|
|
2646
|
-
--invert: ;
|
|
2647
|
-
--saturate: ;
|
|
2648
|
-
--sepia: ;
|
|
2649
|
-
--drop-shadow: ;
|
|
2650
|
-
filter: var(--blur) var(--brightness) var(--contrast) var(--grayscale) var(--hue-rotate) var(--invert) var(--saturate) var(--sepia) var(--drop-shadow);
|
|
2651
|
-
|
|
2652
|
-
--backdrop-blur: ;
|
|
2653
|
-
--backdrop-brightness: ;
|
|
2654
|
-
--backdrop-contrast: ;
|
|
2655
|
-
--backdrop-grayscale: ;
|
|
2656
|
-
--backdrop-hue-rotate: ;
|
|
2657
|
-
--backdrop-invert: ;
|
|
2658
|
-
--backdrop-opacity: ;
|
|
2659
|
-
--backdrop-saturate: ;
|
|
2660
|
-
--backdrop-sepia: ;
|
|
2661
|
-
-webkit-backdrop-filter: var(--backdrop-blur) var(--backdrop-brightness) var(--backdrop-contrast) var(--backdrop-grayscale) var(--backdrop-hue-rotate) var(--backdrop-invert) var(--backdrop-opacity) var(--backdrop-saturate) var(--backdrop-sepia);
|
|
2662
|
-
backdrop-filter: var(--backdrop-blur) var(--backdrop-brightness) var(--backdrop-contrast) var(--backdrop-grayscale) var(--backdrop-hue-rotate) var(--backdrop-invert) var(--backdrop-opacity) var(--backdrop-saturate) var(--backdrop-sepia);
|
|
2663
|
-
}
|
|
2656
|
+
return `
|
|
2664
2657
|
${prefix}filter-none {
|
|
2665
|
-
filter: none;
|
|
2666
|
-
backdrop-filter: none;
|
|
2658
|
+
filter: none !important;
|
|
2659
|
+
-webkit-backdrop-filter: none !important;
|
|
2660
|
+
backdrop-filter: none !important;
|
|
2667
2661
|
}
|
|
2668
2662
|
`;
|
|
2669
2663
|
}
|
|
@@ -3003,7 +2997,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
3003
2997
|
function generator$1z(configOptions = {}) {
|
|
3004
2998
|
const {
|
|
3005
2999
|
prefix: globalPrefix,
|
|
3006
|
-
theme = {}
|
|
3000
|
+
theme = {},
|
|
3001
|
+
vars = {}
|
|
3007
3002
|
} = configOptions;
|
|
3008
3003
|
const prefix = `${globalPrefix}grayscale`;
|
|
3009
3004
|
const basePrefix = prefix.replace(globalPrefix, "");
|
|
@@ -3017,10 +3012,12 @@ var tailwindToStyle = (function (exports) {
|
|
|
3017
3012
|
const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
|
|
3018
3013
|
return `
|
|
3019
3014
|
${prefix}${key} {
|
|
3020
|
-
--grayscale:
|
|
3015
|
+
--grayscale: ${value};
|
|
3016
|
+
${vars.filter}
|
|
3021
3017
|
}
|
|
3022
3018
|
${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
|
|
3023
|
-
--backdrop-grayscale:
|
|
3019
|
+
--backdrop-grayscale: ${value};
|
|
3020
|
+
${vars.backdropFilter}
|
|
3024
3021
|
}
|
|
3025
3022
|
`;
|
|
3026
3023
|
});
|
|
@@ -3298,7 +3295,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
3298
3295
|
function generator$1m(configOptions = {}) {
|
|
3299
3296
|
const {
|
|
3300
3297
|
prefix: globalPrefix,
|
|
3301
|
-
theme = {}
|
|
3298
|
+
theme = {},
|
|
3299
|
+
vars = {}
|
|
3302
3300
|
} = configOptions;
|
|
3303
3301
|
const {
|
|
3304
3302
|
hueRotate = {}
|
|
@@ -3316,10 +3314,12 @@ var tailwindToStyle = (function (exports) {
|
|
|
3316
3314
|
}
|
|
3317
3315
|
return `
|
|
3318
3316
|
${prefix}-${key} {
|
|
3319
|
-
--hue-rotate:
|
|
3317
|
+
--hue-rotate: ${value};
|
|
3318
|
+
${vars.filter}
|
|
3320
3319
|
}
|
|
3321
3320
|
${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}-${key} {
|
|
3322
|
-
--backdrop-hue-rotate:
|
|
3321
|
+
--backdrop-hue-rotate: ${value};
|
|
3322
|
+
${vars.backdropFilter}
|
|
3323
3323
|
}
|
|
3324
3324
|
`;
|
|
3325
3325
|
});
|
|
@@ -3406,7 +3406,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
3406
3406
|
function generator$1j(configOptions = {}) {
|
|
3407
3407
|
const {
|
|
3408
3408
|
prefix: globalPrefix,
|
|
3409
|
-
theme = {}
|
|
3409
|
+
theme = {},
|
|
3410
|
+
vars = {}
|
|
3410
3411
|
} = configOptions;
|
|
3411
3412
|
const prefix = `${globalPrefix}invert`;
|
|
3412
3413
|
const basePrefix = prefix.replace(globalPrefix, "");
|
|
@@ -3420,10 +3421,12 @@ var tailwindToStyle = (function (exports) {
|
|
|
3420
3421
|
const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
|
|
3421
3422
|
return `
|
|
3422
3423
|
${prefix}${key} {
|
|
3423
|
-
--invert:
|
|
3424
|
+
--invert: ${value};
|
|
3425
|
+
${vars.filter}
|
|
3424
3426
|
}
|
|
3425
3427
|
${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
|
|
3426
|
-
--backdrop-invert:
|
|
3428
|
+
--backdrop-invert: ${value};
|
|
3429
|
+
${vars.backdropFilter}
|
|
3427
3430
|
}
|
|
3428
3431
|
`;
|
|
3429
3432
|
});
|
|
@@ -3839,7 +3842,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
3839
3842
|
function generator$11(configOptions = {}) {
|
|
3840
3843
|
const {
|
|
3841
3844
|
prefix: globalPrefix,
|
|
3842
|
-
theme = {}
|
|
3845
|
+
theme = {},
|
|
3846
|
+
vars = {}
|
|
3843
3847
|
} = configOptions;
|
|
3844
3848
|
const prefix = `${globalPrefix}opacity`;
|
|
3845
3849
|
const basePrefix = prefix.replace(globalPrefix, "");
|
|
@@ -3852,9 +3856,11 @@ var tailwindToStyle = (function (exports) {
|
|
|
3852
3856
|
const cssString = getCssByOptions(opacity, (key, value) => `
|
|
3853
3857
|
${prefix}-${key} {
|
|
3854
3858
|
opacity: ${value};
|
|
3859
|
+
${vars.filter}
|
|
3855
3860
|
}
|
|
3856
3861
|
${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}-${key} {
|
|
3857
|
-
--backdrop-opacity:
|
|
3862
|
+
--backdrop-opacity: ${value};
|
|
3863
|
+
${vars.backdropFilter}
|
|
3858
3864
|
}
|
|
3859
3865
|
`);
|
|
3860
3866
|
return cssString;
|
|
@@ -4393,7 +4399,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
4393
4399
|
function generator$I(configOptions = {}) {
|
|
4394
4400
|
const {
|
|
4395
4401
|
prefix: globalPrefix,
|
|
4396
|
-
theme = {}
|
|
4402
|
+
theme = {},
|
|
4403
|
+
vars = {}
|
|
4397
4404
|
} = configOptions;
|
|
4398
4405
|
const prefix = `${globalPrefix}saturate`;
|
|
4399
4406
|
const basePrefix = prefix.replace(globalPrefix, "");
|
|
@@ -4407,10 +4414,12 @@ var tailwindToStyle = (function (exports) {
|
|
|
4407
4414
|
const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
|
|
4408
4415
|
return `
|
|
4409
4416
|
${prefix}${key} {
|
|
4410
|
-
--saturate:
|
|
4417
|
+
--saturate: ${value};
|
|
4418
|
+
${vars.filter}
|
|
4411
4419
|
}
|
|
4412
4420
|
${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
|
|
4413
|
-
--backdrop-saturate:
|
|
4421
|
+
--backdrop-saturate: ${value};
|
|
4422
|
+
${vars.backdropFilter}
|
|
4414
4423
|
}
|
|
4415
4424
|
`;
|
|
4416
4425
|
});
|
|
@@ -4422,7 +4431,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
4422
4431
|
function generator$H(configOptions = {}) {
|
|
4423
4432
|
const {
|
|
4424
4433
|
prefix: globalPrefix,
|
|
4425
|
-
theme = {}
|
|
4434
|
+
theme = {},
|
|
4435
|
+
vars = {}
|
|
4426
4436
|
} = configOptions;
|
|
4427
4437
|
const {
|
|
4428
4438
|
rotate = {}
|
|
@@ -4443,6 +4453,7 @@ var tailwindToStyle = (function (exports) {
|
|
|
4443
4453
|
return `
|
|
4444
4454
|
${prefix}-${key} {
|
|
4445
4455
|
--transform-rotate: ${value};
|
|
4456
|
+
${vars.transform}
|
|
4446
4457
|
}
|
|
4447
4458
|
`;
|
|
4448
4459
|
});
|
|
@@ -4454,7 +4465,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
4454
4465
|
function generator$G(configOptions = {}) {
|
|
4455
4466
|
const {
|
|
4456
4467
|
prefix: globalPrefix,
|
|
4457
|
-
theme = {}
|
|
4468
|
+
theme = {},
|
|
4469
|
+
vars = {}
|
|
4458
4470
|
} = configOptions;
|
|
4459
4471
|
const prefix = `${globalPrefix}scale`;
|
|
4460
4472
|
const {
|
|
@@ -4467,12 +4479,15 @@ var tailwindToStyle = (function (exports) {
|
|
|
4467
4479
|
${prefix}-${key} {
|
|
4468
4480
|
--transform-scale-x: ${value};
|
|
4469
4481
|
--transform-scale-y: ${value};
|
|
4482
|
+
${vars.transform}
|
|
4470
4483
|
}
|
|
4471
4484
|
${prefix}-x-${key} {
|
|
4472
4485
|
--transform-scale-x: ${value};
|
|
4486
|
+
${vars.transform}
|
|
4473
4487
|
}
|
|
4474
4488
|
${prefix}-y-${key} {
|
|
4475
4489
|
--transform-scale-y: ${value};
|
|
4490
|
+
${vars.transform}
|
|
4476
4491
|
}
|
|
4477
4492
|
`);
|
|
4478
4493
|
return cssString;
|
|
@@ -4690,7 +4705,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
4690
4705
|
function generator$z(configOptions = {}) {
|
|
4691
4706
|
const {
|
|
4692
4707
|
prefix: globalPrefix,
|
|
4693
|
-
theme = {}
|
|
4708
|
+
theme = {},
|
|
4709
|
+
vars = {}
|
|
4694
4710
|
} = configOptions;
|
|
4695
4711
|
const prefix = `${globalPrefix}sepia`;
|
|
4696
4712
|
const basePrefix = prefix.replace(globalPrefix, "");
|
|
@@ -4704,10 +4720,12 @@ var tailwindToStyle = (function (exports) {
|
|
|
4704
4720
|
const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
|
|
4705
4721
|
return `
|
|
4706
4722
|
${prefix}${key} {
|
|
4707
|
-
--sepia:
|
|
4723
|
+
--sepia: ${value};
|
|
4724
|
+
${vars.filter}
|
|
4708
4725
|
}
|
|
4709
4726
|
${prefix.replace(basePrefix, `backdrop-${basePrefix}`)}${key} {
|
|
4710
|
-
--backdrop-sepia:
|
|
4727
|
+
--backdrop-sepia: ${value};
|
|
4728
|
+
${vars.backdropFilter}
|
|
4711
4729
|
}
|
|
4712
4730
|
`;
|
|
4713
4731
|
});
|
|
@@ -4742,7 +4760,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
4742
4760
|
function generator$x(configOptions = {}) {
|
|
4743
4761
|
const {
|
|
4744
4762
|
prefix: globalPrefix,
|
|
4745
|
-
theme = {}
|
|
4763
|
+
theme = {},
|
|
4764
|
+
vars = {}
|
|
4746
4765
|
} = configOptions;
|
|
4747
4766
|
const {
|
|
4748
4767
|
skew = {}
|
|
@@ -4763,9 +4782,11 @@ var tailwindToStyle = (function (exports) {
|
|
|
4763
4782
|
return `
|
|
4764
4783
|
${prefix}-x-${key} {
|
|
4765
4784
|
--transform-skew-x: ${value};
|
|
4785
|
+
${vars.transform}
|
|
4766
4786
|
}
|
|
4767
4787
|
${prefix}-y-${key} {
|
|
4768
4788
|
--transform-skew-y: ${value};
|
|
4789
|
+
${vars.transform}
|
|
4769
4790
|
}
|
|
4770
4791
|
`;
|
|
4771
4792
|
});
|
|
@@ -5337,19 +5358,9 @@ var tailwindToStyle = (function (exports) {
|
|
|
5337
5358
|
function generator$a({
|
|
5338
5359
|
prefix
|
|
5339
5360
|
}) {
|
|
5340
|
-
return `
|
|
5341
|
-
${prefix}transform {
|
|
5342
|
-
--transform-translate-x: 0;
|
|
5343
|
-
--transform-translate-y: 0;
|
|
5344
|
-
--transform-rotate: 0;
|
|
5345
|
-
--transform-skew-x: 0;
|
|
5346
|
-
--transform-skew-y: 0;
|
|
5347
|
-
--transform-scale-x: 1;
|
|
5348
|
-
--transform-scale-y: 1;
|
|
5349
|
-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
|
|
5350
|
-
}
|
|
5361
|
+
return `
|
|
5351
5362
|
${prefix}transform-none {
|
|
5352
|
-
transform: none;
|
|
5363
|
+
transform: none !important;
|
|
5353
5364
|
}
|
|
5354
5365
|
`;
|
|
5355
5366
|
}
|
|
@@ -5365,7 +5376,7 @@ var tailwindToStyle = (function (exports) {
|
|
|
5365
5376
|
}) => {
|
|
5366
5377
|
const cssString = getCssByOptions(propertyOptions, (key, value) => `
|
|
5367
5378
|
${prefix}-${key} {
|
|
5368
|
-
transform-origin: ${value.replace("-", " ")}
|
|
5379
|
+
transform-origin: ${value.replace("-", " ")};
|
|
5369
5380
|
}
|
|
5370
5381
|
`);
|
|
5371
5382
|
return cssString;
|
|
@@ -5376,7 +5387,8 @@ var tailwindToStyle = (function (exports) {
|
|
|
5376
5387
|
function generator$8(configOptions = {}) {
|
|
5377
5388
|
const {
|
|
5378
5389
|
prefix: globalPrefix,
|
|
5379
|
-
theme = {}
|
|
5390
|
+
theme = {},
|
|
5391
|
+
vars = {}
|
|
5380
5392
|
} = configOptions;
|
|
5381
5393
|
const {
|
|
5382
5394
|
translate = {}
|
|
@@ -5397,9 +5409,11 @@ var tailwindToStyle = (function (exports) {
|
|
|
5397
5409
|
return `
|
|
5398
5410
|
${prefix}-x-${key} {
|
|
5399
5411
|
--transform-translate-x: ${value};
|
|
5412
|
+
${vars.transform}
|
|
5400
5413
|
}
|
|
5401
5414
|
${prefix}-y-${key} {
|
|
5402
5415
|
--transform-translate-y: ${value};
|
|
5416
|
+
${vars.transform}
|
|
5403
5417
|
}
|
|
5404
5418
|
`;
|
|
5405
5419
|
});
|
|
@@ -5818,10 +5832,10 @@ var tailwindToStyle = (function (exports) {
|
|
|
5818
5832
|
return null;
|
|
5819
5833
|
}
|
|
5820
5834
|
|
|
5821
|
-
/**
|
|
5822
|
-
* Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
|
|
5823
|
-
* @param {string} cssString
|
|
5824
|
-
* @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
|
|
5835
|
+
/**
|
|
5836
|
+
* Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
|
|
5837
|
+
* @param {string} cssString
|
|
5838
|
+
* @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
|
|
5825
5839
|
*/
|
|
5826
5840
|
function resolveCssToClearCss(cssString) {
|
|
5827
5841
|
const customVars = {};
|
|
@@ -5981,7 +5995,7 @@ var tailwindToStyle = (function (exports) {
|
|
|
5981
5995
|
const cssResolutionCache = new Map();
|
|
5982
5996
|
function separateAndResolveCSS(arr) {
|
|
5983
5997
|
// Perbaiki: cacheKey harus unik untuk setiap input array
|
|
5984
|
-
const cacheKey = Array.isArray(arr) ? arr.join(
|
|
5998
|
+
const cacheKey = Array.isArray(arr) ? arr.join("|") : String(arr);
|
|
5985
5999
|
if (cssResolutionCache.has(cacheKey)) {
|
|
5986
6000
|
return cssResolutionCache.get(cacheKey);
|
|
5987
6001
|
}
|
|
@@ -6051,11 +6065,11 @@ var tailwindToStyle = (function (exports) {
|
|
|
6051
6065
|
};
|
|
6052
6066
|
}
|
|
6053
6067
|
|
|
6054
|
-
/**
|
|
6055
|
-
* Mengkonversi string kelas Tailwind menjadi inline styles CSS atau objek JSON
|
|
6056
|
-
* @param {string} classNames - String berisi kelas Tailwind yang akan dikonversi
|
|
6057
|
-
* @param {boolean} convertToJson - Jika true, hasil akan menjadi objek JSON, jika false menjadi string CSS
|
|
6058
|
-
* @returns {string|Object} String CSS inline atau objek style JSON
|
|
6068
|
+
/**
|
|
6069
|
+
* Mengkonversi string kelas Tailwind menjadi inline styles CSS atau objek JSON
|
|
6070
|
+
* @param {string} classNames - String berisi kelas Tailwind yang akan dikonversi
|
|
6071
|
+
* @param {boolean} convertToJson - Jika true, hasil akan menjadi objek JSON, jika false menjadi string CSS
|
|
6072
|
+
* @returns {string|Object} String CSS inline atau objek style JSON
|
|
6059
6073
|
*/
|
|
6060
6074
|
function tws(classNames, convertToJson) {
|
|
6061
6075
|
if ([!classNames, typeof classNames !== "string", classNames.trim() === ""].includes(true)) {
|
|
@@ -6097,17 +6111,21 @@ var tailwindToStyle = (function (exports) {
|
|
|
6097
6111
|
return cssResult;
|
|
6098
6112
|
}
|
|
6099
6113
|
|
|
6100
|
-
/**
|
|
6101
|
-
* Menghasilkan string CSS dari objek style dengan sintaks mirip SCSS
|
|
6102
|
-
* Mendukung nested selectors, state variants, responsive variants, dan @css directives
|
|
6103
|
-
* @param {Object} obj - Objek dengan format style mirip SCSS
|
|
6104
|
-
* @
|
|
6114
|
+
/**
|
|
6115
|
+
* Menghasilkan string CSS dari objek style dengan sintaks mirip SCSS
|
|
6116
|
+
* Mendukung nested selectors, state variants, responsive variants, dan @css directives
|
|
6117
|
+
* @param {Object} obj - Objek dengan format style mirip SCSS
|
|
6118
|
+
* @param {Object} [options] - Opsi tambahan, misal { inject: true/false }
|
|
6119
|
+
* @returns {string} String CSS yang dihasilkan
|
|
6105
6120
|
*/
|
|
6106
|
-
function twsx(obj) {
|
|
6121
|
+
function twsx(obj, options = {}) {
|
|
6107
6122
|
if (!obj || typeof obj !== "object") {
|
|
6108
6123
|
console.warn("twsx: Expected an object but received:", obj);
|
|
6109
6124
|
return "";
|
|
6110
6125
|
}
|
|
6126
|
+
const {
|
|
6127
|
+
inject = true
|
|
6128
|
+
} = options;
|
|
6111
6129
|
const styles = {};
|
|
6112
6130
|
function expandGroupedClass(input) {
|
|
6113
6131
|
function expandDirectiveGroups(str) {
|
|
@@ -6362,24 +6380,59 @@ var tailwindToStyle = (function (exports) {
|
|
|
6362
6380
|
}
|
|
6363
6381
|
cssString += `}`;
|
|
6364
6382
|
}
|
|
6365
|
-
|
|
6383
|
+
cssString = cssString.trim();
|
|
6384
|
+
if (inject && typeof window !== "undefined" && typeof document !== "undefined") {
|
|
6385
|
+
autoInjectCss(cssString);
|
|
6386
|
+
}
|
|
6387
|
+
return cssString;
|
|
6388
|
+
}
|
|
6389
|
+
|
|
6390
|
+
// Fungsi hashCode sederhana untuk deduplikasi CSS
|
|
6391
|
+
function getCssHash(str) {
|
|
6392
|
+
let hash = 0,
|
|
6393
|
+
i,
|
|
6394
|
+
chr;
|
|
6395
|
+
if (str.length === 0) return hash;
|
|
6396
|
+
for (i = 0; i < str.length; i++) {
|
|
6397
|
+
chr = str.charCodeAt(i);
|
|
6398
|
+
hash = (hash << 5) - hash + chr;
|
|
6399
|
+
hash |= 0; // Convert to 32bit integer
|
|
6400
|
+
}
|
|
6401
|
+
return hash;
|
|
6402
|
+
}
|
|
6403
|
+
|
|
6404
|
+
// Cache untuk deduplikasi auto-inject CSS pakai hash
|
|
6405
|
+
const injectedCssHashSet = new Set();
|
|
6406
|
+
function autoInjectCss(cssString) {
|
|
6407
|
+
if (typeof window !== "undefined" && typeof document !== "undefined") {
|
|
6408
|
+
const cssHash = getCssHash(cssString);
|
|
6409
|
+
if (injectedCssHashSet.has(cssHash)) return;
|
|
6410
|
+
injectedCssHashSet.add(cssHash);
|
|
6411
|
+
let styleTag = document.getElementById("twsx-auto-style");
|
|
6412
|
+
if (!styleTag) {
|
|
6413
|
+
styleTag = document.createElement("style");
|
|
6414
|
+
styleTag.id = "twsx-auto-style";
|
|
6415
|
+
document.head.appendChild(styleTag);
|
|
6416
|
+
}
|
|
6417
|
+
styleTag.textContent += `\n${cssString}`;
|
|
6418
|
+
}
|
|
6366
6419
|
}
|
|
6367
6420
|
|
|
6368
6421
|
// Daftarkan versi debounced dari fungsi-fungsi export
|
|
6369
|
-
/**
|
|
6370
|
-
* Versi debounced dari fungsi tws
|
|
6371
|
-
* Membantu mengoptimalkan performa ketika memanggil tws berulang kali
|
|
6372
|
-
* @param {string} classNames - String berisi kelas Tailwind yang akan dikonversi
|
|
6373
|
-
* @param {boolean} convertToJson - Jika true, hasil akan menjadi objek JSON, jika false menjadi string CSS
|
|
6374
|
-
* @returns {string|Object} String CSS inline atau objek style JSON
|
|
6422
|
+
/**
|
|
6423
|
+
* Versi debounced dari fungsi tws
|
|
6424
|
+
* Membantu mengoptimalkan performa ketika memanggil tws berulang kali
|
|
6425
|
+
* @param {string} classNames - String berisi kelas Tailwind yang akan dikonversi
|
|
6426
|
+
* @param {boolean} convertToJson - Jika true, hasil akan menjadi objek JSON, jika false menjadi string CSS
|
|
6427
|
+
* @returns {string|Object} String CSS inline atau objek style JSON
|
|
6375
6428
|
*/
|
|
6376
6429
|
const debouncedTws = debounce(tws);
|
|
6377
6430
|
|
|
6378
|
-
/**
|
|
6379
|
-
* Versi debounced dari fungsi twsx
|
|
6380
|
-
* Membantu mengoptimalkan performa ketika memanggil twsx berulang kali
|
|
6381
|
-
* @param {Object} obj - Objek dengan format style mirip SCSS
|
|
6382
|
-
* @returns {string} String CSS yang dihasilkan
|
|
6431
|
+
/**
|
|
6432
|
+
* Versi debounced dari fungsi twsx
|
|
6433
|
+
* Membantu mengoptimalkan performa ketika memanggil twsx berulang kali
|
|
6434
|
+
* @param {Object} obj - Objek dengan format style mirip SCSS
|
|
6435
|
+
* @returns {string} String CSS yang dihasilkan
|
|
6383
6436
|
*/
|
|
6384
6437
|
const debouncedTwsx = debounce(twsx);
|
|
6385
6438
|
|