feat: refactor & rebuild preset

.gitignore

@@ -1,3 +1,2 @@
 .DS_Store
 node_modules/
-dist/

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Pixel Point
+Copyright (c) 2022 Pixel Point
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1 +1,19 @@
 # Pixel Point Tailwind Preset
+
+## Spacing (1st version)
+
+| Name (original) | Name (preset) | Value (original) | Value (preset) | Usage examples (original) | Usage examples (preset) |
+| --------------- | ------------- | ---------------- | -------------- | ------------------------- | ----------------------- |
+| 0.5             | 2             | 0.125rem         | 2px            | m-0.5, p-0.5              | m-2, p-2                |
+| 1               | 4             | 0.25rem          | 4px            | m-1, p-1                  | m-4, p-4                |
+| 1.5             | 6             | 0.375rem         | 6px            | m-1.5, p-1.5              | m-6, p-6                |
+| 2               | 8             | 0.5rem           | 8px            | m-2, p-2                  | m-8, p-8                |
+
+## Spacing (2nd version)
+
+| Name (original / preset) | Value (original / preset) | Usage examples (original / preset) |
+| ------------------------ | ------------------------- | ---------------------------------- |
+| 0.5 / 2                  | 0.125rem / 2px            | mt-0.5 / mt-2                      |
+| 1 / 4                    | 0.25rem / 4px             | mt-1 / mt-4                        |
+| 1.5 / 6                  | 0.375rem / 6px            | mt-1.5 / mt-6                      |
+| 2 / 8                    | 0.5rem / 8px              | mt-2 / mt-8                        |

src/index.js → index.js

@@ -1,12 +1,10 @@
-const { spacing, borderRadius, borderWidth, zIndex } = require('./generate-values');
-
 const BREAKPOINTS = {
   '2xl': { min: '1920px', max: '1919px' },
   xl: { min: '1536px', max: '1535px' },
   lg: { min: '1280px', max: '1279px' },
   md: { min: '1024px', max: '1023px' },
   sm: { min: '768px', max: '767px' },
-  xs: { min: '360px', max: '360px' },
+  xs: { min: '360px', max: '359px' },
 };
 
 // Default Tailwind config can be checked out here — https://unpkg.com/browse/tailwindcss@3.0.18/stubs/defaultConfig.stub.js
@@ -38,69 +36,60 @@ module.exports = {
       transparent: colors.transparent,
     }),
     spacing: {
-      0: '0px',
       px: '1px',
-      ...spacing,
+      0: '0px',
+      2: '2px',
+      4: '4px',
+      6: '6px',
+      8: '8px',
+      10: '10px',
+      12: '12px',
+      14: '14px',
+      16: '16px',
+      20: '20px',
+      24: '24px',
+      28: '28px',
+      32: '32px',
+      36: '36px',
+      40: '40px',
+      44: '44px',
+      48: '48px',
+      56: '56px',
+      64: '64px',
+      80: '80px',
+      96: '96px',
+      112: '112px',
+      128: '128px',
+      144: '144px',
+      160: '160px',
+      176: '176px',
+      192: '192px',
+      208: '208px',
+      224: '224px',
+      240: '240px',
+      256: '256px',
+      288: '288px',
+      320: '320px',
+      384: '384px',
     },
     borderRadius: {
       none: '0px',
+      sm: '2px',
+      DEFAULT: '4px',
+      md: '6px',
+      lg: '8px',
+      xl: '12px',
+      '2xl': '16px',
+      '3xl': '24px',
       full: '9999px',
-      ...borderRadius,
-    },
-    borderWidth: {
-      DEFAULT: '1px',
-      0: '0px',
-      1: '1px',
-      3: '3px',
-      ...borderWidth,
-    },
-    minWidth: {
-      0: '0px',
-      full: '100%',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-      ...spacing,
-    },
-    maxWidth: {
-      none: 'none',
-      0: '0px',
-      full: '100%',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-      prose: '65ch',
-      ...spacing,
-    },
-    minHeight: {
-      0: '0px',
-      full: '100%',
-      screen: '100vh',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-      ...spacing,
-    },
-    maxHeight: {
-      full: '100%',
-      screen: '100vh',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-      ...spacing,
     },
     letterSpacing: {
-      '-5%': '-0.05em',
-      '-4%': '-0.04em',
-      '-3%': '-0.03em',
-      '-2%': '-0.02em',
-      '-1%': '-0.01em',
       none: '0em',
-      '1%': '0.01em',
-      '2%': '0.02em',
-      '3%': '0.03em',
-      '4%': '0.04em',
-      '5%': '0.05em',
+      0.01: '0.01em',
+      0.02: '0.02em',
+      0.03: '0.03em',
+      0.04: '0.04em',
+      0.05: '0.05em',
     },
     lineHeight: {
       none: 1,
@@ -115,12 +104,5 @@ module.exports = {
       1.9: 1.9,
       2: 2,
     },
-    zIndex: {
-      '-1': -1,
-      auto: 'auto',
-      0: 0,
-      ...zIndex,
-    },
   },
-  plugins: [require('tailwindcss-safe-area')],
 };