postcss-clampwind 0.0.4 → 0.0.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 (4) hide show
  1. package/README.md +18 -16
  2. package/dist/clampwind.cjs.cjs +72 -28
  3. package/dist/clampwind.esm.js +72 -28
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -28,6 +28,21 @@ Install the plugin from npm:
28
28
  ```sh
29
29
  npm install -D postcss-clampwind
30
30
  ```
31
+ ### Vite project setup
32
+
33
+ If you are using Vite, you are probably using Tailwind with `@tailwindcss/vite`. You need to import the plugin and use it in your `postcss.config.js` file.
34
+
35
+ ```js
36
+ // postcss.config.js
37
+ import clampwind from "postcss-clampwind";
38
+
39
+ export default {
40
+ plugins: [
41
+ clampwind()
42
+ ]
43
+ };
44
+ ```
45
+ **Demo on StackBlitz:** [postcss-clampwind-vite](https://stackblitz.com/edit/postcss-clampwind-vite?file=postcss.config.js)
31
46
 
32
47
  ### PostCSS setup
33
48
 
@@ -46,6 +61,8 @@ export default {
46
61
  }
47
62
  ```
48
63
 
64
+ **Demo on StackBlitz:** [postcss-clampwind-postcss](https://stackblitz.com/edit/postcss-clampwind-postcss?file=postcss.config.mjs)
65
+
49
66
  #### CommonJS usage
50
67
 
51
68
  If you are using CommonJS-based build tools like Webpack, you will need to use the `require` syntax and add `.default` to the import.
@@ -60,21 +77,6 @@ module.exports = {
60
77
  };
61
78
  ```
62
79
 
63
- ### Vite project setup
64
-
65
- If you are using Vite, you are probably using Tailwind with `@tailwindcss/vite`. You need to import the plugin and use it in your `postcss.config.js` file.
66
-
67
- ```js
68
- // postcss.config.js
69
- import clampwind from "postcss-clampwind";
70
-
71
- export default {
72
- plugins: [
73
- clampwind()
74
- ]
75
- };
76
- ```
77
-
78
80
  ## Features
79
81
 
80
82
  ### Interchangeable px / rem units
@@ -369,4 +371,4 @@ or like this:
369
371
 
370
372
  This project is licensed under the [Apache-2.0 license](https://apache.org/licenses/LICENSE-2.0).
371
373
 
372
- Copyright © 2025 Daniele De Pietri.
374
+ Copyright © 2025 Daniele De Pietri.
package/dist/clampwind.cjs.cjs CHANGED
@@ -360,21 +360,41 @@ var clampwind = (opts = {}) => {
360
360
  const parentParams = decl.parent.parent.params;
361
361
  let minScreen = null;
362
362
  let maxScreen = null;
363
- if (parentParams.includes(">")) {
364
- const match = parentParams.match(/>=?\s*([^)]+)/);
365
- if (match) minScreen = match[1].trim();
363
+ if (parentParams.includes(">") || parentParams.includes("min-width")) {
364
+ let match = parentParams.match(/>=?\s*([^),\s]+)/);
365
+ if (match) {
366
+ minScreen = match[1].trim();
367
+ } else {
368
+ match = parentParams.match(/min-width:\s*([^),\s]+)/);
369
+ if (match) minScreen = match[1].trim();
370
+ }
366
371
  }
367
- if (currentParams2.includes(">") && !minScreen) {
368
- const match = currentParams2.match(/>=?\s*([^)]+)/);
369
- if (match) minScreen = match[1].trim();
372
+ if (!minScreen && (currentParams2.includes(">") || currentParams2.includes("min-width"))) {
373
+ let match = currentParams2.match(/>=?\s*([^),\s]+)/);
374
+ if (match) {
375
+ minScreen = match[1].trim();
376
+ } else {
377
+ match = currentParams2.match(/min-width:\s*([^),\s]+)/);
378
+ if (match) minScreen = match[1].trim();
379
+ }
370
380
  }
371
- if (parentParams.includes("<")) {
372
- const match = parentParams.match(/<\s*([^)]+)/);
373
- if (match) maxScreen = match[1].trim();
381
+ if (parentParams.includes("<") || parentParams.includes("max-width")) {
382
+ let match = parentParams.match(/<\s*([^),\s]+)/);
383
+ if (match) {
384
+ maxScreen = match[1].trim();
385
+ } else {
386
+ match = parentParams.match(/max-width:\s*([^),\s]+)/);
387
+ if (match) maxScreen = match[1].trim();
388
+ }
374
389
  }
375
- if (currentParams2.includes("<") && !maxScreen) {
376
- const match = currentParams2.match(/<\s*([^)]+)/);
377
- if (match) maxScreen = match[1].trim();
390
+ if (!maxScreen && (currentParams2.includes("<") || currentParams2.includes("max-width"))) {
391
+ let match = currentParams2.match(/<\s*([^),\s]+)/);
392
+ if (match) {
393
+ maxScreen = match[1].trim();
394
+ } else {
395
+ match = currentParams2.match(/max-width:\s*([^),\s]+)/);
396
+ if (match) maxScreen = match[1].trim();
397
+ }
378
398
  }
379
399
  if (minScreen && maxScreen) {
380
400
  clampDecls.forEach((decl2) => {
@@ -391,15 +411,21 @@ var clampwind = (opts = {}) => {
391
411
  }
392
412
  const screenValues = Object.values(screens);
393
413
  const currentParams = decl.parent.params;
394
- if (currentParams.includes(">")) {
395
- const match = currentParams.match(/>=?\s*([^)]+)/);
414
+ if (currentParams.includes(">") || currentParams.includes("min-width")) {
415
+ let match = currentParams.match(/>=?\s*([^),\s]+)/);
416
+ if (!match) {
417
+ match = currentParams.match(/min-width:\s*([^),\s]+)/);
418
+ }
396
419
  if (match) {
397
420
  const minScreen = match[1].trim();
398
421
  const maxScreen = defaultClampRange.max || screenValues[screenValues.length - 1];
399
422
  processClampDeclaration(decl, minScreen, maxScreen, false);
400
423
  }
401
- } else if (currentParams.includes("<")) {
402
- const match = currentParams.match(/<\s*([^)]+)/);
424
+ } else if (currentParams.includes("<") || currentParams.includes("max-width")) {
425
+ let match = currentParams.match(/<\s*([^),\s]+)/);
426
+ if (!match) {
427
+ match = currentParams.match(/max-width:\s*([^),\s]+)/);
428
+ }
403
429
  if (match) {
404
430
  const minScreen = defaultClampRange.min || screenValues[0];
405
431
  const maxScreen = match[1].trim();
@@ -424,20 +450,32 @@ var clampwind = (opts = {}) => {
424
450
  const parentParams = decl.parent.parent.params;
425
451
  let minContainer = null;
426
452
  let maxContainer = null;
427
- if (parentParams.includes(">")) {
428
- const match = parentParams.match(/>=?\s*([^)]+)/);
453
+ if (parentParams.includes(">") || parentParams.includes("min-width")) {
454
+ let match = parentParams.match(/>=?\s*([^),\s]+)/);
455
+ if (!match) {
456
+ match = parentParams.match(/min-width:\s*([^),\s]+)/);
457
+ }
429
458
  if (match) minContainer = match[1].trim();
430
459
  }
431
- if (currentParams2.includes(">") && !minContainer) {
432
- const match = currentParams2.match(/>=?\s*([^)]+)/);
460
+ if (!minContainer && (currentParams2.includes(">") || currentParams2.includes("min-width"))) {
461
+ let match = currentParams2.match(/>=?\s*([^),\s]+)/);
462
+ if (!match) {
463
+ match = currentParams2.match(/min-width:\s*([^),\s]+)/);
464
+ }
433
465
  if (match) minContainer = match[1].trim();
434
466
  }
435
- if (parentParams.includes("<")) {
436
- const match = parentParams.match(/<\s*([^)]+)/);
467
+ if (parentParams.includes("<") || parentParams.includes("max-width")) {
468
+ let match = parentParams.match(/<\s*([^),\s]+)/);
469
+ if (!match) {
470
+ match = parentParams.match(/max-width:\s*([^),\s]+)/);
471
+ }
437
472
  if (match) maxContainer = match[1].trim();
438
473
  }
439
- if (currentParams2.includes("<") && !maxContainer) {
440
- const match = currentParams2.match(/<\s*([^)]+)/);
474
+ if (!maxContainer && (currentParams2.includes("<") || currentParams2.includes("max-width"))) {
475
+ let match = currentParams2.match(/<\s*([^),\s]+)/);
476
+ if (!match) {
477
+ match = currentParams2.match(/max-width:\s*([^),\s]+)/);
478
+ }
441
479
  if (match) maxContainer = match[1].trim();
442
480
  }
443
481
  if (minContainer && maxContainer) {
@@ -460,8 +498,11 @@ var clampwind = (opts = {}) => {
460
498
  }
461
499
  const containerValues = Object.values(containerScreens);
462
500
  const currentParams = decl.parent.params;
463
- if (currentParams.includes(">")) {
464
- const match = currentParams.match(/>=?\s*([^)]+)/);
501
+ if (currentParams.includes(">") || currentParams.includes("min-width")) {
502
+ let match = currentParams.match(/>=?\s*([^),\s]+)/);
503
+ if (!match) {
504
+ match = currentParams.match(/min-width:\s*([^),\s]+)/);
505
+ }
465
506
  if (match) {
466
507
  const minContainer = match[1].trim();
467
508
  const maxContainer = containerValues[containerValues.length - 1];
@@ -472,8 +513,11 @@ var clampwind = (opts = {}) => {
472
513
  true
473
514
  );
474
515
  }
475
- } else if (currentParams.includes("<")) {
476
- const match = currentParams.match(/<\s*([^)]+)/);
516
+ } else if (currentParams.includes("<") || currentParams.includes("max-width")) {
517
+ let match = currentParams.match(/<\s*([^),\s]+)/);
518
+ if (!match) {
519
+ match = currentParams.match(/max-width:\s*([^),\s]+)/);
520
+ }
477
521
  if (match) {
478
522
  const minContainer = containerValues[0];
479
523
  const maxContainer = match[1].trim();
package/dist/clampwind.esm.js CHANGED
@@ -335,21 +335,41 @@ var clampwind = (opts = {}) => {
335
335
  const parentParams = decl.parent.parent.params;
336
336
  let minScreen = null;
337
337
  let maxScreen = null;
338
- if (parentParams.includes(">")) {
339
- const match = parentParams.match(/>=?\s*([^)]+)/);
340
- if (match) minScreen = match[1].trim();
338
+ if (parentParams.includes(">") || parentParams.includes("min-width")) {
339
+ let match = parentParams.match(/>=?\s*([^),\s]+)/);
340
+ if (match) {
341
+ minScreen = match[1].trim();
342
+ } else {
343
+ match = parentParams.match(/min-width:\s*([^),\s]+)/);
344
+ if (match) minScreen = match[1].trim();
345
+ }
341
346
  }
342
- if (currentParams2.includes(">") && !minScreen) {
343
- const match = currentParams2.match(/>=?\s*([^)]+)/);
344
- if (match) minScreen = match[1].trim();
347
+ if (!minScreen && (currentParams2.includes(">") || currentParams2.includes("min-width"))) {
348
+ let match = currentParams2.match(/>=?\s*([^),\s]+)/);
349
+ if (match) {
350
+ minScreen = match[1].trim();
351
+ } else {
352
+ match = currentParams2.match(/min-width:\s*([^),\s]+)/);
353
+ if (match) minScreen = match[1].trim();
354
+ }
345
355
  }
346
- if (parentParams.includes("<")) {
347
- const match = parentParams.match(/<\s*([^)]+)/);
348
- if (match) maxScreen = match[1].trim();
356
+ if (parentParams.includes("<") || parentParams.includes("max-width")) {
357
+ let match = parentParams.match(/<\s*([^),\s]+)/);
358
+ if (match) {
359
+ maxScreen = match[1].trim();
360
+ } else {
361
+ match = parentParams.match(/max-width:\s*([^),\s]+)/);
362
+ if (match) maxScreen = match[1].trim();
363
+ }
349
364
  }
350
- if (currentParams2.includes("<") && !maxScreen) {
351
- const match = currentParams2.match(/<\s*([^)]+)/);
352
- if (match) maxScreen = match[1].trim();
365
+ if (!maxScreen && (currentParams2.includes("<") || currentParams2.includes("max-width"))) {
366
+ let match = currentParams2.match(/<\s*([^),\s]+)/);
367
+ if (match) {
368
+ maxScreen = match[1].trim();
369
+ } else {
370
+ match = currentParams2.match(/max-width:\s*([^),\s]+)/);
371
+ if (match) maxScreen = match[1].trim();
372
+ }
353
373
  }
354
374
  if (minScreen && maxScreen) {
355
375
  clampDecls.forEach((decl2) => {
@@ -366,15 +386,21 @@ var clampwind = (opts = {}) => {
366
386
  }
367
387
  const screenValues = Object.values(screens);
368
388
  const currentParams = decl.parent.params;
369
- if (currentParams.includes(">")) {
370
- const match = currentParams.match(/>=?\s*([^)]+)/);
389
+ if (currentParams.includes(">") || currentParams.includes("min-width")) {
390
+ let match = currentParams.match(/>=?\s*([^),\s]+)/);
391
+ if (!match) {
392
+ match = currentParams.match(/min-width:\s*([^),\s]+)/);
393
+ }
371
394
  if (match) {
372
395
  const minScreen = match[1].trim();
373
396
  const maxScreen = defaultClampRange.max || screenValues[screenValues.length - 1];
374
397
  processClampDeclaration(decl, minScreen, maxScreen, false);
375
398
  }
376
- } else if (currentParams.includes("<")) {
377
- const match = currentParams.match(/<\s*([^)]+)/);
399
+ } else if (currentParams.includes("<") || currentParams.includes("max-width")) {
400
+ let match = currentParams.match(/<\s*([^),\s]+)/);
401
+ if (!match) {
402
+ match = currentParams.match(/max-width:\s*([^),\s]+)/);
403
+ }
378
404
  if (match) {
379
405
  const minScreen = defaultClampRange.min || screenValues[0];
380
406
  const maxScreen = match[1].trim();
@@ -399,20 +425,32 @@ var clampwind = (opts = {}) => {
399
425
  const parentParams = decl.parent.parent.params;
400
426
  let minContainer = null;
401
427
  let maxContainer = null;
402
- if (parentParams.includes(">")) {
403
- const match = parentParams.match(/>=?\s*([^)]+)/);
428
+ if (parentParams.includes(">") || parentParams.includes("min-width")) {
429
+ let match = parentParams.match(/>=?\s*([^),\s]+)/);
430
+ if (!match) {
431
+ match = parentParams.match(/min-width:\s*([^),\s]+)/);
432
+ }
404
433
  if (match) minContainer = match[1].trim();
405
434
  }
406
- if (currentParams2.includes(">") && !minContainer) {
407
- const match = currentParams2.match(/>=?\s*([^)]+)/);
435
+ if (!minContainer && (currentParams2.includes(">") || currentParams2.includes("min-width"))) {
436
+ let match = currentParams2.match(/>=?\s*([^),\s]+)/);
437
+ if (!match) {
438
+ match = currentParams2.match(/min-width:\s*([^),\s]+)/);
439
+ }
408
440
  if (match) minContainer = match[1].trim();
409
441
  }
410
- if (parentParams.includes("<")) {
411
- const match = parentParams.match(/<\s*([^)]+)/);
442
+ if (parentParams.includes("<") || parentParams.includes("max-width")) {
443
+ let match = parentParams.match(/<\s*([^),\s]+)/);
444
+ if (!match) {
445
+ match = parentParams.match(/max-width:\s*([^),\s]+)/);
446
+ }
412
447
  if (match) maxContainer = match[1].trim();
413
448
  }
414
- if (currentParams2.includes("<") && !maxContainer) {
415
- const match = currentParams2.match(/<\s*([^)]+)/);
449
+ if (!maxContainer && (currentParams2.includes("<") || currentParams2.includes("max-width"))) {
450
+ let match = currentParams2.match(/<\s*([^),\s]+)/);
451
+ if (!match) {
452
+ match = currentParams2.match(/max-width:\s*([^),\s]+)/);
453
+ }
416
454
  if (match) maxContainer = match[1].trim();
417
455
  }
418
456
  if (minContainer && maxContainer) {
@@ -435,8 +473,11 @@ var clampwind = (opts = {}) => {
435
473
  }
436
474
  const containerValues = Object.values(containerScreens);
437
475
  const currentParams = decl.parent.params;
438
- if (currentParams.includes(">")) {
439
- const match = currentParams.match(/>=?\s*([^)]+)/);
476
+ if (currentParams.includes(">") || currentParams.includes("min-width")) {
477
+ let match = currentParams.match(/>=?\s*([^),\s]+)/);
478
+ if (!match) {
479
+ match = currentParams.match(/min-width:\s*([^),\s]+)/);
480
+ }
440
481
  if (match) {
441
482
  const minContainer = match[1].trim();
442
483
  const maxContainer = containerValues[containerValues.length - 1];
@@ -447,8 +488,11 @@ var clampwind = (opts = {}) => {
447
488
  true
448
489
  );
449
490
  }
450
- } else if (currentParams.includes("<")) {
451
- const match = currentParams.match(/<\s*([^)]+)/);
491
+ } else if (currentParams.includes("<") || currentParams.includes("max-width")) {
492
+ let match = currentParams.match(/<\s*([^),\s]+)/);
493
+ if (!match) {
494
+ match = currentParams.match(/max-width:\s*([^),\s]+)/);
495
+ }
452
496
  if (match) {
453
497
  const minContainer = containerValues[0];
454
498
  const maxContainer = match[1].trim();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "postcss-clampwind",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "description": "A PostCSS plugin to create fluid clamp values for any Tailwind CSS utility",
5
5
  "license": "Apache-2.0",
6
6
  "keywords": [