postcss-enumerates-in-line 1.3.0 → 1.5.0

package/README.md

@@ -5,12 +5,12 @@
 |[<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.3.0
+## 更新点: v1.5.0
 
-- 条件付き書式`p-hover(...)!` （親要素がhoverした場合）を追加
+- ダークモードに対応するクラス名を変更可能にするオプション引数「darkClassName」を追加
 
 
----
+## 概要
 
 この[PostCSS]プラグインは、複数のCSSプロパティを1つの行にまとめ上げて記述できるようにします。
 
@@ -26,14 +26,14 @@
   }
 
   &--description {
-    @enums fs:0.85em;
+    @enums fs:0.85em hover!ct:color[[red,400]];
   }
 }
 ```
 
 具体的には上のような書式を取ります。（言語は[SCSS]）
 
-> `@enum`で始まるat-rulesの一種であり、`@apply`と記述方法は全く同じです。
+> `@enums`で始まるat-rulesの一種であり、`@apply`と記述方法は全く同じです。
 >
 > `my`は`margin-top` & `margin-bottom`の、`ff`は`font-family`の、`fs`は`font-size`のショートハンドです。
 > 何がショートハンドとして定義されているかは[プロパティ名のショートハンド](#プロパティ名のショートハンド)を参照してください。
@@ -69,7 +69,8 @@
 ## 目次
 
 - [PostCSS Enumerates in Line](#postcss-enumerates-in-line)
-  - [更新点: v1.3.0](#更新点-v130)
+  - [更新点: v1.5.0](#更新点-v150)
+  - [概要](#概要)
   - [目次](#目次)
   - [CSSでの記述方法](#cssでの記述方法)
     - [条件付き書式](#条件付き書式)
@@ -110,6 +111,7 @@
     - [appendUserColor](#appendusercolor)
       - [color\[\[...\]\]関数](#color関数)
       - [prependDefaultColorオプション](#prependdefaultcolorオプション)
+    - [darkClassName](#darkclassname)
 
 <div class="x--hr"></div>
 
@@ -195,6 +197,9 @@ h1[data-state="succeed"][data-target-href^="https://"] {
 
 条件付き書式`dark!`を使うと、`root:`（html要素）に`dark`クラスが存在するかどうかで判定できるようになります。
 
+初期状態でのクラス名は`dark`ですが、オプション引数「darkClassName」で任意の文字列に変更することができます。
+
+
 ```scss
 /* 🚧Before */
 h1 {
@@ -1256,3 +1261,18 @@ h1 {
 しかしアルファ値の設定ができなかったり、あるいは大量に出力されるCSS変数のためCSSファイルのサイズが肥大化したりする点はデメリットです。
 
 状況に応じて使い分けてください。
+
+
+### darkClassName
+
+ダークモードに対応するクラス名の変更。
+
+初期値: 'dark' (string)
+
+何も指定しなかった場合は初期値の`dark`が適用されるため、`:root.dark`がダークモード判定としてCSSファイルに出力されます。
+
+```javascript
+darkClassName: 'is-dark',
+```
+
+上記のように設定変更すると`:root.is-dark`がダークモード判定に使われるようになります。

package/README_EN.md

@@ -5,12 +5,12 @@
 |[<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.3.0
+## Revision: in v1.5.0
 
-- Added new conditional syntax `p-hover(...)!` which will emit at hover event about parental element.
+- Added optional argument `darkClassName` which work changeable a classname corresponding with dark mode.
 
 
----
+## Overview
 
 This [PostCSS] plugin extend to multiple CSSes from shrinked it which described in 1 line like `@apply` syntax of [Tailwind CSS].
 
@@ -24,7 +24,7 @@ This [PostCSS] plugin extend to multiple CSSes from shrinked it which described
   }
 
   &--description {
-    @enums fs:0.85em;
+    @enums fs:0.85em hover!ct:color[[red,400]];
   }
 }
 ```
@@ -68,7 +68,8 @@ 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.3.0](#revision-in-v130)
+  - [Revision: in v1.5.0](#revision-in-v150)
+  - [Overview](#overview)
   - [Indexes](#indexes)
   - [Method of writing in CSS files.](#method-of-writing-in-css-files)
     - [Conditional CSS property](#conditional-css-property)
@@ -109,6 +110,7 @@ I think primary usage is [gulp] and [gulp-postcss]. However it also works on JS-
     - [appendUserColor](#appendusercolor)
       - [color\[\[...\]\] function](#color-function)
       - [prependDefaultColor option](#prependdefaultcolor-option)
+    - [darkClassName](#darkclassname)
 
 <div class="x--hr"></div>
 
@@ -195,6 +197,10 @@ h1[data-state="succeed"][data-target-href^="https://"] {
 
 Using `dark!` case that of conditional syntax, this plugin behave to judge whether does `root:` (html element) have a `dark` class?
 
+In the default settings, this package apply a classname `dark` against `:root`.
+However you can designate an arbitrary string to it by optional argument `darkClassName`.
+
+
 ```scss
 /* 🚧Before */
 h1 {
@@ -1273,3 +1279,18 @@ However, there are disadvantages.
 - Huge CSS variables for CSS color settings will be outputted in CSS files.It maybe impacts to page loading speed.
 
 Please use them according to wanted situation.
+
+
+### darkClassName
+
+Designate to change a classname  corresponding with dark mode.
+
+Default value: 'dark' (string)
+
+This package output `:root.dark` as dark mode condition into CSS files, when you designate nothing; because it applied a default value `dark`.
+
+```javascript
+darkClassName: 'is-dark',
+```
+
+However you designate as above (set a value as `is-dark`), it would be changed to `:root.is-dark` as dark mode condition and outputted so.

package/index.d.ts

@@ -28,6 +28,11 @@ interface EnumsEnumeratesInLineOptions extends object {
    * @param {Object{<string>,<string>[]}[]} appendShorthand - Append user shorthand settings to default shorthand.
    */
   appendShorthand?: []
+
+  /**
+   * @param {string} darkClassName - Designate a classname for dark mode
+   */
+  darkClassName?: '',
 }
 
 interface UserColor extends object {

package/index.mjs

@@ -16,6 +16,7 @@ import postcss from 'postcss'
 const pluginName = 'PostCSS Enumerates in Line'
 
 const defaultOptions = {
+  darkClassName: 'dark',
   prependDefaultColor: false,
   prependDefaultStyle: true,
   appendUserColor: [],
@@ -27,6 +28,7 @@ let defaultStyle = [
   '::placeholder { opacity: 1; }',
   '::spelling-error { text-decoration: none; }',
   ':root { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 1.5; tab-size: 4; }',
+  '@supports (padding: max(0px)) { body { padding: max(0px, env(safe-area-inset-top)) max(0px, env(safe-area-inset-right)) max(0px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left)); } }',
   'q::before, q::after { display: none; }',
   'h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }',
   'hr { height: 0; border-top-width: 1px; color: inherit; }',
@@ -126,6 +128,7 @@ export const enumSpreader = (options = {}) => {
     prependDefaultStyle,
     appendUserColor,
     appendShorthand,
+    darkClassName,
   } = {...defaultOptions, ...options}
 
   if(prependDefaultColor === false) {
@@ -144,6 +147,10 @@ export const enumSpreader = (options = {}) => {
     prependDefaultStyle = false
   }
 
+  if(!darkClassName) {
+    darkClassName = 'dark'
+  }
+
   appendUserColors(appendUserColor)
   appendUserShorthands(appendShorthand)
 
@@ -331,7 +338,7 @@ export const enumSpreader = (options = {}) => {
                 }
 
                 for(let j = 0, m = setting.prop.length; j < m; j ++) {
-                  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 !== '' ? ' }' : ''}`
+                  const css = `${setting.isMq !== '' ? '@media screen and ' + setting.isMq + ' { ' : ''}${setting.isDark ? `:root.${darkClassName} ` : ''}${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.3.0",
+  "version": "1.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/hadukinei/postcss-enumerates-in-line"

package/test/gulp/gulpfile.mjs

@@ -49,6 +49,7 @@ const task_css = done => {
     enumSpreader({
       //prependDefaultColor: 'rgb',
       //prependDefaultStyle: false,
+      //darkClassName: 'is-dark',
       appendShorthand: [
         ['gtc', ['grid-template-columns']],
         ['fd', ['text-decoration']],

package/test/gulp/package-lock.json

@@ -9,15 +9,15 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "autoprefixer": "^10.4.22",
+        "autoprefixer": "^10.4.23",
         "browser-sync": "^3.0.4",
         "gulp": "^5.0.1",
         "gulp-plumber": "^1.2.1",
         "gulp-postcss": "^10.0.0",
         "gulp-sass": "^6.0.1",
         "postcss-csso": "^6.0.1",
-        "postcss-enumerates-in-line": "^0.4.0",
-        "sass": "^1.96.0"
+        "postcss-enumerates-in-line": "^1.3.0",
+        "sass": "^1.97.2"
       }
     },
     "node_modules/@gulpjs/messages": {
@@ -567,9 +567,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.22",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
-      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
+      "version": "10.4.23",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
       "funding": [
         {
           "type": "opencollective",
@@ -586,10 +586,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.27.0",
-        "caniuse-lite": "^1.0.30001754",
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001760",
         "fraction.js": "^5.3.4",
-        "normalize-range": "^0.1.2",
         "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
       },
@@ -2637,15 +2636,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/now-and-later": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-3.0.0.tgz",
@@ -2884,9 +2874,9 @@
       }
     },
     "node_modules/postcss-enumerates-in-line": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/postcss-enumerates-in-line/-/postcss-enumerates-in-line-0.4.0.tgz",
-      "integrity": "sha512-wyR1ocUyRkBIfsRxu1e7OZ+bBCGlx5RSSFoz94Iq0KviGpG9+ACCSIFiGS9AfMBdSo0YQQAC2QZdv7QzcCUZmw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-enumerates-in-line/-/postcss-enumerates-in-line-1.3.0.tgz",
+      "integrity": "sha512-ryMxBUI/Mg2fxhhEmhokbh/phyovH1fpGdooHLzzJEhVg58nzLjSpsphCNvEIURMM3bCpV7k5GXqJP6KXWU4nA==",
       "license": "ISC",
       "dependencies": {
         "postcss": "^8.5.6"
@@ -3156,9 +3146,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.96.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.96.0.tgz",
-      "integrity": "sha512-8u4xqqUeugGNCYwr9ARNtQKTOj4KmYiJAVKXf2CTIivTCR51j96htbMKWDru8H5SaQWpyVgTfOF8Ylyf5pun1Q==",
+      "version": "1.97.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.2.tgz",
+      "integrity": "sha512-y5LWb0IlbO4e97Zr7c3mlpabcbBtS+ieiZ9iwDooShpFKWXf62zz5pEPdwrLYm+Bxn1fnbwFGzHuCLSA9tBmrw==",
       "license": "MIT",
       "dependencies": {
         "chokidar": "^4.0.0",

package/test/gulp/package.json

@@ -13,14 +13,14 @@
   "license": "ISC",
   "type": "module",
   "dependencies": {
-    "autoprefixer": "^10.4.22",
+    "autoprefixer": "^10.4.23",
     "browser-sync": "^3.0.4",
     "gulp": "^5.0.1",
     "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^10.0.0",
     "gulp-sass": "^6.0.1",
     "postcss-csso": "^6.0.1",
-    "postcss-enumerates-in-line": "^0.4.0",
-    "sass": "^1.96.0"
+    "postcss-enumerates-in-line": "^1.3.0",
+    "sass": "^1.97.2"
   }
 }

package/test/postcss/build-css.mjs

@@ -40,6 +40,7 @@ const task = async () => {
       enumSpreader({
         //prependDefaultColor: 'rgb',
         //prependDefaultStyle: false,
+        //darkClassName: 'is-dark',
         appendShorthand: [
           ['gtc', ['grid-template-columns']],
           ['fd', ['text-decoration']],

package/test/postcss/package-lock.json

@@ -14,8 +14,8 @@
         "npm-run-all2": "^8.0.4",
         "postcss": "^8.5.6",
         "postcss-csso": "^6.0.1",
-        "postcss-enumerates-in-line": "^0.4.0",
-        "sass": "^1.96.0"
+        "postcss-enumerates-in-line": "^1.3.0",
+        "sass": "^1.97.2"
       }
     },
     "node_modules/@isaacs/balanced-match": {
@@ -903,9 +903,9 @@
       }
     },
     "node_modules/postcss-enumerates-in-line": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/postcss-enumerates-in-line/-/postcss-enumerates-in-line-0.4.0.tgz",
-      "integrity": "sha512-wyR1ocUyRkBIfsRxu1e7OZ+bBCGlx5RSSFoz94Iq0KviGpG9+ACCSIFiGS9AfMBdSo0YQQAC2QZdv7QzcCUZmw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-enumerates-in-line/-/postcss-enumerates-in-line-1.3.0.tgz",
+      "integrity": "sha512-ryMxBUI/Mg2fxhhEmhokbh/phyovH1fpGdooHLzzJEhVg58nzLjSpsphCNvEIURMM3bCpV7k5GXqJP6KXWU4nA==",
       "license": "ISC",
       "dependencies": {
         "postcss": "^8.5.6"
@@ -944,9 +944,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.96.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.96.0.tgz",
-      "integrity": "sha512-8u4xqqUeugGNCYwr9ARNtQKTOj4KmYiJAVKXf2CTIivTCR51j96htbMKWDru8H5SaQWpyVgTfOF8Ylyf5pun1Q==",
+      "version": "1.97.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.2.tgz",
+      "integrity": "sha512-y5LWb0IlbO4e97Zr7c3mlpabcbBtS+ieiZ9iwDooShpFKWXf62zz5pEPdwrLYm+Bxn1fnbwFGzHuCLSA9tBmrw==",
       "license": "MIT",
       "dependencies": {
         "chokidar": "^4.0.0",

package/test/postcss/package.json

@@ -21,7 +21,7 @@
     "npm-run-all2": "^8.0.4",
     "postcss": "^8.5.6",
     "postcss-csso": "^6.0.1",
-    "postcss-enumerates-in-line": "^0.4.0",
-    "sass": "^1.96.0"
+    "postcss-enumerates-in-line": "^1.3.0",
+    "sass": "^1.97.2"
   }
 }