postcss-enumerates-in-line 1.1.0 → 1.3.0

package/README.md

@@ -5,9 +5,9 @@
 |[<img width="24" height="24" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> 日本語](README.md)|[<img width="24" height="24" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> English](README_EN.md)|
 
 
-## 更新点: v1.1.0
+## 更新点: v1.3.0
 
-- `color[[...]]`で引数がなかった場合、`#0000`へ変換するよう処理を変更
+- 条件付き書式`p-hover(...)!` （親要素がhoverした場合）を追加
 
 
 ---
@@ -45,6 +45,7 @@
 またCSSプロパティ名の先頭に以下の書式を加筆することで、条件付きCSSプロパティに対応することができます。
 
 - `hover!`: :hover
+- `p-hover(<parentSelector>)!`: parentSelector:hover thisSelector
 - `dark!`: :root.dark
 - `mq(<mediaQueries>)!`: @media screen and &lt;mediaQueries&gt;
 - `data(<customDataElements>)!`: [data-&lt;customDataElement&gt;]
@@ -68,12 +69,13 @@
 ## 目次
 
 - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
-  - [更新点: v1.1.0](#更新点-v110)
+  - [更新点: v1.3.0](#更新点-v130)
   - [目次](#目次)
   - [CSSでの記述方法](#cssでの記述方法)
     - [条件付き書式](#条件付き書式)
       - [ダークモード](#ダークモード)
       - [マウスオーバー](#マウスオーバー)
+      - [祖先マウスオーバー](#祖先マウスオーバー)
       - [メディアクエリ](#メディアクエリ)
       - [カスタムデータ属性](#カスタムデータ属性)
       - [ARIA属性](#aria属性)
@@ -150,7 +152,7 @@ h1 {
 
 上記のように`条件付き書式!CSSプロパティ名:CSSプロパティ値`と記法を拡張することができます。
 
-`hover!`, `dark!`, `mq(...)!`, `data(...)!`, `aria(...)!`, `attr(...)!`はそれぞれ重ね掛けが可能です。
+`hover!`, `p-hover(...)!`, `dark!`, `mq(...)!`, `data(...)!`, `aria(...)!`, `attr(...)!`はそれぞれ重ね掛けが可能です。
 
 ```scss
 h1 {
@@ -229,6 +231,114 @@ h1:hover {
 ```
 
 
+#### 祖先マウスオーバー
+
+条件付き書式`p-hover(<parentSelector>)!`を使うと、祖先要素がマウスオーバー状態（`:hover`）になった場合の擬似クラスを追加できます。
+
+```scss
+/* 🚧Before */
+h1 {
+  @emums p-hover(a[download])!ct:red ct:black;
+}
+
+/* 🚀After */
+h1 {
+  color: black;
+}
+a[download]:hover h1 {
+  color: red;
+}
+```
+
+`p-hover(...)`関数の引数は、`:hover`擬似クラスを適用する要素を指定するCSSセレクタになっています。
+
+```scss
+/* ❌️Bad */
+h1 {
+  @enums p-hover()!ct:red;
+}
+```
+
+引数が指定されなかった場合、そのCSSスタイル宣言は無視されます。
+
+```scss
+/* ❌️Bad */
+h1 {
+  @enums dark!p-hover(:root)!ct:red;
+}
+
+/* 🙁Unzip */
+:root.dark :root:hover h1 {
+  color: red;
+}
+```
+
+`p-hover(:root)!`と`dark!`を併用してしまうと、`:root.dark :root:hover thisSelector`という機能することのない無駄なCSSセレクタになってしまうためご注意ください。
+
+```scss
+/* ❌️NG */
+h1 {
+  @enums p-hover(.parent .child)!ct:red;
+}
+
+/* ⭕️OK */
+h1 {
+  @enums p-hover(.parent^.child)!ct:red;
+}
+
+/* 🙂Unzip */
+.parent .child:hover h1 {
+  color: red;
+}
+```
+
+宣言の中に半角スペース記号を含むホワイトスペースを使うことはできないため、子孫連結をする場合は`p-hover(.parent .child)!`ではなく`p-hover(.parent^.child)!`のようにしてサーカムフレックス記号（`^`）に置き換えてください。
+
+```scss
+/* ❌️NG */
+h1 {
+  @enums p-hover(.parent > .child)!ct:red;
+}
+
+/* ⭕️OK */
+h1 {
+  @enums p-hover(.parent>.child)!ct:red;
+}
+
+/* 🙂Unzip */
+.parent > .child:hover h1 {
+  color: red;
+}
+```
+
+次兄弟結合子（`+`）・子結合子（`>`）・後続兄弟結合子（`~`）・セレクタリスト記号（`,`）を使う場合、`p-hover(.parent>.child)!`のようにして前後に半角スペース記号を付けないでください。
+
+```scss
+/* ❌️Bad */
+h1 {
+  @enums p-hover(.classA,.classB)!ct:red;
+}
+
+/* ⭕️OK */
+h1 {
+  @enums p-hover(:is(.classA,.classB))!ct:red;
+}
+
+/* 🙁Unzip Bad */
+.classA, .classB:hover h1 {
+  color: red;
+}
+
+/* 🙂Unzip OK */
+:is(.classA,.classB):hover h1 {
+  color: red;
+}
+```
+
+`:is(...)`や`:where(...)`を用いずに剥き出しの状態でセレクタリストを`p-hover(.classA,.classB)!`のように記述すると、意図しない展開が行われてしまいます。
+必ず擬似クラスリストを引数に取る関数の中に収めてください。
+
+
 #### メディアクエリ
 
 条件付き書式`mq(<mediaQueries>)!`を使うと、`@media`ルールの中に入れることができます。
@@ -275,20 +385,22 @@ body {
 }
 ```
 
-> `width`に指定可能な条件値は、`-<length>`・`<length>-<length>`・`<length>-`の３種類です。
+> `width`に指定可能な条件値は、`-<length>`・`<length>-<length>`・`<length>-`・`<length>`の４種類です。
 >
 > `<length>`に指定可能なのは`px`・`rem`・`vw`など長さに関わる値です。
 >
 > + １つのみある`<length>`の前に`-`を付けた場合、`<length>`以下のメディアクエリを意味します（適用されるメディア特性は`max-width`）
 > + ２つの`<length>`を`-`で接続した場合、その区間以内であるメディアクエリを意味します（適用されるメディア特性は`min-width`と`max-width`）
 > + １つのみある`<length>`の後ろに`-`を付けた場合、`<length>`以上のメディアクエリを意味します（適用されるメディア特性は`min-width`）
+> + `<length>`が１つのみあって`-`がない場合、ビューポートサイズが`<length>`とまったく等しい状態を意味します（適用されるメディア特性は`width`）
 
 ```scss
 body {
   @enums
   mq(width:-480px)!m2:1rem
   mq(width:640px-1024px)!mx:1rem
-  mq(width:1280px)!m8:1rem
+  mq(width:1280px-)!m8:1rem
+  mq(width:540px)!m4:1rem
   ;
 }
 ```
@@ -302,7 +414,8 @@ body {
   @enums
   mq(height:-480px)!m2:1rem
   mq(height:640px-1024px)!mx:1rem
-  mq(height:1280px)!m8:1rem
+  mq(height:1280px-)!m8:1rem
+  mq(height:540px)!m4:1rem
   ;
 }
 ```
@@ -311,7 +424,7 @@ body {
 >
 > `@media (aspect-ratio: 16/9)`のような除算記号（`/`）を使った表記はできません。
 >
-> `width`・`height`に似た表記が可能で、`-<number>`・`<number>-<number>`・`<number>-`の３種類と`<number>`が実際に指定可能な条件値です。
+> `width`・`height`に似た表記が可能で、`-<number>`・`<number>-<number>`・`<number>-`・`<number>`の４種類が実際に指定可能な条件値です。
 >
 > + １つのみある`<number>`の前に`-`を付けた場合、`<number>`以下のメディアクエリを意味します（適用されるメディア特性は`max-aspect-ratio`）
 > + ２つの`<number>`を`-`で接続した場合、その区間以内であるメディアクエリを意味します（適用されるメディア特性は`min-aspect-ratio`と`max-aspect-ratio`）

package/README_EN.md

@@ -5,9 +5,9 @@
 |[<img width="24" height="24" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> 日本語](README.md)|[<img width="24" height="24" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> English](README_EN.md)|
 
 
-## Revision: in v1.1.0
+## Revision: in v1.3.0
 
-- When `color[[...]]` didn't lead any arguments, this package transform it to `#0000`.
+- Added new conditional syntax `p-hover(...)!` which will emit at hover event about parental element.
 
 
 ---
@@ -44,6 +44,7 @@ Specific speaking, it takes the syntax like above -- language in [SCSS].
 And also if you prepend below syntaxes into CSS property, would be available about conditional CSS properties.
 
 - `hover!`: :hover
+- `p-hover(<parentSelector>)!`: parentSelector:hover thisSelector
 - `dark!`: :root.dark
 - `mq(<mediaQueries>)!`: @media screen and &lt;mediaQueries&gt;
 - `data(<customDataElements>)!`: [data-&lt;customDataElement&gt;]
@@ -67,12 +68,13 @@ I think primary usage is [gulp] and [gulp-postcss]. However it also works on JS-
 ## Indexes
 
 - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
-  - [Revision: in v1.1.0](#revision-in-v110)
+  - [Revision: in v1.3.0](#revision-in-v130)
   - [Indexes](#indexes)
   - [Method of writing in CSS files.](#method-of-writing-in-css-files)
     - [Conditional CSS property](#conditional-css-property)
       - [Dark mode](#dark-mode)
       - [Mouse over state](#mouse-over-state)
+      - [Parental Mouse over state](#parental-mouse-over-state)
       - [Media Queries](#media-queries)
       - [Custom data attribute](#custom-data-attribute)
       - [ARIA attributes](#aria-attributes)
@@ -149,7 +151,7 @@ h1 {
 
 You can extend a syntax to `<condition>!<CssPropertyName>:<CssPropertyValue>` like above.
 
-Each condition (`hover!`, `dark!`, `mq(...)!`, `data(...)!`, `aria(...)!`, and `attr(...)!`) are able to mate with others.
+Each condition (`hover!`, `p-hover(...)!`, `dark!`, `mq(...)!`, `data(...)!`, `aria(...)!`, and `attr(...)!`) are able to mate with others.
 
 ```scss
 h1 {
@@ -229,6 +231,121 @@ h1:hover {
 ```
 
 
+#### Parental Mouse over state
+
+Using `p-hover(<parentSelector>)!` case that of conditional syntax, this plugin behave to postfix to parental element (`<parentSelector>`) a mouse over pseudo class (`:hover`).
+
+```scss
+/* 🚧Before */
+h1 {
+  @emums p-hover(a[download])!ct:red ct:black;
+}
+
+/* 🚀After */
+h1 {
+  color: black;
+}
+a[download]:hover h1 {
+  color: red;
+}
+```
+
+The argument of `p-hover(...)!` function is a CSS selector which is designated HTML element that will be applied with `:hover` pseudo class.
+
+```scss
+/* ❌️Bad */
+h1 {
+  @enums p-hover()!ct:red;
+}
+```
+
+If there are no arguments, the CSS style declaration will be ignored.
+
+```scss
+/* ❌️Bad */
+h1 {
+  @enums dark!p-hover(:root)!ct:red;
+}
+
+/* 🙁Unzip */
+:root.dark :root:hover h1 {
+  color: red;
+}
+```
+Please mind not to use both `p-hover(:root)!` and `dark!` in a same, because there are going to transform to `:root.dark :root:hover thisSelector` that never work and meanless.
+
+```scss
+/* ❌️NG */
+h1 {
+  @enums p-hover(.parent .child)!ct:red;
+}
+
+/* ⭕️OK */
+h1 {
+  @enums p-hover(.parent^.child)!ct:red;
+}
+
+/* 🙂Unzip */
+.parent .child:hover h1 {
+  color: red;
+}
+```
+
+CSS style declaration does not allow using with whitespace including half-width space character (` `).
+So if you wish connecting by descendant combinator (` `) like `p-hover(.parent .child)!`, then may replace whitespace to circumflex character (`^`) who ought to descript as `p-hover(.parent^.child)!`.
+
+```scss
+/* ❌️NG */
+h1 {
+  @enums p-hover(.parent > .child)!ct:red;
+}
+
+/* ⭕️OK */
+h1 {
+  @enums p-hover(.parent>.child)!ct:red;
+}
+
+/* 🙂Unzip */
+.parent > .child:hover h1 {
+  color: red;
+}
+```
+
+When using below combinators in CSS selector, you mustn't append whitespace about it at before or after.
+- `+`: next-sibling combinator
+- `>`: child combinator
+- `~`: subsequent sibling combinator
+- `,`: selector list
+
+Need to connect parent element, combinator, and child one without any gaps.
+So that will become syntaxes like a `p-hover(.parent>.child)!`.
+
+```scss
+/* ❌️Bad */
+h1 {
+  @enums p-hover(.classA,.classB)!ct:red;
+}
+
+/* ⭕️OK */
+h1 {
+  @enums p-hover(:is(.classA,.classB))!ct:red;
+}
+
+/* 🙁Unzip Bad */
+.classA, .classB:hover h1 {
+  color: red;
+}
+
+/* 🙂Unzip OK */
+:is(.classA,.classB):hover h1 {
+  color: red;
+}
+```
+
+The case of selector list in bare state as `p-hover(.classA,.classB)!` that are un-using `:is(...)` or `:where(...)`, this package will transform unfortunately to unintentional CSS selector as `.classA, .classB:hover thisSelector`.
+You should store inside functions which needs pseudo class list as that arguments.
+
+
 #### Media Queries
 
 Using `mq(...)!` case that of conditional syntax, this plugin behave to insert into `@media` rules.
@@ -275,20 +392,22 @@ body {
 }
 ```
 
-> In `width` case; there are 3 type of designatable value. `-<length>`, `<length>-<length>`, and `<length>-`.
+> In `width` case; there are 4 type of designatable value. `-<length>`, `<length>-<length>`, `<length>-`, and `<length>`.
 >
 > You will be able to designate to `<length>` as these numeric values, that is related to length which tied with CSS sizing units; `px`, `rem`, `vw`, etc.
 >
 > + In `-<length>` case (the syntax is `<length>` with `-` prefix) -- this plugin recognize it as "This media query is smaller than `<length>`". (Applied media feature is `max-width`.)
 > + In `<length>-<length>` case (the syntax is `-` sandwiching by 2 `<length>`) -- this plugin recognize it as "This media query still is range of between first `<length>` and second `<length>`". (Applied media feature are `min-width` and `max-width`.)
 > + In `<length>-` case (the syntax is `<length>` with `-` postfix) -- this plugin recognize it as "This media query is larger than `<length>`". (Applied media feature is `min-width`.)
+> + In `<length>` case (the syntax only is `<length>` and without any `-`) -- this plugin recognize it as "This viewport size is as just equal as `<length>`". (Applied media feature is `width`.)
 
 ```scss
 body {
   @enums
   mq(width:-480px)!m2:1rem
   mq(width:640px-1024px)!mx:1rem
-  mq(width:1280px)!m8:1rem
+  mq(width:1280px-)!m8:1rem
+  mq(width:540px)!m4:1rem
   ;
 }
 ```
@@ -302,7 +421,8 @@ body {
   @enums
   mq(height:-480px)!m2:1rem
   mq(height:640px-1024px)!mx:1rem
-  mq(height:1280px)!m8:1rem
+  mq(height:1280px-)!m8:1rem
+  mq(height:540px)!m4:1rem
   ;
 }
 ```

package/index.mjs

@@ -156,6 +156,7 @@ export const enumSpreader = (options = {}) => {
             let param = node.params.replace(/[\s\t\r\n]+/g, ' ').split(' ')
             for(let i = 0, l = param.length; i < l; i ++) {
               let setting = {
+                isPHover: '',
                 isHover: false,
                 isDark: false,
                 isMq: '',
@@ -167,6 +168,11 @@ export const enumSpreader = (options = {}) => {
                 value: '',
               }
 
+              if(/p-hover\(.+?\)!/.test(param[i])) {
+                setting.isPHover = (!!param[i].match(/p-hover\((.+?)\)!/)[1] ? param[i].match(/p-hover\((.+?)\)!/)[1] : '').replace(/\^/g, ' ')
+                param[i] = param[i].replace(/p-hover\(.+?\)!/g, '')
+              }
+
               if(/hover!/.test(param[i])) {
                 setting.isHover = true
                 param[i] = param[i].replace(/hover!/g, '')
@@ -271,9 +277,9 @@ export const enumSpreader = (options = {}) => {
               if(/data\(.+?\)!/.test(param[i])) {
                 setting.isData = []
                 ;(!!param[i].match(/data\((.+?)\)!/)[1] ? param[i].match(/data\((.+?)\)!/)[1] : '').split(',').forEach(q => {
-                  let v1 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)([\~\|\^\$\*]?=)['"](.*)['"]$/)
+                  let v1 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)([\~\|\^\$\*]?=)(?:(?=["])["](.*)["]|(?=['])['](.*)['])$/)
                   if(!!v1) {
-                    setting.isData.push(`[data-${v1[1]}${v1[2]}"${v1[3].replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
+                    setting.isData.push(`[data-${v1[1]}${v1[2]}"${(v1[3]||v1[4]).replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
                   } else {
                     let v2 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)$/)
                     if(!!v2) {
@@ -288,9 +294,9 @@ export const enumSpreader = (options = {}) => {
               if(/aria\(.+?\)!/.test(param[i])) {
                 setting.isAria = []
                 ;(!!param[i].match(/aria\((.+?)\)!/)[1] ? param[i].match(/aria\((.+?)\)!/)[1] : '').split(',').forEach(q => {
-                  let v = q.match(/^([a-z]+)=['"](.*)['"]$/)
+                  let v = q.match(/^([a-z]+)=(?:(?=["])["](.*)["]|(?=['])['](.*)['])$/)
                   if(!!v) {
-                    setting.isAria.push(`[aria-${v[1]}="${v[2].replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
+                    setting.isAria.push(`[aria-${v[1]}="${(v[2]||v[3]).replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
                   }
                 })
                 setting.isAria = setting.isAria.join('')
@@ -300,9 +306,9 @@ export const enumSpreader = (options = {}) => {
               if(/attr\(.+?\)!/.test(param[i])) {
                 setting.isAttr = []
                 ;(!!param[i].match(/attr\((.+?)\)!/)[1] ? param[i].match(/attr\((.+?)\)!/)[1] : '').split(',').forEach(q => {
-                  let v1 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)([\~\|\^\$\*]?=)['"](.*)['"]$/)
+                  let v1 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)([\~\|\^\$\*]?=)(?:(?=["])["](.*)["]|(?=['])['](.*)['])$/)
                   if(!!v1) {
-                    setting.isAttr.push(`[${v1[1]}${v1[2]}"${v1[3].replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
+                    setting.isAttr.push(`[${v1[1]}${v1[2]}"${(v1[3]||v1[4]).replace('\%','%25').replace('\"','%22').replace('\'','%27').replace('\`','%60').replace('\\','%5D')}"]`)
                   } else {
                     let v2 = q.match(/^([A-Za-z\d_](?:[A-Za-z\d_\-]*[A-Za-z\d_])?)$/)
                     if(!!v2) {
@@ -314,14 +320,18 @@ export const enumSpreader = (options = {}) => {
                 param[i] = param[i].replace(/attr\(.+?\)!/g, '')
               }
 
-              if(setting.isHover || setting.isDark || (setting.isMq !== '') || (setting.isData !== '') || (setting.isAria !== '') || (setting.isAttr !== '')) {
+              if((setting.isPHover !== '') || setting.isHover || setting.isDark || (setting.isMq !== '') || (setting.isData !== '') || (setting.isAria !== '') || (setting.isAttr !== '')) {
                 let regex = param[i].match(/^([\d\-a-z]+):([^!\s]+)(!)?$/)
                 setting.important = (!!regex[3]) ? ' !important' : ''
                 setting.prop = expandShorthand(regex[1])
                 setting.value = replaceCssPropertyValueWBracket(regex[2])
 
+                if(setting.isPHover !== '') {
+                  setting.isPHover += ':hover '
+                }
+
                 for(let j = 0, m = setting.prop.length; j < m; j ++) {
-                  const css = `${setting.isMq !== '' ? '@media screen and ' + setting.isMq + ' { ' : ''}${setting.isDark ? ':root.dark ' : ''}${rule.selector}${setting.isData}${setting.isAria}${setting.isAttr}${setting.isHover ? ':hover' : ''}{${setting.prop[j]}: ${setting.value}}${setting.isMq !== '' ? ' }' : ''}`
+                  const css = `${setting.isMq !== '' ? '@media screen and ' + setting.isMq + ' { ' : ''}${setting.isDark ? ':root.dark ' : ''}${setting.isPHover}${rule.selector}${setting.isData}${setting.isAria}${setting.isAttr}${setting.isHover ? ':hover' : ''}{${setting.prop[j]}: ${setting.value}}${setting.isMq !== '' ? ' }' : ''}`
                   rule.after(css)
                 }
               } else if(/^([\d\-a-z]+):([^!\s]+)(!)?$/.test(param[i])) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "postcss-enumerates-in-line",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/hadukinei/postcss-enumerates-in-line"