@warp-ds/uno - npm Package Compare versions

Comparing version 1.4.0-next.5 to 1.4.0-next.6

package.json

 {
   "name": "@warp-ds/uno",
   "repository": "[e-mail]:warp-ds/drive.git",
-  "version": "1.4.0-next.5",
+  "version": "1.4.0-next.6",
   "type": "module",
@@ -6,0 +6,0 @@ "exports": {

src/_rules/background.js

@@ -8,10 +8,13 @@ import { positionMap, globalKeywords, makeGlobalStaticRules } from '#utils';
   ['bg-contain', { 'background-size': 'contain' }],
-  // attachments
+
+  // attachment
   ['bg-fixed', { 'background-attachment': 'fixed' }],
   ['bg-local', { 'background-attachment': 'local' }],
   ['bg-scroll', { 'background-attachment': 'scroll' }],
-  // positions
+
+  // position
   // skip 1 & 2 letters shortcut
   [/^bg-([-\w]{3,})$/, ([, s]) => ({ 'background-position': positionMap[s] })],
   [/^bg-([-\w]{3,})-([-\w]{3,})$/, ([, first, second]) => ({ 'background-position': `${positionMap[first]} ${positionMap[second]}` })],
+
   // clip
@@ -26,3 +29,4 @@ ['bg-clip-border', { '-webkit-background-clip': 'border-box', 'background-clip': 'border-box' }],
   }]),
-  // repeats
+
+  // repeat
   ['bg-repeat', { 'background-repeat': 'repeat' }],
@@ -36,3 +40,3 @@ ['bg-no-repeat', { 'background-repeat': 'no-repeat' }],
 
-  // origins
+  // origin
   ['bg-origin-border', { 'background-origin': 'border-box' }],
@@ -43,11 +47,17 @@ ['bg-origin-padding', { 'background-origin': 'padding-box' }],
 
-  //arbitrary
-  [/^bg-\[(.+)]/, ([, p]) => {
-    if (p.startsWith('url')) {
-      // Process url(var(--something)) and extract the var itself -> --something
-      const urlAsVar = p.match(/url\(var\(([^)]*)/)?.[1];
-      return { 'background-image': urlAsVar ? `var(${urlAsVar})` : p };
-    }
-    return { 'background-color': p.startsWith('var') ? p : `var(${p})` };
+  // color
+  ['bg-inherit', { 'background-color': 'inherit' }],
+  ['bg-transparent', { 'background-color': 'transparent' }],
+  ['bg-current', { 'background-color': 'currentColor' }],
+
+  // arbitrary color
+  [/^bg-\[(--.+)]$/, ([, p]) => ({ 'background-color': `var(${p})` })],
+  [/^bg-\[(var\(--.+\))]$/, ([, p]) => ({ 'background-color': p })],
+
+  // arbitrary image
+  [/^bg-\[(url\(.+\))]$/, ([, p]) => {
+    // Extract potential css variable from url: url(var(--a-background-image-url)) -> var(--a-background-image-url)
+    const cssVar = p.match(/^url\((var\([^)]+\))\)$/)?.[1];
+    return { 'background-image': cssVar ?? p };
   }],
 ];

src/_rules/border.js

@@ -31,3 +31,3 @@ import { escapeSelector } from '@unocss/core';
   [
-    /^border(-[lrtbxy])?-\[(\d+)]$/,
+    /^border(-[lrtbxy])?-\[(\d+)(rem|px|%)?]$/,
     handleArbitraryBorderWidth,
@@ -42,3 +42,3 @@ { autocomplete: ['border-[<num>]', 'border-<directions>-[<num>]'] },
   [/^border-current$/, () => ({ 'border-color': 'currentColor' })],
-  [/^border(-[lrtbxy])?-\[(\D.*)]$/, handleArbitraryBorderColor],
+  [/^border(-[lrtbxy])?-\[((?:var|--).*)]$/, handleArbitraryBorderColor],
 
@@ -58,5 +58,4 @@ // border-style
 
-function handleArbitraryBorderWidth([, dir = '', width]) {
-  //TODO: Use the usePixels flag to determine which unit to use
-  return directionMap[dir.substring(1)]?.map((i) => [`border${i}-width`, `${width}px`]);
+function handleArbitraryBorderWidth([, dir = '', value, unit], context) {
+  return directionMap[dir.substring(1)]?.map((i) => [`border${i}-width`, resolveArbitraryValues(value, unit, context)]);
 }
@@ -86,3 +85,3 @@
   // arbitrary border-color
-  [/^divide(-[xy])?-\[(.+)]$/, handleArbitraryDivideColor],
+  [/^divide(-[xy])?-\[((?:var|--).+)]$/, handleArbitraryDivideColor],
 ];
@@ -89,0 +88,0 @@

src/_rules/color.js

@@ -15,9 +15,4 @@ export const opacity = [
   ['text-current', { 'color': 'currentColor' }],
-  [/^text-\[(.+)]/, ([, p]) => ({ 'color': p.startsWith('var') ? p : `var(${p})` })],
+  [/^text-\[(--.+)]$/, ([, p]) => ({ 'color': `var(${p})` })],
+  [/^text-\[(var\(--.+\))]$/, ([, p]) => ({ 'color': p })],
 ];
-
-export const bgColors = [
-  ['bg-inherit', { 'background-color': 'inherit' }],
-  ['bg-transparent', { 'background-color': 'transparent' }],
-  ['bg-current', { 'background-color': 'currentColor' }],
-];

src/_rules/outline.js

@@ -12,3 +12,4 @@ import { lineWidth } from '#theme';
   ['outline-current', { 'outline-color': 'currentColor' }],
-  [/^outline-\[(.+)]/, ([, p]) => ({ 'outline-color': p.startsWith('var') ? p : `var(${p})` })],
+  [/^outline-\[(--.+)]$/, ([, p]) => ({ 'outline-color': `var(${p})` })],
+  [/^outline-\[(var\(--.+\))]$/, ([, p]) => ({ 'outline-color': p })],
 ];
@@ -15,0 +16,0 @@

src/_rules/typography.js

@@ -12,3 +12,3 @@ import { textMap, lineHeightMap, resolveArbitraryValues } from '#utils';
   ],
-  [/^leading-\[(.+)(rem|px)?\]/, ([, value, unit], context) => ({ 'line-height': resolveArbitraryValues(value, unit, context) })],
+  [/^leading-\[(.+)(rem|px)?]$/, ([, value, unit], context) => ({ 'line-height': resolveArbitraryValues(value, unit, context) })],
   ['tabular-nums', { 'font-family': 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif', 'font-variant-numeric': 'tabular-nums' }],
@@ -15,0 +15,0 @@ ['lining-nums', { 'font-variant-numeric': 'lining-nums' }],

src/_utils/handlers/handlers.js

 import { escapeSelector } from '@unocss/core';
-import { globalKeywords } from '../mappings.js';
-import { numberRE, numberWithUnitRE, unitOnlyRE } from './regex.js';
+import { numberRE, numberWithUnitRE, unitOnlyRE, globalKeywords } from '#utils';
+
 // Not all, but covers most high frequency attributes
@@ -5,0 +5,0 @@ const cssProps = [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

208911

increased by0.13%

Worsened metrics

Lines of code

5560

decreased by-0.02%

No dependency changes