@warp-ds/uno - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dev.js

@@ -5,3 +5,3 @@ import { createGenerator } from '@unocss/core'
 const uno = createGenerator({ presets: [presetWarp()] })
-const devClasses = ['box-content', 'z-2', 'z-20', '-z-50', 'float-left', 'clear-both', 'fixed', 'relative', 'top-1', 'left-1', 'right-1', 'bottom-1', '-inset-2', 'inset-1/2', 'inset-full', 'inset-auto', 'inset-y-1', 'row-span-2', 'row-span-10000', 'gap-32', '!sm:pa-16', '-m-2', 'pa-18', '!ma-16', 'opacity-50', 'align-top', 'line-clamp-2']
+const devClasses = ['!m-16', 'opacity-50']
 const cliClasses = process.argv.slice(2)
@@ -8,0 +8,0 @@ const classes = cliClasses.length ? cliClasses : devClasses

dist/engine.js

@@ -884,3 +884,3 @@ const REGEX = {
 }
-function position(str) {
+function position$1(str) {
     if (['top', 'left', 'right', 'bottom', 'center'].includes(str))
@@ -904,3 +904,3 @@ return str;
   percent: percent,
-  position: position,
+  position: position$1,
   properties: properties,
@@ -936,2 +936,10 @@ px: px,
 }
+function resolveVerticalBreakpoints({ theme, generator }) {
+    let verticalBreakpoints;
+    if (generator.userConfig && generator.userConfig.theme)
+        verticalBreakpoints = generator.userConfig.theme.verticalBreakpoints;
+    if (!verticalBreakpoints)
+        verticalBreakpoints = theme.verticalBreakpoints;
+    return verticalBreakpoints;
+}
 function makeGlobalStaticRules(prefix, property) {
@@ -1008,2 +1016,38 @@ return globalKeywords.map(keyword => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }]);
 
+var align = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  textAligns: textAligns,
+  verticalAligns: verticalAligns
+});
+
+const opacity = [
+  [/^opacity-?(\d+)$/, ([, d]) => ({ opacity: handler.bracket.percent(d) })],
+];
+
+var color = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  opacity: opacity
+});
+
+const display = [
+  ['flex', { display: 'flex' }],
+  ['inline-flex', { display: 'inline-flex' }],
+  ['grid', { display: 'grid' }],
+  ['inline-grid', { display: 'inline-grid' }],
+  ['inline', { display: 'inline' }],
+  ['block', { display: 'block' }],
+  ['inline-block', { display: 'inline-block' }],
+  ['contents', { display: 'contents' }],
+  ['flow-root', { display: 'flow-root' }],
+  ['list-item', { display: 'list-item' }],
+  ['hidden', { display: 'none' }],
+  // unset, revert, inherit
+  [/^display-(.+)$/, ([, c]) => ({ display: handler.bracket.cssvar.global(c) || c })],
+];
+
+var display$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  display: display
+});
+
 const inBounds = (v, bounds) => v >= bounds[0] && v <= bounds[1];
@@ -1082,2 +1126,32 @@ const notAvailable = (className, value) => `${className} is not available - this error message needs improvement`;
 
+var flex$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  flex: flex
+});
+
+const directions = {
+    '': '',
+    'x': 'column-',
+    'y': 'row-',
+};
+
+const handleGap = ([, d = '', s], { theme }) => {
+    const v = theme.spacing?.[s] ?? handler.bracket.cssvar.global.rem(s);
+    if (v != null) {
+        return {
+            [`${directions[d]}gap`]: v,
+        };
+    }
+};
+
+const gap = [
+    [/^gap-?()(\d+)$/, handleGap, { autocomplete: ['gap-$spacing', 'gap-<num>'] }],
+    [/^gap-([xy])-?(\d+)$/, handleGap, { autocomplete: ['gap-(x|y)-$spacing', 'gap-(x|y)-<num>'] }],
+];
+
+var gap$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  gap: gap
+});
+
 const autoDirection = (prop) => {
@@ -1187,22 +1261,32 @@ switch (prop) {
 
-const opacity = [
-  [/^opacity-?(\d+)$/, ([, d]) => ({ opacity: handler.bracket.percent(d) })],
-];
+var grid$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  grid: grid
+});
 
-const display = [
-  ['flex', { display: 'flex' }],
-  ['inline-flex', { display: 'inline-flex' }],
-  ['grid', { display: 'grid' }],
-  ['inline-grid', { display: 'inline-grid' }],
-  ['inline', { display: 'inline' }],
-  ['block', { display: 'block' }],
-  ['inline-block', { display: 'inline-block' }],
-  ['contents', { display: 'contents' }],
-  ['flow-root', { display: 'flow-root' }],
-  ['list-item', { display: 'list-item' }],
-  ['hidden', { display: 'none' }],
-  // unset, revert, inherit
-  [/^display-(.+)$/, ([, c]) => ({ display: handler.bracket.cssvar.global(c) || c })],
+const overflowValues = ["auto", "hidden", "visible", "scroll"];
+
+const overflows = [
+  [
+    /^overflow-(.+)$/,
+    ([, v]) => (overflowValues.includes(v) ? { overflow: v } : undefined),
+    {
+      autocomplete: [
+        `overflow-(${overflowValues.join("|")})`,
+        `overflow-(x|y)-(${overflowValues.join("|")})`,
+      ],
+    },
+  ],
+  [
+    /^(?:overflow)-([xy])-(.+)$/,
+    ([, d, v]) =>
+      overflowValues.includes(v) ? { [`overflow-${d}`]: v } : undefined,
+  ],
 ];
 
+var layout = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  overflows: overflows
+});
+
 // TODO: can we get rid of box-orient and webkit-box?
@@ -1220,37 +1304,7 @@ // seems like they might be supporting _very_ old browsers and are marked deprecated
 
-// negatives come in via the negative variant
-// bounding is done via the directionSize function
-const padding = [
-  // empty capture group here sets an empty string for 'direction' instead of undefined
-  [/^p()-(\d+)$/, directionSize('padding'), { autocomplete: '(m|p)-<num>' }],
-  [/^p([xy])-(\d+)$/, directionSize('padding')],
-  [/^p([rltb])-(\d+)$/, directionSize('padding'), { autocomplete: '(m|p)<directions>-<num>' }],
-];
+var lineClamp$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  lineClamp: lineClamp
+});
 
-const margin = [
-  [/^m()-(\d+)$/, directionSize('margin')],
-  [/^m([xy])-(\d+)$/, directionSize('margin')],
-  [/^m([rltb])-(\d+)$/, directionSize('margin')],
-];
-
-const directions = {
-    '': '',
-    'x': 'column-',
-    'y': 'row-',
-};
-
-const handleGap = ([, d = '', s], { theme }) => {
-    const v = theme.spacing?.[s] ?? handler.bracket.cssvar.global.rem(s);
-    if (v != null) {
-        return {
-            [`${directions[d]}gap`]: v,
-        };
-    }
-};
-
-const gap = [
-    [/^gap-?()(\d+)$/, handleGap, { autocomplete: ['gap-$spacing', 'gap-<num>'] }],
-    [/^gap-([xy])-?(\d+)$/, handleGap, { autocomplete: ['gap-(x|y)-$spacing', 'gap-(x|y)-<num>'] }],
-];
-
 const positions = [
@@ -1410,20 +1464,144 @@ [/^(static|fixed|absolute|relative|sticky)$/, ([, v]) => ({ position: v })],
 
+var position = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  alignments: alignments,
+  boxSizing: boxSizing,
+  floats: floats,
+  insets: insets,
+  justifies: justifies,
+  orders: orders,
+  placements: placements,
+  positions: positions,
+  zIndexes: zIndexes
+});
+
+const sizeMapping = { h: 'height', w: 'width', };
+const getPropName = (minmax, hw) => `${minmax || ''}${sizeMapping[hw]}`;
+
+function getSizeValue(minmax, hw, theme, prop) {
+  const str = getPropName(minmax, hw).replace(/-(\w)/g, (_, p) => p.toUpperCase());
+  const v = theme[str]?.[prop];
+  if (v != null) return v;
+  switch (prop) {
+    case 'fit':
+    case 'max':
+    case 'min':
+      return `${prop}-content`;
+    case 'prose': return '65ch';
+  }
+  return handler.global.auto.fraction(prop);
+}
+
+const sizes = [
+  [
+    /^(min-|max-)?([wh])-?(.+)$/,
+    ([, minmax, wOrH, s], { theme }) => ({ [getPropName(minmax, wOrH)]: getSizeValue(minmax, wOrH, theme, s) }),
+    {
+      autocomplete: [
+        '(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight',
+        '(max|min)-(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight',
+      ]
+    }
+  ],
+  [/^(min-|max-)?(h)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveVerticalBreakpoints(context)?.[s] })],
+  [/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveBreakpoints(context)?.[s] }), {
+    autocomplete: [
+      '(w|h)-screen',
+      '(min|max)-(w|h)-screen',
+      'h-screen-$verticalBreakpoints',
+      '(min|max)-h-screen-$verticalBreakpoints',
+      'w-screen-$breakpoints',
+      '(min|max)-w-screen-$breakpoints',
+    ],
+  }],
+];
+
+function getAspectRatio(prop) {
+  if (/^\d+\/\d+$/.test(prop))
+  return prop;
+  switch (prop) {
+    case 'square': return '1/1';
+    case 'video': return '16/9';
+  }
+  return handler.bracket.cssvar.global.auto.number(prop);
+}
+const aspectRatio = [
+  [/^aspect-(?:ratio-)?(.+)$/, ([, d]) => ({ 'aspect-ratio': getAspectRatio(d) }), { autocomplete: ['aspect-(square|video|ratio)', 'aspect-ratio-(square|video)'] }],
+];
+
+var size = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  aspectRatio: aspectRatio,
+  sizes: sizes
+});
+
+const spaceMargins = [
+  [/^space-([xy])-(\d+)$/, handlerSpace, { autocomplete: ['space-(x|y)', 'space-(x|y)-reverse', 'space-(x|y)-$spacing'] }],
+  [/^space-([xy])$/, handlerSpace],
+  [/^space-([xy])-reverse$/, ([, d]) => ({ [`--w-space-${d}-reverse`]: 1 })],
+];
+
+function handlerSpace([, d, s = 1], { theme }) {
+  const v = theme.spacing?.[s];
+  if (v != null) {
+    const results = directionMap[d].map((item) => {
+      const key = `margin${item}`;
+      const value = item.endsWith('right') || item.endsWith('bottom')
+        ? `calc(${v} * var(--w-space-${d}-reverse))`
+        : `calc(${v} * calc(1 - var(--w-space-${d}-reverse)))`;
+      return [key, value]
+    });
+
+    if (results) {
+      return [
+        [`--w-space-${d}-reverse`, 0],
+        ...results,
+      ]
+    }
+  }
+}
+
+var spaceMargin = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  spaceMargins: spaceMargins
+});
+
+// negatives come in via the negative variant
+// bounding is done via the directionSize function
+const padding = [
+  // empty capture group here sets an empty string for 'direction' instead of undefined
+  [/^p()-(\d+)$/, directionSize('padding'), { autocomplete: '(m|p)-<num>' }],
+  [/^p([xy])-(\d+)$/, directionSize('padding')],
+  [/^p([rltb])-(\d+)$/, directionSize('padding'), { autocomplete: '(m|p)<directions>-<num>' }],
+];
+
+const margin = [
+  [/^m()-(\d+)$/, directionSize('margin')],
+  [/^m([xy])-(\d+)$/, directionSize('margin')],
+  [/^m([rltb])-(\d+)$/, directionSize('margin')],
+];
+
+var spacing = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  margin: margin,
+  padding: padding
+});
+
+const ruleGroups = {
+  ...align,
+  ...color,
+  ...display$1,
+  ...flex$1,
+  ...gap$1,
+  ...grid$1,
+  ...layout,
+  ...lineClamp$1,
+  ...position,
+  ...size,
+  ...spaceMargin,
+  ...spacing
+};
+
 const rules = [
-  verticalAligns, textAligns,
-  flex,
-  grid,
-  opacity,
-  display,
-  lineClamp,
-  gap,
-  padding, margin,
-  positions,
-  orders,
-  justifies,
-  alignments,
-  placements,
-  insets,
-  floats,
-  zIndexes,
-  boxSizing
+  ...Object.values(ruleGroups)
 ].flat(1);
@@ -1750,2 +1928,13 @@
 
+const variantSpaceAndDivide = (matcher) => {
+  if (/^space-?([xy])-?(-?.+)$/.test(matcher) || matcher.startsWith('divide-')) {
+    return {
+      matcher,
+      selector: (input) => {
+        return `${input}>:not([hidden])~:not([hidden])`
+      },
+    }
+  }
+};
+
 const variants = [
@@ -1757,2 +1946,3 @@ variantBreakpoints,
   variantPseudoClassesAndElements,
+  variantSpaceAndDivide,
   ...variantTaggedPseudoClasses,
@@ -1787,8 +1977,20 @@ ];
 
-const useTheme = (opts = {}) => ({
-  usingPixels: !!opts.pxSpacing,
-  breakpoints,
-  spacing: opts.usePixels ? spacingInPx : spacingInRem,
-  zIndex
-});
+const useTheme = (opts = {}) => {
+  const baseSpacing =  opts.usePixels ? spacingInPx : spacingInRem;
+  const width = { ...baseSpacing, screen: '100vw' };
+  const height = { ...baseSpacing, screen: '100vh' };
+  return {
+    usingPixels: !!opts.pxSpacing,
+    breakpoints,
+    verticalBreakpoints: breakpoints,
+    spacing: baseSpacing,
+    zIndex,
+    width,
+    height,
+    maxWidth: { none: 'none', ...width },
+    maxHeight: height,
+    minWidth: width,
+    minHeight: height
+  }
+};
 
@@ -1795,0 +1997,0 @@ const includePreflight = ['base', 'hyper'];

package.json

 {
   "name": "@warp-ds/uno",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
@@ -5,0 +5,0 @@ "exports": {

src/_rules/index.js

@@ -1,38 +0,44 @@
-import { verticalAligns, textAligns } from './align.js'
-import { flex } from './flex.js'
-import { grid } from './grid.js'
-import { opacity } from './color.js'
-import { display } from './display.js'
-import { lineClamp } from './line-clamp.js'
-import { padding, margin } from './spacing.js'
-import { gap } from './gap.js'
-import { positions, orders, justifies, alignments, placements, insets, floats, zIndexes, boxSizing } from "./position.js"
+import * as align from "./align.js";
+import * as color from "./color.js";
+import * as display from "./display.js";
+import * as flex from "./flex.js";
+import * as gap from "./gap.js";
+import * as grid from "./grid.js";
+import * as layout from "./layout.js";
+import * as lineClamp from "./line-clamp.js";
+import * as position from "./position.js";
+import * as size from "./size.js"
+import * as spaceMargin from './space-margin.js'
+import * as spacing from "./spacing.js";
 
+const ruleGroups = {
+  ...align,
+  ...color,
+  ...display,
+  ...flex,
+  ...gap,
+  ...grid,
+  ...layout,
+  ...lineClamp,
+  ...position,
+  ...size,
+  ...spaceMargin,
+  ...spacing
+}
+
 export const rules = [
-  verticalAligns, textAligns,
-  flex,
-  grid,
-  opacity,
-  display,
-  lineClamp,
-  gap,
-  padding, margin,
-  positions,
-  orders,
-  justifies,
-  alignments,
-  placements,
-  insets,
-  floats,
-  zIndexes,
-  boxSizing
-].flat(1)
+  ...Object.values(ruleGroups)
+].flat(1);
 
-export * from './align.js'
-export * from './flex.js'
-export * from './grid.js'
-export * from './color.js'
-export * from './display.js'
-export * from './spacing.js'
-export * from './gap.js'
-export * from "./position.js"
+export * from "./align.js";
+export * from "./color.js";
+export * from "./display.js";
+export * from "./flex.js";
+export * from "./gap.js";
+export * from "./grid.js";
+export * from "./layout.js";
+export * from "./line-clamp.js"
+export * from "./position.js";
+export * from "./size.js";
+export * from './space-margin.js'
+export * from "./spacing.js";

src/_variants/index.js

@@ -5,2 +5,3 @@ import { variantBreakpoints } from './breakpoints.js'
 import { variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo.js'
+import { variantSpaceAndDivide } from './spaceAndDivide.js'
 
@@ -13,2 +14,3 @@ export const variants = [
   variantPseudoClassesAndElements,
+  variantSpaceAndDivide,
   ...variantTaggedPseudoClasses,
@@ -20,1 +22,3 @@ ]
 export * from './negative.js'
+export * from './pseudo.js'
+export * from './spaceAndDivide.js'

src/theme.js

@@ -27,7 +27,19 @@ const breakpoints = {
 
-export const useTheme = (opts = {}) => ({
-  usingPixels: !!opts.pxSpacing,
-  breakpoints,
-  spacing: opts.usePixels ? spacingInPx : spacingInRem,
-  zIndex
-})
+export const useTheme = (opts = {}) => {
+  const baseSpacing =  opts.usePixels ? spacingInPx : spacingInRem
+  const width = { ...baseSpacing, screen: '100vw' }
+  const height = { ...baseSpacing, screen: '100vh' }
+  return {
+    usingPixels: !!opts.pxSpacing,
+    breakpoints,
+    verticalBreakpoints: breakpoints,
+    spacing: baseSpacing,
+    zIndex,
+    width,
+    height,
+    maxWidth: { none: 'none', ...width },
+    maxHeight: height,
+    minWidth: width,
+    minHeight: height
+  }
+}

test/general.js

@@ -38,6 +38,6 @@ import { rules, display } from '#rules'
     "/* layer: default */
+    .bottom-4{bottom:4px;}
     .pt-8{padding-top:8px;}
-    .-ml-32{margin-left:-32px;}
-    .bottom-4{bottom:4px;}"
+    .-ml-32{margin-left:-32px;}"
   `)
 })

No alert changes

Improved metrics

Total package byte prevSize

183835

increased by19.88%

Number of package files

53

increased by20.45%

Lines of code

4932

increased by9.26%

No dependency changes