@warp-ds/uno - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0-next.1

package.json

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

src/_rules/background.js

@@ -41,3 +41,3 @@ import { positionMap, globalKeywords, makeGlobalStaticRules } from '#utils';
   //arbitrary
-  [/^bg-\[(.+)\]/, ([, p]) => {
+  [/^bg-\[(.+)]/, ([, p]) => {
     if (p.startsWith('url')) {
@@ -47,7 +47,5 @@ // Process url(var(--something)) and extract the var itself -> --something
       return { 'background-image': urlAsVar ? `var(${urlAsVar})` : p };
-    } else if (p.startsWith('var')) {
-      return { 'background-color': p };
     }
-    return { 'background-color': `var(${p})` };
+    return { 'background-color': p.startsWith('var') ? p : `var(${p})` };
   }],
 ];

src/_rules/border.js

@@ -19,3 +19,20 @@ import { escapeSelector } from '@unocss/core';
 export const borders = [
-  [/^border$/, handlerBorder],
+  // border-width
+  [
+    /^border(-[lrtbxy])?$/,
+    handleBorderWidth,
+    { autocomplete: ['border', 'border-<directions>'] },
+  ],
+  [
+    /^border(-[lrtbxy])?-(\d+)$/,
+    handleBorderWidth,
+    { autocomplete: [`border-(${Object.keys(lineWidth).join('|')})`, `border-<directions>-(${Object.keys(lineWidth).join('|')})`] },
+  ],
+  [
+    /^border(-[lrtbxy])?-\[(\d+)]$/,
+    handleArbitraryBorderWidth,
+    { autocomplete: ['border-[<num>]', 'border-<directions>-[<num>]'] },
+  ],
+
+  // border-color
   [/^border-transparent$/, () => ({ 'border-color': 'transparent' })],
@@ -25,75 +42,76 @@ [/^border-inverted$/, () => ({ 'border-color': 'var(--w-s-border-inverted)' })],
   [/^border-current$/, () => ({ 'border-color': 'currentColor' })],
-  [/^border()-(\d+)$/, handlerBorder, { autocomplete: "(border)-<directions>" }],
-  [/^border-([lrtbxy])$/, handlerBorder],
-  [/^border-([lrtbxy])-(\d+)$/, handlerBorder],
-  [/^border()-(.+)$/, handlerBorderStyle, { autocomplete: "(border)-style" }],
-  [/^border-([lrtbxy])-(.+)$/, handlerBorderStyle],
+  [/^border(-[lrtbxy])?-\[(\D.*)]$/, handleArbitraryBorderColor],
+
+  // border-style
   [
-    /^border-([lrtb])?-?\[(\d+)\]$/,
-    handlerArbitraryBorderSize,
-    {
-      autocomplete: [
-        'border-<directions>-[$width]',
-      ],
-    },
+    new RegExp(`^border(-[lrtbxy])?-(${borderStyles.join('|')})$`),
+    handleBorderStyle,
+    { autocomplete: [`border-(${borderStyles.join('|')})`, `border-<directions>-(${borderStyles.join('|')})`] },
   ],
-  // divide
-  [/^divide-([xy])-(\d+)$/, handlerDivideBorder, { autocomplete: `divide-<x|y>-(${Object.keys(lineWidth).join('|')})-(reverse)` }],
-  [/^divide-([xy])$/, handlerDivideBorder],
-  [/^divide-([xy])-reverse$/, ([, d]) => ({ [`--w-divide-${d}-reverse`]: 1 })],
 ];
 
-function handlerBorder(m, ctx) {
-  const borderSizes = handlerBorderSize(m, ctx);
-
-  if (borderSizes ) return [...borderSizes];
+function handleBorderWidth([, dir = '', width], { theme }) {
+  const applicableWidth = theme.lineWidth?.[width ?? 1];
+  if (applicableWidth) return directionMap[dir.substring(1)]?.map((i) => [`border${i}-width`, applicableWidth]);
 }
 
-function handlerBorderSize([, a = "", b], { theme }) {
-  const v = theme.lineWidth?.[b ?? 1];
-  if (a in directionMap && v != null) return directionMap[a].map((i) => [`border${i}-width`, v]);
+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 handlerArbitraryBorderSize([, a, v]) {
-  if (a in directionMap && v != null) return directionMap[a].map((i) => [`border${i}-width`, `${v}px`]);
-
-  return [[`border-width`, `${v}px`]];
+function handleArbitraryBorderColor([, dir = '', val]) {
+  const cssvar = val.startsWith('var') ? val : `var(${val})`;
+  return directionMap[dir.substring(1)]?.map((i) => [`border${i}-color`, cssvar]);
 }
 
-function handlerBorderStyle([, a = "", s]) {
-  if (borderStyles.includes(s) && a in directionMap) return directionMap[a].map((i) => [`border${i}-style`, s]);
+function handleBorderStyle([, dir = '', style]) {
+  return directionMap[dir.substring(1)]?.map((i) => [`border${i}-style`, style]);
 }
 
-export const rounded = [
-  [/^rounded()(?:-(.+))?$/, handlerRounded, { autocomplete: ['(rounded)', '(rounded)-<num>'] }],
-  [/^rounded-([rltb]+)(?:-(.+))?$/, handlerRounded],
-  [/^rounded-([bi][se])(?:-(.+))?$/, handlerRounded],
-  [/^rounded-([bi][se]-[bi][se])(?:-(.+))?$/, handlerRounded],
+export const divide = [
+  // border-width
+  [/^divide-([xy])$/, handleDivideBorder, { autocomplete: 'divide-(x|y)' }],
+  [
+    /^divide-([xy])-(\d+)(-reverse)?$/,
+    handleDivideBorder,
+    { autocomplete: [`divide-(x|y)-(${Object.keys(lineWidth).join('|')})`, `divide-(x|y)-(${Object.keys(lineWidth).join('|')})-reverse`] },
+  ],
+
+  // reverse order
+  [/^divide-([xy])-reverse$/, ([, d]) => ({ [`--w-divide-${d}-reverse`]: 1 })],
+
+  // arbitrary border-color
+  [/^divide(-[xy])?-\[(.+)]$/, handleArbitraryDivideColor],
 ];
 
-function handlerRounded([, a = '', s], { theme }) {
-  const v = theme.borderRadius?.[s ?? 4];
-  if (a in cornerMap && v != null) return cornerMap[a].map(i => [`border${i}-radius`, v]);
-}
-
-function handleDivideBorderSizes(direction, width, reverse, theme) {
-  const borderWidth = theme.lineWidth?.[width ?? 1];
-  if (direction in directionMap && borderWidth) {
-    return directionMap[direction].map((i) => {
-      if (i === directionMap[direction][1]) {
-        return `border${i}-width:calc(${borderWidth} * var(--w-divide-${direction}-reverse))`;
-      }
-      return `border${i}-width:calc(${borderWidth} * calc(1 - var(--w-divide-${direction}-reverse)))`;
+function handleDivideBorder([_selector, dir, width, reverse], { theme }) {
+  const applicableWidth = theme.lineWidth?.[width ?? 1];
+  if (applicableWidth) {
+    const sizes = directionMap[dir]?.map((i) => {
+      const reverseVar = `var(--w-divide-${dir}-reverse)`;
+      const reverseCalc = (i === directionMap[dir][1]) ? reverseVar : `calc(1 - ${reverseVar})`;
+      return `border${i}-width:calc(${applicableWidth} * ${reverseCalc})`;
     });
+    if (sizes) {
+      return `.${escapeSelector(_selector)}>*+*{--w-divide-${dir}-reverse:${reverse ? 1 : 0};${sizes.join(';')};}`;
+    }
   }
 }
 
-function handlerDivideBorder([_selector, direction = "", width, reverse], { theme }) {
-  const sizes = handleDivideBorderSizes(direction, width, reverse, theme)?.join(';');
-  const defaultReverse = `--w-divide-${direction}-reverse:0`;
-  if (sizes) {
-    const selector = escapeSelector(_selector);
-    return `.${selector}>*+*{${defaultReverse};${sizes}}`;
-  }
+function handleArbitraryDivideColor([_selector, dir = '', val]) {
+  const cssRules = directionMap[dir.substring(1)]?.map((i) => `border${i}-color: ${val.startsWith('var') ? val : `var(${val})`}`);
+  if (cssRules) return `.${escapeSelector(_selector)}>*+*{${cssRules.join(';')};}`;
 }
 
+export const rounded = [
+  [/^rounded()(?:-(.+))?$/, handleRounded, { autocomplete: ['rounded', 'rounded-<num>'] }],
+  [/^rounded-([rltb]+)(?:-(.+))?$/, handleRounded],
+  [/^rounded-([bi][se])(?:-(.+))?$/, handleRounded],
+  [/^rounded-([bi][se]-[bi][se])(?:-(.+))?$/, handleRounded],
+];
+
+function handleRounded([, corner = '', val], { theme }) {
+  const applicableRadius = theme.borderRadius?.[val ?? 4];
+  if (applicableRadius) return cornerMap[corner].map(i => [`border${i}-radius`, applicableRadius]);
+}

src/_rules/color.js

@@ -15,2 +15,3 @@ export const opacity = [
   ['text-current', { 'color': 'currentColor' }],
+  [/^text-\[(.+)]/, ([, p]) => ({ 'color': p.startsWith('var') ? p : `var(${p})` })],
 ];
@@ -17,0 +18,0 @@

src/_rules/focus-ring.js

 import { entriesToCss, escapeSelector } from '@unocss/core';
 
-// TODO: use actual variables and values when those has been defined
+// TODO: Remove deprecated fallback (--w-s-color-focused) in v2
 const focusRingStyle = entriesToCss(Object.entries({
@@ -5,0 +5,0 @@ outline: '2px solid var(--w-s-color-border-focused, var(--w-s-color-focused))',

src/_rules/outline.js

@@ -8,2 +8,9 @@ import { lineWidth } from '#theme';
 
+export const outlineColors = [
+  ['outline-inherit', { 'outline-color': 'inherit' }],
+  ['outline-transparent', { 'outline-color': 'transparent' }],
+  ['outline-current', { 'outline-color': 'currentColor' }],
+  [/^outline-\[(.+)]/, ([, p]) => ({ 'outline-color': p.startsWith('var') ? p : `var(${p})` })],
+];
+
 export const outlineStyle = [
@@ -10,0 +17,0 @@ ["outline-none", { ...outlineNone }],

src/_rules/semantic.js

 import { directionMap, handler as h } from '#utils';
+import { escapeSelector } from "@unocss/core";
 
@@ -20,2 +21,4 @@ export const semanticRules = [
   [/^s-outline-(.+)$/, ([, cssvar]) => ({ 'outline-color': h.semanticToken(`border-${cssvar}`) })],
+  [/^s-divide$/, ([_selector]) => `.${escapeSelector(_selector)}>*+*{border-color: ${h.semanticToken('border')};}`],
+  [/^s-divide-(.+)$/, ([_selector, cssvar]) => `.${escapeSelector(_selector)}>*+*{border-color: ${h.semanticToken(`border-${cssvar}`)};}`],
 ];

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

200203

increased by1.38%

Lines of code

5262

increased by0.94%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes