feat: Generate both global styles and classes by default

tw-in-js · Nov 6, 2022 · edc16da · edc16da
1 parent e2c17a2
commit edc16da
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 36 deletions.
diff --git a/.changeset/unlucky-spiders-hear.md b/.changeset/unlucky-spiders-hear.md
@@ -0,0 +1,5 @@
+---
+'@twind/preset-tailwind-forms': patch
+---
+
+Generate both global styles and classes by default
diff --git a/packages/preset-tailwind-forms/src/preset-tailwind-forms.test.ts b/packages/preset-tailwind-forms/src/preset-tailwind-forms.test.ts
@@ -4,9 +4,11 @@ import { twind, virtual } from 'twind'
 import presetTailwind from '@twind/preset-tailwind'
 import presetTailwindForms from './preset-tailwind-forms'
 
-test('using default strategy (base)', () => {
+test('using default strategy (base and class)', () => {
   const tw = twind(
-    { presets: [presetTailwind({ disablePreflight: true }), presetTailwindForms()] },
+    {
+      presets: [presetTailwind({ disablePreflight: true }), presetTailwindForms()],
+    },
     virtual(),
   )
 
@@ -35,12 +37,91 @@ test('using default strategy (base)', () => {
     "[type='file']:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}",
     '.underline{text-decoration-line:underline}',
   ])
+
+  // trigger inject
+  assert.strictEqual(tw('form-input px-4 py-3 rounded-full'), 'form-input px-4 py-3 rounded-full')
+
+  assert.deepEqual(tw.target, [
+    "[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{appearance:none;background-color:#fff;border-color:rgba(107,114,128,1);border-width:1px;border-radius:0px;padding-top:0.5rem;padding-right:0.75rem;padding-bottom:0.5rem;padding-left:0.75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}",
+    "[type='text']:focus,[type='email']:focus,[type='url']:focus,[type='password']:focus,[type='number']:focus,[type='date']:focus,[type='datetime-local']:focus,[type='month']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[type='week']:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(37,99,235,1);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:rgba(37,99,235,1)}",
+    'input::placeholder,textarea::placeholder{color:rgba(107,114,128,1);opacity:1}',
+    '::-webkit-datetime-edit-fields-wrapper{padding:0}',
+    '::-webkit-date-and-time-value{min-height:1.5em}',
+    `select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgba(107%2c114%2c128%2c1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;color-adjust:exact}`,
+    '[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;color-adjust:unset}',
+    "[type='checkbox'],[type='radio']{appearance:none;padding:0;color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:rgba(37,99,235,1);background-color:#fff;border-color:rgba(107,114,128,1);border-width:1px;--tw-shadow:0 0 #0000}",
+    "[type='checkbox']:focus,[type='radio']:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(37,99,235,1);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}",
+    "[type='checkbox']:checked,[type='radio']:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}",
+    "[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{border-color:transparent;background-color:currentColor}",
+    "[type='checkbox']{border-radius:0px}",
+    `[type='checkbox']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}`,
+    `[type='checkbox']:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}`,
+    "[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}",
+    "[type='radio']{border-radius:100%}",
+    `[type='radio']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}`,
+    "[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}",
+    "[type='file']:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}",
+    '.form-input,.form-textarea,.form-select,.form-multiselect{appearance:none;background-color:#fff;border-color:rgba(107,114,128,1);border-width:1px;border-radius:0px;padding-top:0.5rem;padding-right:0.75rem;padding-bottom:0.5rem;padding-left:0.75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}',
+    '.form-input:focus,.form-textarea:focus,.form-select:focus,.form-multiselect:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(37,99,235,1);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:rgba(37,99,235,1)}',
+    '.form-input::placeholder,.form-textarea::placeholder{color:rgba(107,114,128,1);opacity:1}',
+    '.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}',
+    '.form-input::-webkit-date-and-time-value{min-height:1.5em}',
+    '.px-4{padding-left:1rem;padding-right:1rem}',
+    '.py-3{padding-top:0.75rem;padding-bottom:0.75rem}',
+    '.rounded-full{border-radius:9999px}',
+    '.underline{text-decoration-line:underline}',
+  ])
+})
+
+test('using base strategy', () => {
+  const tw = twind(
+    {
+      presets: [
+        presetTailwind({ disablePreflight: true }),
+        presetTailwindForms({ strategy: 'base' }),
+      ],
+    },
+    virtual(),
+  )
+
+  // trigger inject
+  tw('underline')
+
+  assert.deepEqual(tw.target, [
+    "[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{appearance:none;background-color:#fff;border-color:rgba(107,114,128,1);border-width:1px;border-radius:0px;padding-top:0.5rem;padding-right:0.75rem;padding-bottom:0.5rem;padding-left:0.75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}",
+    "[type='text']:focus,[type='email']:focus,[type='url']:focus,[type='password']:focus,[type='number']:focus,[type='date']:focus,[type='datetime-local']:focus,[type='month']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[type='week']:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(37,99,235,1);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:rgba(37,99,235,1)}",
+    'input::placeholder,textarea::placeholder{color:rgba(107,114,128,1);opacity:1}',
+    '::-webkit-datetime-edit-fields-wrapper{padding:0}',
+    '::-webkit-date-and-time-value{min-height:1.5em}',
+    `select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgba(107%2c114%2c128%2c1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;color-adjust:exact}`,
+    '[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;color-adjust:unset}',
+    "[type='checkbox'],[type='radio']{appearance:none;padding:0;color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:rgba(37,99,235,1);background-color:#fff;border-color:rgba(107,114,128,1);border-width:1px;--tw-shadow:0 0 #0000}",
+    "[type='checkbox']:focus,[type='radio']:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(37,99,235,1);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}",
+    "[type='checkbox']:checked,[type='radio']:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}",
+    "[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{border-color:transparent;background-color:currentColor}",
+    "[type='checkbox']{border-radius:0px}",
+    `[type='checkbox']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}`,
+    `[type='checkbox']:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}`,
+    "[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}",
+    "[type='radio']{border-radius:100%}",
+    `[type='radio']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}`,
+    "[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}",
+    "[type='file']:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}",
+    '.underline{text-decoration-line:underline}',
+  ])
+
+  // verify form- utilities are not available
+  const { length } = tw.target
+
+  assert.strictEqual(tw('form-input'), 'form-input')
+
+  assert.lengthOf(tw.target, length)
 })
 
-test('using default strategy (base) and tailwind preflight', () => {
+test('using base strategy and tailwind preflight', () => {
   const tw = twind(
     {
-      presets: [presetTailwind(), presetTailwindForms()],
+      presets: [presetTailwind(), presetTailwindForms({ strategy: 'base' })],
       preflight: { body: { color: 'theme(colors.gray.100)' } },
     },
     virtual(),

diff --git a/packages/preset-tailwind-forms/src/preset-tailwind-forms.ts b/packages/preset-tailwind-forms/src/preset-tailwind-forms.ts
@@ -19,41 +19,44 @@ export interface TailwindFormsPresetOptions {
 export default function presetTailwindForms({
   strategy,
 }: TailwindFormsPresetOptions = {}): Preset<TailwindTheme> {
-  return strategy == 'class'
-    ? {
-        rules: [
-          [
-            '(' +
-              rules
-                .map((r) => r.c)
-                .filter(Boolean)
-                .join('|') +
-              ')',
-            (match, context) =>
-              ({
-                '@layer base': rules
-                  .filter((r) => r.c?.includes(match[1]))
-                  .map(({ c: classes, s: styles }) => ({
-                    ['' +
-                    (classes as string[]).map(
-                      (className) => '.' + context.e(context.h(className)),
-                    )]: typeof styles == 'function' ? styles(context) : styles,
-                  })),
-              } as CSSObject),
-          ],
-        ],
-      }
-    : {
-        preflight(context) {
-          const preflight: Preflight = {}
+  const config: Preset<TailwindTheme> = {}
+
+  if (strategy !== 'base') {
+    config.rules = [
+      [
+        '(' +
+          rules
+            .map((r) => r.c)
+            .filter(Boolean)
+            .join('|') +
+          ')',
+        (match, context) =>
+          ({
+            '@layer base': rules
+              .filter((r) => r.c?.includes(match[1]))
+              .map(({ c: classes, s: styles }) => ({
+                ['' +
+                (classes as string[]).map((className) => '.' + context.e(context.h(className)))]:
+                  typeof styles == 'function' ? styles(context) : styles,
+              })),
+          } as CSSObject),
+      ],
+    ]
+  }
 
-          for (const { b: base, s: styles } of rules) {
-            preflight['' + base] = typeof styles == 'function' ? styles(context) : styles
-          }
+  if (strategy !== 'class') {
+    config.preflight = (context) => {
+      const preflight: Preflight = {}
 
-          return preflight
-        },
+      for (const { b: base, s: styles } of rules) {
+        preflight['' + base] = typeof styles == 'function' ? styles(context) : styles
       }
+
+      return preflight
+    }
+  }
+
+  return config
 }
 
 const rules: {