From 56529d26bafbc019dc7734913466716cfffd865a Mon Sep 17 00:00:00 2001 From: Alan Meira Date: Tue, 11 Jun 2024 11:53:08 -0300 Subject: [PATCH 1/6] refactor: limit attribute rules to input and select elements --- src/index.js | 58 ++++++++++++++++++++++++++-------------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/src/index.js b/src/index.js index dd2953f..75e7d62 100644 --- a/src/index.js +++ b/src/index.js @@ -16,19 +16,19 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { const rules = [ { base: [ - "[type='text']", - 'input:where(:not([type]))', - "[type='email']", - "[type='url']", - "[type='password']", - "[type='number']", - "[type='date']", - "[type='datetime-local']", - "[type='month']", - "[type='search']", - "[type='tel']", - "[type='time']", - "[type='week']", + "input:where([type='text'])", + "input:where(:not([type]))", + "input:where([type='email'])", + "input:where([type='url'])", + "input:where([type='password'])", + "input:where([type='number'])", + "input:where([type='date'])", + "input:where([type='datetime-local'])", + "input:where([type='month'])", + "input:where([type='search'])", + "input:where([type='tel'])", + "input:where([type='time'])", + "input:where([type='week'])", '[multiple]', 'textarea', 'select', @@ -166,7 +166,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: ['[multiple]', '[size]:where(select:not([size="1"]))'], + base: ['select:where([multiple])', '[size]:where(select:not([size="1"]))'], class: ['.form-select:where([size]:not([size="1"]))'], styles: { 'background-image': 'initial', @@ -178,7 +178,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']`, `[type='radio']`], + base: [`input:where([type='checkbox'])`, `input:where([type='radio'])`], class: ['.form-checkbox', '.form-radio'], styles: { appearance: 'none', @@ -202,21 +202,21 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']`], + base: [`input:where([type='checkbox'])`], class: ['.form-checkbox'], styles: { 'border-radius': borderRadius['none'], }, }, { - base: [`[type='radio']`], + base: [`input:where([type='radio'])`], class: ['.form-radio'], styles: { 'border-radius': '100%', }, }, { - base: [`[type='checkbox']:focus`, `[type='radio']:focus`], + base: [`input:where([type='checkbox']):focus`, `input:where([type='radio']):focus`], class: ['.form-checkbox:focus', '.form-radio:focus'], styles: { outline: '2px solid transparent', @@ -234,7 +234,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:checked`, `[type='radio']:checked`], + base: [`input:where([type='checkbox']):checked`, `input:where([type='radio']):checked`], class: ['.form-checkbox:checked', '.form-radio:checked'], styles: { 'border-color': `transparent`, @@ -245,7 +245,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:checked`], + base: [`input:where([type='checkbox']):checked`], class: ['.form-checkbox:checked'], styles: { 'background-image': `url("${svgToDataUri( @@ -258,7 +258,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='radio']:checked`], + base: [`input:where([type='radio']):checked`], class: ['.form-radio:checked'], styles: { 'background-image': `url("${svgToDataUri( @@ -272,10 +272,10 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, { base: [ - `[type='checkbox']:checked:hover`, - `[type='checkbox']:checked:focus`, - `[type='radio']:checked:hover`, - `[type='radio']:checked:focus`, + `input:where([type='checkbox']):checked:hover`, + `input:where([type='checkbox']):checked:focus`, + `input:where([type='radio']):checked:hover`, + `input:where([type='radio']):checked:focus`, ], class: [ '.form-checkbox:checked:hover', @@ -289,7 +289,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:indeterminate`], + base: [`input:where([type='checkbox']):indeterminate`], class: ['.form-checkbox:indeterminate'], styles: { 'background-image': `url("${svgToDataUri( @@ -307,7 +307,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:indeterminate:hover`, `[type='checkbox']:indeterminate:focus`], + base: [`input:where([type='checkbox']):indeterminate:hover`, `input:where([type='checkbox']):indeterminate:focus`], class: ['.form-checkbox:indeterminate:hover', '.form-checkbox:indeterminate:focus'], styles: { 'border-color': 'transparent', @@ -315,7 +315,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='file']`], + base: [`input:where([type='file'])`], class: null, styles: { background: 'unset', @@ -328,7 +328,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='file']:focus`], + base: [`input:where([type='file']):focus`], class: null, styles: { outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`], From d66eef7cdfc177da8d613190e5dda3c8a094ee2b Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 14 Jun 2024 14:41:16 -0400 Subject: [PATCH 2/6] Update selectors --- src/index.js | 60 ++++++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/index.js b/src/index.js index 75e7d62..5d3ed19 100644 --- a/src/index.js +++ b/src/index.js @@ -16,20 +16,20 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { const rules = [ { base: [ - "input:where([type='text'])", - "input:where(:not([type]))", - "input:where([type='email'])", - "input:where([type='url'])", - "input:where([type='password'])", - "input:where([type='number'])", - "input:where([type='date'])", - "input:where([type='datetime-local'])", - "input:where([type='month'])", - "input:where([type='search'])", - "input:where([type='tel'])", - "input:where([type='time'])", - "input:where([type='week'])", - '[multiple]', + "[type='text']:where(input)", + 'input:where(:not([type]))', + "[type='email']:where(input)", + "[type='url']:where(input)", + "[type='password']:where(input)", + "[type='number']:where(input)", + "[type='date']:where(input)", + "[type='datetime-local']:where(input)", + "[type='month']:where(input)", + "[type='search']:where(input)", + "[type='tel']:where(input)", + "[type='time']:where(input)", + "[type='week']:where(input)", + '[multiple]:where(select)', 'textarea', 'select', ], @@ -166,7 +166,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: ['select:where([multiple])', '[size]:where(select:not([size="1"]))'], + base: ['[multiple]:where(select)', '[size]:where(select:not([size="1"]))'], class: ['.form-select:where([size]:not([size="1"]))'], styles: { 'background-image': 'initial', @@ -178,7 +178,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`input:where([type='checkbox'])`, `input:where([type='radio'])`], + base: [`[type='checkbox']:where(input)`, `[type='radio']:where(input)`], class: ['.form-checkbox', '.form-radio'], styles: { appearance: 'none', @@ -202,21 +202,21 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`input:where([type='checkbox'])`], + base: [`[type='checkbox']:where(input)`], class: ['.form-checkbox'], styles: { 'border-radius': borderRadius['none'], }, }, { - base: [`input:where([type='radio'])`], + base: [`[type='radio']:where(input)`], class: ['.form-radio'], styles: { 'border-radius': '100%', }, }, { - base: [`input:where([type='checkbox']):focus`, `input:where([type='radio']):focus`], + base: [`[type='checkbox']:where(input):focus`, `[type='radio']:where(input):focus`], class: ['.form-checkbox:focus', '.form-radio:focus'], styles: { outline: '2px solid transparent', @@ -234,7 +234,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`input:where([type='checkbox']):checked`, `input:where([type='radio']):checked`], + base: [`[type='checkbox']:where(input):checked`, `[type='radio']:where(input):checked`], class: ['.form-checkbox:checked', '.form-radio:checked'], styles: { 'border-color': `transparent`, @@ -245,7 +245,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`input:where([type='checkbox']):checked`], + base: [`[type='checkbox']:where(input):checked`], class: ['.form-checkbox:checked'], styles: { 'background-image': `url("${svgToDataUri( @@ -258,7 +258,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`input:where([type='radio']):checked`], + base: [`[type='radio']:where(input):checked`], class: ['.form-radio:checked'], styles: { 'background-image': `url("${svgToDataUri( @@ -272,10 +272,10 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, { base: [ - `input:where([type='checkbox']):checked:hover`, - `input:where([type='checkbox']):checked:focus`, - `input:where([type='radio']):checked:hover`, - `input:where([type='radio']):checked:focus`, + `[type='checkbox']:where(input):checked:hover`, + `[type='checkbox']:where(input):checked:focus`, + `[type='radio']:where(input):checked:hover`, + `[type='radio']:where(input):checked:focus`, ], class: [ '.form-checkbox:checked:hover', @@ -289,7 +289,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`input:where([type='checkbox']):indeterminate`], + base: [`[type='checkbox':where(input):indeterminate`], class: ['.form-checkbox:indeterminate'], styles: { 'background-image': `url("${svgToDataUri( @@ -307,7 +307,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`input:where([type='checkbox']):indeterminate:hover`, `input:where([type='checkbox']):indeterminate:focus`], + base: [`[type='checkbox']:where(input):indeterminate:hover`, `[type='checkbox']:where(input):indeterminate:focus`], class: ['.form-checkbox:indeterminate:hover', '.form-checkbox:indeterminate:focus'], styles: { 'border-color': 'transparent', @@ -315,7 +315,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`input:where([type='file'])`], + base: [`[type='file']:where(input)`], class: null, styles: { background: 'unset', @@ -328,7 +328,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`input:where([type='file']):focus`], + base: [`[type='file']:where(input):focus`], class: null, styles: { outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`], From d4d9f3d476a404b6e49f595e7497dfd587599e88 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 14 Jun 2024 14:51:41 -0400 Subject: [PATCH 3/6] Update --- src/index.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/index.js b/src/index.js index 5d3ed19..e522094 100644 --- a/src/index.js +++ b/src/index.js @@ -216,7 +216,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:where(input):focus`, `[type='radio']:where(input):focus`], + base: [`[type='checkbox']:focus:where(input)`, `[type='radio']:focus:where(input)`], class: ['.form-checkbox:focus', '.form-radio:focus'], styles: { outline: '2px solid transparent', @@ -234,7 +234,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:where(input):checked`, `[type='radio']:where(input):checked`], + base: [`[type='checkbox']:checked:where(input)`, `[type='radio']:checked:where(input)`], class: ['.form-checkbox:checked', '.form-radio:checked'], styles: { 'border-color': `transparent`, @@ -245,7 +245,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:where(input):checked`], + base: [`[type='checkbox']:checked:where(input)`], class: ['.form-checkbox:checked'], styles: { 'background-image': `url("${svgToDataUri( @@ -258,7 +258,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='radio']:where(input):checked`], + base: [`[type='radio']:checked:where(input)`], class: ['.form-radio:checked'], styles: { 'background-image': `url("${svgToDataUri( @@ -272,10 +272,10 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, { base: [ - `[type='checkbox']:where(input):checked:hover`, - `[type='checkbox']:where(input):checked:focus`, - `[type='radio']:where(input):checked:hover`, - `[type='radio']:where(input):checked:focus`, + `[type='checkbox']:checked:hover:where(input)`, + `[type='checkbox']:checked:focus:where(input)`, + `[type='radio']:checked:hover:where(input)`, + `[type='radio']:checked:focus:where(input)`, ], class: [ '.form-checkbox:checked:hover', @@ -289,7 +289,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox':where(input):indeterminate`], + base: [`[type='checkbox':indeterminate:where(input)`], class: ['.form-checkbox:indeterminate'], styles: { 'background-image': `url("${svgToDataUri( @@ -307,7 +307,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:where(input):indeterminate:hover`, `[type='checkbox']:where(input):indeterminate:focus`], + base: [`[type='checkbox']:indeterminate:hover:where(input)`, `[type='checkbox']:indeterminate:focus:where(input)`], class: ['.form-checkbox:indeterminate:hover', '.form-checkbox:indeterminate:focus'], styles: { 'border-color': 'transparent', @@ -328,7 +328,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='file']:where(input):focus`], + base: [`[type='file']:focus:where(input)`], class: null, styles: { outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`], From fe1c88bf0a207c49e7649d8629a495f159933b19 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 14 Jun 2024 14:58:58 -0400 Subject: [PATCH 4/6] Fix typo --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index e522094..2bba08f 100644 --- a/src/index.js +++ b/src/index.js @@ -289,7 +289,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox':indeterminate:where(input)`], + base: [`[type='checkbox']:indeterminate:where(input)`], class: ['.form-checkbox:indeterminate'], styles: { 'background-image': `url("${svgToDataUri( From eed324b0aae7c175b2b9ad0f19ef258a3802a75c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 14 Jun 2024 15:38:32 -0400 Subject: [PATCH 5/6] Revert some selector changes, make some others --- src/index.js | 58 ++++++++++++++++++++++++++-------------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/src/index.js b/src/index.js index 2bba08f..b1e89cb 100644 --- a/src/index.js +++ b/src/index.js @@ -16,20 +16,20 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { const rules = [ { base: [ - "[type='text']:where(input)", + "input:where([type='text'])", 'input:where(:not([type]))', - "[type='email']:where(input)", - "[type='url']:where(input)", - "[type='password']:where(input)", - "[type='number']:where(input)", - "[type='date']:where(input)", - "[type='datetime-local']:where(input)", - "[type='month']:where(input)", - "[type='search']:where(input)", - "[type='tel']:where(input)", - "[type='time']:where(input)", - "[type='week']:where(input)", - '[multiple]:where(select)', + "input:where([type='email'])", + "input:where([type='url'])", + "input:where([type='password'])", + "input:where([type='number'])", + "input:where([type='date'])", + "input:where([type='datetime-local'])", + "input:where([type='month'])", + "input:where([type='search'])", + "input:where([type='tel'])", + "input:where([type='time'])", + "input:where([type='week'])", + 'select:where([multiple])', 'textarea', 'select', ], @@ -166,7 +166,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: ['[multiple]:where(select)', '[size]:where(select:not([size="1"]))'], + base: ['select:where([multiple])', 'select:where([size]:not([size="1"]))'], class: ['.form-select:where([size]:not([size="1"]))'], styles: { 'background-image': 'initial', @@ -178,7 +178,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:where(input)`, `[type='radio']:where(input)`], + base: [`input:where([type='checkbox'])`, `input:where([type='radio'])`], class: ['.form-checkbox', '.form-radio'], styles: { appearance: 'none', @@ -202,21 +202,21 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:where(input)`], + base: [`input:where([type='checkbox'])`], class: ['.form-checkbox'], styles: { 'border-radius': borderRadius['none'], }, }, { - base: [`[type='radio']:where(input)`], + base: [`input:where([type='radio'])`], class: ['.form-radio'], styles: { 'border-radius': '100%', }, }, { - base: [`[type='checkbox']:focus:where(input)`, `[type='radio']:focus:where(input)`], + base: [`input:where([type='checkbox']):focus`, `input:where([type='radio']):focus`], class: ['.form-checkbox:focus', '.form-radio:focus'], styles: { outline: '2px solid transparent', @@ -234,7 +234,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:checked:where(input)`, `[type='radio']:checked:where(input)`], + base: [`input:where([type='checkbox']):checked`, `input:where([type='radio']):checked`], class: ['.form-checkbox:checked', '.form-radio:checked'], styles: { 'border-color': `transparent`, @@ -245,7 +245,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:checked:where(input)`], + base: [`input:where([type='checkbox']):checked`], class: ['.form-checkbox:checked'], styles: { 'background-image': `url("${svgToDataUri( @@ -258,7 +258,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='radio']:checked:where(input)`], + base: [`input:where([type='radio']):checked`], class: ['.form-radio:checked'], styles: { 'background-image': `url("${svgToDataUri( @@ -272,10 +272,10 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, { base: [ - `[type='checkbox']:checked:hover:where(input)`, - `[type='checkbox']:checked:focus:where(input)`, - `[type='radio']:checked:hover:where(input)`, - `[type='radio']:checked:focus:where(input)`, + `input:where([type='checkbox']):checked:hover`, + `input:where([type='checkbox']):checked:focus`, + `input:where([type='radio']):checked:hover`, + `input:where([type='radio']):checked:focus`, ], class: [ '.form-checkbox:checked:hover', @@ -289,7 +289,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:indeterminate:where(input)`], + base: [`input:where([type='checkbox']):indeterminate`], class: ['.form-checkbox:indeterminate'], styles: { 'background-image': `url("${svgToDataUri( @@ -307,7 +307,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='checkbox']:indeterminate:hover:where(input)`, `[type='checkbox']:indeterminate:focus:where(input)`], + base: [`input:where([type='checkbox']):indeterminate:hover`, `input:where([type='checkbox']):indeterminate:focus`], class: ['.form-checkbox:indeterminate:hover', '.form-checkbox:indeterminate:focus'], styles: { 'border-color': 'transparent', @@ -315,7 +315,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='file']:where(input)`], + base: [`input:where([type='file'])`], class: null, styles: { background: 'unset', @@ -328,7 +328,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`[type='file']:focus:where(input)`], + base: [`input:where([type='file']:focus)`], class: null, styles: { outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`], From 27ef444e55225fdf776fdf77893265d286d99ec8 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 14 Jun 2024 15:39:52 -0400 Subject: [PATCH 6/6] Update --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index b1e89cb..5ff74a9 100644 --- a/src/index.js +++ b/src/index.js @@ -328,7 +328,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { }, }, { - base: [`input:where([type='file']:focus)`], + base: [`input:where([type='file']):focus`], class: null, styles: { outline: [`1px solid ButtonText`, `1px auto -webkit-focus-ring-color`],