@warp-ds/uno - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

checkFabricClasses.js

 import { createGenerator } from '@unocss/core'
-import presetEngine from './src/index.js'
+import presetEngine from '#plugin'
 import { buildList } from '@warp-ds/fabric-parity-checker'
@@ -4,0 +4,0 @@

package.json

 {
   "name": "@warp-ds/uno",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
@@ -15,2 +15,3 @@ "exports": {
     "#variants": "./src/_variants/index.js",
+    "#preflights": "./src/_preflights/index.js",
     "#bounding": "./src/bounding.js",
@@ -24,3 +25,3 @@ "#bounds": "./src/bounds.js"
     "@unocss/core": "^0.49.1",
-    "@warp-ds/form-preflight": "^0.0.2"
+    "@unocss/preset-mini": "^0.49.4"
   },
@@ -32,3 +33,5 @@ "devDependencies": {
     "rollup": "^3.12.0",
+    "unocss": "^0.49.4",
     "uvu": "^0.5.6",
+    "vite": "^4.1.1",
     "vitest": "^0.28.3"
@@ -38,5 +41,7 @@ },
     "dev": "node dev.js",
+    "dev:env": "vite dev-env --config ./vite.config.js",
     "test": "vitest",
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "version": "pnpm test && pnpm build && pnpm publish"
   }
 }

README.md

 # checking fabric classes
 
 1. Check out the `parity` project from warp-ds, get dependencies for the project
-2. Link to the `parity` project from the `plugin` folder (this folder): `pnpm link ../../parity`
+2. Link to the `parity` project from the `plugin` folder (this folder): `pnpm link ../parity`
 3. Run `node checkFabricClasses.js`

src/_rules/display.js

@@ -15,4 +15,14 @@ import { handler as h } from '#utils'
   ['hidden', { display: 'none' }],
+  ['inline-table', { display: 'inline-table' }],
+  ['table', { display: 'table' }],
+  ['table-caption', { display: 'table-caption' }],
+  ['table-cell', { display: 'table-cell' }],
+  ['table-column', { display: 'table-column' }],
+  ['table-column-group', { display: 'table-column-group' }],
+  ['table-footer-group', { display: 'table-footer-group' }],
+  ['table-header-group', { display: 'table-header-group' }],
+  ['table-row', { display: 'table-row' }],
+  ['table-row-group', { display: 'table-row-group' }],
   // unset, revert, inherit
   [/^display-(.+)$/, ([, c]) => ({ display: h.bracket.cssvar.global(c) || c })],
 ]

src/_rules/gap.js

@@ -1,3 +0,1 @@
-import { handler as h } from '#utils';
-
 const directions = {
@@ -10,3 +8,4 @@ '': '',
 const handleGap = ([, d = '', s], { theme }) => {
-    const v = theme.spacing?.[s] ?? h.bracket.cssvar.global.rem(s);
+    const v = theme.spacing?.[s];
+
     if (v != null) {
@@ -20,5 +19,4 @@ return {
 export const gap = [
-    [/^gap-?()(\d+)$/, handleGap, { autocomplete: ['gap-$spacing', 'gap-<num>'] }],
-    [/^gap-([xy])-?(\d+)$/, handleGap, { autocomplete: ['gap-(x|y)-$spacing', 'gap-(x|y)-<num>'] }],
+    [/^gap-?()(\d+)$/, handleGap, { autocomplete: ['gap-$spacing'] }],
+    [/^gap-([xy])-?(\d+)$/, handleGap, { autocomplete: ['gap-(x|y)-$spacing'] }],
 ];
-

src/_rules/grid.js

@@ -16,3 +16,4 @@ import { handler as h } from '#utils';
 
-const numericHandler = { handler: (d) => h.number(d) }
+const numericHandler = { handler: (d) => h.number.auto(d) }
+const numericOrAutoHandler = { handler: (d) => h.number.auto(d) }
 
@@ -44,31 +45,31 @@ export const grid = [
   [
-    /^row-start-(\d+)$/,
+    /^row-start-(.+)$/,
     bounded(
-      ([, d]) => ({ 'grid-row-start': h.number(d) }),
+      ([, d]) => ({ 'grid-row-start': h.number.auto(d) }),
       bounds.gridRow,
-      numericHandler
+      numericOrAutoHandler
     )
   ],
   [
-    /^col-start-(\d+)$/,
+    /^col-start-(.+)$/,
     bounded(
-      ([, d]) => ({ 'grid-column-start': h.number(d) }),
+      ([, d]) => ({ 'grid-column-start': h.number.auto(d) }),
       bounds.gridCol,
-      numericHandler
+      numericOrAutoHandler
     )
   ],
   [
-    /^row-end-(\d+)$/,
+    /^row-end-(.+)$/,
     bounded(
-      ([, d]) => ({ 'grid-row-end': h.number(d) }),
+      ([, d]) => ({ 'grid-row-end': h.number.auto(d) }),
       bounds.gridRow,
-      numericHandler
+      numericOrAutoHandler
     )
   ],
   [
-    /^col-end-(\d+)$/,
+    /^col-end-(.+)$/,
     bounded(
-      ([, d]) => ({ 'grid-column-end': h.number(d) }),
+      ([, d]) => ({ 'grid-column-end': h.number.auto(d) }),
       bounds.gridCol,
-      numericHandler
+      numericOrAutoHandler
     ),
@@ -75,0 +76,0 @@ { autocomplete: ['(row|col)-(start|end)-<num>'] }

src/_rules/index.js

 import * as align from "./align.js";
+import * as behaviors from "./behaviors.js";
+import * as border from "./border.js";
 import * as color from "./color.js";
 import * as display from "./display.js";
+import * as decoration from "./decoration.js";
 import * as flex from "./flex.js";
+import * as focusRing from "./focus-ring.js";
 import * as gap from "./gap.js";
@@ -13,8 +17,15 @@ import * as grid from "./grid.js";
 import * as spacing from "./spacing.js";
+import * as staticRules from "./static.js";
+import * as transform from "./transform.js";
+import * as transition from "./transition.js";
 
 const ruleGroups = {
   ...align,
+  ...behaviors,
+  ...border,
   ...color,
   ...display,
+  ...decoration,
   ...flex,
+  ...focusRing,
   ...gap,
@@ -27,3 +38,6 @@ ...grid,
   ...spaceMargin,
-  ...spacing
+  ...spacing,
+  ...staticRules,
+  ...transform,
+  ...transition
 }
@@ -36,5 +50,9 @@
 export * from "./align.js";
+export * from "./behaviors.js";
+export * from "./border.js";
 export * from "./color.js";
 export * from "./display.js";
+export * from "./decoration.js";
 export * from "./flex.js";
+export * from "./focus-ring.js";
 export * from "./gap.js";
@@ -48,1 +66,4 @@ export * from "./grid.js";
 export * from "./spacing.js";
+export * from "./static.js";
+export * from "./transform.js";
+export * from "./transition.js";

src/_rules/size.js

@@ -45,4 +45,3 @@ import { handler as h, resolveBreakpoints, resolveVerticalBreakpoints } from '#utils'
 function getAspectRatio(prop) {
-  if (/^\d+\/\d+$/.test(prop))
-  return prop;
+  if (/^\d+\/\d+$/.test(prop)) return prop;
   switch (prop) {
@@ -52,3 +51,3 @@ case 'square': return '1/1';
   }
-  return h.bracket.cssvar.global.auto.number(prop);
+  return h.global.auto.number(prop);
 }
@@ -55,0 +54,0 @@ export const aspectRatio = [

src/_rules/spacing.js

@@ -7,11 +7,11 @@ import { directionSize } from '#utils'
   // 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>' }],
+  [/^p()-(.+)$/, directionSize('padding'), { autocomplete: '(m|p)-<num>' }],
+  [/^p([xy])-(.+)$/, directionSize('padding')],
+  [/^p([rltb])-(.+)$/, directionSize('padding'), { autocomplete: '(m|p)<directions>-<num>' }],
 ]
 
 export const margin = [
-  [/^m()-(\d+)$/, directionSize('margin')],
-  [/^m([xy])-(\d+)$/, directionSize('margin')],
-  [/^m([rltb])-(\d+)$/, directionSize('margin')],
+  [/^m()-(.+)$/, directionSize('margin')],
+  [/^m([xy])-(.+)$/, directionSize('margin')],
+  [/^m([rltb])-(.+)$/, directionSize('margin')],
 ]

src/_utils/utilities.js

@@ -16,4 +16,4 @@ import { toArray, warnOnce } from '@unocss/core';
     return ([_, direction, size], { theme }) => {
-        if (!theme.spacing[size]) return warnOnce(`${propertyPrefix} not available in size ${size}`)
         const v = theme.spacing?.[size] ?? h.global.auto(size);
+        if (!v) return warnOnce(`${propertyPrefix} not available in size ${size}`)
         if (v != null) return directionMap[direction].map(i => [`${propertyPrefix}${i}`, v]);
@@ -20,0 +20,0 @@ };

src/_variants/index.js

@@ -1,8 +0,22 @@
-import { variantBreakpoints } from './breakpoints.js'
-import { variantImportant } from './important.js'
-import { variantNegative } from './negative.js'
-import { variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo.js'
+import {
+  variantBreakpoints,
+  variantImportant,
+  variantNegative,
+  variantTaggedPseudoClasses,
+  variantPseudoClassFunctions,
+  variantPseudoClassesAndElements,
+} from '@unocss/preset-mini/variants'
 import { variantSpaceAndDivide } from './spaceAndDivide.js'
 
 export const variants = [
+  variantBreakpoints(),
+  variantImportant(),
+  variantNegative,
+  variantPseudoClassFunctions(),
+  variantPseudoClassesAndElements(),
+  variantSpaceAndDivide,
+  ...variantTaggedPseudoClasses({ attributifyPseudo: false }),
+]
+
+export {
   variantBreakpoints,
@@ -14,9 +28,3 @@ variantImportant,
   variantSpaceAndDivide,
-  ...variantTaggedPseudoClasses,
-]
-
-export * from './breakpoints.js'
-export * from './important.js'
-export * from './negative.js'
-export * from './pseudo.js'
-export * from './spaceAndDivide.js'
+  variantTaggedPseudoClasses
+}

src/_variants/spaceAndDivide.js

@@ -0,10 +1,11 @@
+// this lives in preset-wind and isn't explicitly exported
+
 export const variantSpaceAndDivide = (matcher) => {
-  if (/^space-?([xy])-?(-?.+)$/.test(matcher) || matcher.startsWith('divide-')) {
+  if (matcher.startsWith('_')) return
+  if (/^space-?([xy])-?(-?.+)$/.test(matcher) || /divide-/.test(matcher)) {
     return {
       matcher,
-      selector: (input) => {
-        return `${input}>:not([hidden])~:not([hidden])`
-      },
+      selector: (input) => `${input}>:not([hidden])~:not([hidden])`
     }
   }
 }

src/bounding.js

 import { warnOnce } from '@unocss/core'
 
-const inBounds = (v, bounds) => v >= bounds[0] && v <= bounds[1]
+const inBounds = (v, bounds) => {
+  if (Number.isNaN(Number(v))) return true
+  return v >= bounds[0] && v <= bounds[1]
+}
 const notAvailable = (className, value) => `${className} is not available - this error message needs improvement`
@@ -10,3 +13,3 @@
 export const bounded = (cb, bounds, options = {}) => ([_, d]) => {
-  const val = options.handler?.(d) ?? d
+  const val = options.handler?.(d)
   if (options.nullable && !d) return cb([_, d])
@@ -13,0 +16,0 @@ if (!inBounds(val, bounds)) return warnOnce(notAvailable(_, d))

src/internals.js

@@ -1,5 +0,5 @@
-export * from '#theme'
-export * from '#rules'
-export * from '#variants'
+export { theme } from '#theme'
+export { rules } from '#rules'
+export { variants } from '#variants'
 export * as bounds from '#bounds'
 

src/plugin.js

@@ -1,3 +0,2 @@
-import { formPreflight } from '@warp-ds/form-preflight'
-import { twReset } from './_preflights/tw-reset.js'
+import { preflights } from '#preflights'
 import { rules } from '#rules'
@@ -21,3 +20,3 @@ import { variants } from '#variants'
   const mode = options.mode ?? 'app'
-  const hasPreflight = includePreflight.includes(mode)
+  const hasPreflight = options.usePreflight ?? includePreflight.includes(mode)
   const theme = useTheme(options)
@@ -29,3 +28,3 @@ return {
     variants,
-    preflights: hasPreflight ? [twReset, formPreflight] : []
+    preflights: hasPreflight ? preflights : []
   }
@@ -32,0 +31,0 @@ }

src/theme.js

@@ -27,2 +27,23 @@ const breakpoints = {
 
+const lineWidth = {
+  0: "0",
+  1: "1px",
+  2: "2px",
+  4: "4px",
+  8: "8px",
+}
+
+const borderRadius = {
+  0: "0",
+  2: "2px",
+  4: "4px",
+  6: "6px",
+  8: "8px",
+  16: "16px",
+  "full": "9999px",
+}
+
+export const durationBase = [75, 100, 150, 200, 300, 500, 700, 1000]
+const duration = durationBase.reduce((acc, e) => (acc[e] = `${e}ms`, acc), {})
+
 export const useTheme = (opts = {}) => {
@@ -32,8 +53,11 @@ const baseSpacing =  opts.usePixels ? spacingInPx : spacingInRem
   const height = { ...baseSpacing, screen: '100vh' }
+
   return {
     usingPixels: !!opts.pxSpacing,
     breakpoints,
+    borderRadius,
     verticalBreakpoints: breakpoints,
     spacing: baseSpacing,
     zIndex,
+    lineWidth,
     width,
@@ -44,4 +68,5 @@ height,
     minWidth: width,
-    minHeight: height
+    minHeight: height,
+    duration
   }
 }

test/_helpers.js

@@ -11,1 +11,10 @@ import { createGenerator } from '@unocss/core'
 }
+
+export const getFractions = (prefix, length = 6) => {
+  const numerator = Array.from({ length }).map((_, i) => i + 1)
+  const denomenator = Array.from({ length }).map((_, i) => i + 1)
+  return numerator.flatMap(n => denomenator.map(d => {
+    if (n > d) return
+    return `${prefix}-${n}/${d}`
+  })).filter(Boolean)
+}

test/size.js

@@ -1,2 +0,2 @@
-import { setup } from './_helpers.js'
+import { setup, getFractions } from './_helpers.js'
 import { spaceBase } from '#theme'
@@ -8,10 +8,2 @@ import { describe, expect, test } from 'vitest'
 const getSpecialSuffixes = (prefix) => ['full', 'fit', 'min', 'max', 'screen'].map(e => `${prefix}-${e}`)
-const getFractions = (prefix) => {
-  const numerator = Array.from({ length: 6 }).map((_, i) => i + 1)
-  const denomenator = Array.from({ length: 6 }).map((_, i) => i + 1)
-  return numerator.flatMap(n => denomenator.map(d => {
-    if (n > d) return
-    return `${prefix}-${n}/${d}`
-  })).filter(Boolean)
-}
 
@@ -18,0 +10,0 @@ describe('width and height', () => {

test/spacing.js

@@ -1,2 +0,2 @@
-import { assert, expect, test } from 'vitest'
+import { expect, test } from 'vitest'
 import { setup } from './_helpers.js'
@@ -28,3 +28,3 @@
 test('margin works', async ({ uno }) => {
-  const classes = ['m-8', 'mx-2', 'my-4', 'ml-32', 'mr-16', 'mb-8', 'mt-16', '-m-8']
+  const classes = ['m-8', 'mx-2', 'my-4', 'ml-32', 'mr-16', 'mb-8', 'mt-16', '-m-8', 'm-auto', 'ml-auto']
   const { css } = await uno.generate(classes)
@@ -35,2 +35,3 @@ expect(css).toMatchInlineSnapshot(`
     .m-8{margin:0.8rem;}
+    .m-auto{margin:auto;}
     .mx-2{margin-left:0.2rem;margin-right:0.2rem;}
@@ -40,2 +41,3 @@ .my-4{margin-top:0.4rem;margin-bottom:0.4rem;}
     .ml-32{margin-left:3.2rem;}
+    .ml-auto{margin-left:auto;}
     .mr-16{margin-right:1.6rem;}
@@ -42,0 +44,0 @@ .mt-16{margin-top:1.6rem;}"

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

218838

increased by19.06%

Number of package files

81

increased by52.83%

Worsened metrics

Dev dependency count

8

increased by33.33%

Lines of code

3750

decreased by-23.97%

Dependency changes

• + Added@unocss/preset-mini@^0.49.4

• + Added@unocss/preset-mini@0.49.8(transitive)

• - Removed@warp-ds/form-preflight@^0.0.2

• - Removed@warp-ds/form-preflight@0.0.2(transitive)