postcss-enumerates-in-line 0.1.1 → 0.3.0

package/README_EN.md

@@ -5,9 +5,24 @@
 |[<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 v0.0.1
+## Revision: in v0.3.0
+
+- Added conditional CSS property names about below.
+  + `hover!`
+  + `dark!`
+  + `mq(<mediaQueries>)!`
+  + `data(<customDataElements>)`
+  + `aria(<ariaAttributes>)`
+- Changed default colors to [Flexoki].
+- Appended `_color.scss` file into this package.
+- Updated files as development samples, `test/gulp/` and `test/postcss/`.
+
+
+## Maybe add functions
+
+- Be able to define user generated shorthands.
+- Refine `[[...]]` syntax, and add to use `color-alpha[[...]]` syntax which is enable to add alpha channel to default colors (using in CSS property value).
 
-- Change connection a package loading from inner file-path to [npmjs.com](https://www.npmjs.com/).
 
 ---
 
@@ -38,11 +53,22 @@ Specific speaking, it takes the syntax like above -- language in [SCSS].
 > You would separate CSS styles by `:` character so, property name appears in before and property value appears in after against `:`.
 > Whitespace characters (like a ` `) treat as separator of CSS styles. If you want to write whitespaces at property values, then may replace these by `^` character.
 >
-> There are syntax descriptions after indexes.
 
-There are no imprements about state transition like a hover, media queries, dark mode, etc.; because I am wishing only to aim for enumerating CSS styles.
+~~There are no imprements about state transition like a hover, media queries, dark mode, etc.; because I am wishing only to aim for enumerating CSS styles.~~
+
+~~> What do I want to say; this plugin do not have any `hover:`, `md:`, and `dark:` etc. at [Tailwind CSS].~~
 
-> What do I want to say; this plugin do not have any `hover:`, `md:`, and `dark:` etc. at [Tailwind CSS].
+☑️In version 0.3.0 and upper.
+
+And also if you prepend below syntaxes into CSS property, would be available about conditional CSS properties.
+
+- `hover!`: :hover
+- `dark!`: :root.dark
+- `mq(<mediaQueries>)!`: @media screen and &lt;mediaQueries&gt;
+- `data(<customDataElements>)!`: [data-&lt;customDataElement&gt;]
+- `aria(<ariaAttributes>)!`: [aria-&lt;ariaAttributes&gt;]
+
+> There are syntax descriptions after indexes.
 
 I think primary usage is [gulp] and [gulp-postcss]. However it also works on JS-API of the PostCSS.
 
@@ -51,6 +77,7 @@ I think primary usage is [gulp] and [gulp-postcss]. However it also works on JS-
 [SCSS]: https://sass-lang.com/
 [gulp]: https://gulpjs.com/
 [gulp-postcss]: https://github.com/postcss/gulp-postcss
+[Flexoki]: https://stephango.com/flexoki
 
 <div class="x--hr"></div>
 
@@ -58,14 +85,22 @@ 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 v0.0.1](#revision-in-v001)
+  - [Revision: in v0.3.0](#revision-in-v030)
+  - [Maybe add functions](#maybe-add-functions)
   - [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)
+      - [Media Queries](#media-queries)
+      - [Custom data attribute](#custom-data-attribute)
+      - [ARIA attributes](#aria-attributes)
     - [Special characters](#special-characters)
       - [COLON Character](#colon-character)
       - [EXCLAMATION character](#exclamation-character)
       - [CIRCUMFLEX character](#circumflex-character)
       - [double SQUARE BRACKET character](#double-square-bracket-character)
+    - [Default colors](#default-colors)
     - [Shorthands of property names](#shorthands-of-property-names)
   - [How to use this plugin](#how-to-use-this-plugin)
     - [How to use with gulp](#how-to-use-with-gulp)
@@ -98,7 +133,7 @@ html {
   @enums background-color:#000 color:#fff;
 
   h1 {
-    @enums font-size:100%;
+    @enums font-size:100% hover!color:red;
   }
 }
 ```
@@ -114,6 +149,303 @@ There are simplification at CSS style declarating too. That made by combination
 You will be able to operate designation freely like a "`border:1px^#888^solid`", because property values can have arbitary value.
 
 
+### Conditional CSS property
+
+```scss
+h1 {
+  @emums data(visible="hidden")!display:none
+  ct:blue hover!ct:red
+  cb:white dark!cb:black
+  mq(width:1000px-)!mx:auto;
+}
+```
+
+You can extend a syntax to `<condition>!<CssPropertyName>:<CssPropertyValue>` like above.
+
+Each condition (`hover!`, `dark!`, `mq(...)!`, `data(...)!`, and `aria(...)!`) are able to mate with others.
+
+```scss
+h1 {
+  @enums dark!hover!ct:red;
+}
+```
+
+But can you not prepend consecutively same conditional type about `mq(...)!`, `data(...)!`, and `aria(...)!`.
+Because these are only able to add the 1 type by 1 CSS property.
+
+If you want to enumerate conditions, please use by `,` splitting that located between `(` and`)`.
+
+The case of there are designated consecutively same optional types, this plugin will be applying the only first one, and ignoring following others.
+
+```scss
+/* ❌️NG */
+h1 {
+  @enums mq(width:-640px)!mq(orientation:portrait)!m2:auto
+  data(state="succeed")!data(target-href^="https://")!text-indent:1rem;
+}
+
+/* ⭕️OK */
+h1 {
+  @enums mq(width:-640px,orientation:portrait)!m2:auto
+  data(state="succeed",target-href^="https://")!text-indent:1rem;
+}
+
+/* 🙂Unzip */
+@media screen and (max-width: 640px) and (orientation: portrait) {
+  h1 {
+    margin-bottom: auto;
+  }
+}
+h1[data-state="succeed"][data-target-href^="https://"] {
+  text-indent: 1rem;
+}
+```
+
+
+#### Dark mode
+
+Using `dark!` case that of conditional syntax, this plugin behave to judge whether does `root:` (html element) have a `dark` class?
+
+```scss
+/* 🚧Before */
+h1 {
+  @emums cb:white dark!cb:black;
+}
+
+/* 🚀After */
+h1 {
+  background-color: white;
+}
+:root.dark h1 {
+  background-color: black;
+}
+```
+
+
+#### Mouse over state
+
+Using `hover!` case that of conditional syntax, this plugin behave to add `:hover` pseudo class.
+
+```scss
+/* 🚧Before */
+h1 {
+  @emums ct:blue hover!ct:red;
+}
+
+/* 🚀After */
+h1 {
+  color: blue;
+}
+h1:hover {
+  color: red;
+}
+```
+
+
+#### Media Queries
+
+Using `mq(...)!` case that of conditional syntax, this plugin behave to insert into `@media` rules.
+
+If you wish to combine multiple media queries consecutively, can describe by `,` splitting syntax.
+
+```scss
+/* 🚧Before */
+h1 {
+  @emums mq(width:1000px-)!m2:auto
+  mq(height:-1000px,aspect-ratio:1-)!p:1.5rem;
+}
+
+/* 🚀After */
+@media screen and (min-width: 1000px) {
+  h1 {
+    margin-bottom: auto;
+  }
+}
+@media screen and (max-height: 1000px) and (min-aspect-ratio: 1) {
+  h1 {
+    padding: 1.5rem;
+  }
+}
+```
+
+The media queries (which are as arguments of `mq(...)` function) can be described in these combination; `media feature`, `:`, `value of condition`.
+
+There are usable media features as a below, however this plugin will change outputting actual media feathres by what do you use any values of condition.
+
+- `orientation`: orientation
+- `width`: width, min-width, max-width
+- `height`: height, min-height, max-height
+- `aspect-ratio`: aspect-ratio, min-aspect-ratio, max-aspect-ratio
+
+> In `orientation` case; there is designatable value, `portrait` (long vertical or square shapes) or `landscape` (long horizontal shape) only.
+
+```scss
+body {
+  @enums
+  mq(orientation:portrait)!m2:1rem
+  mq(orientation:landscape)!m8:1rem
+  ;
+}
+```
+
+> In `width` case; there are 3 type of designatable value. `-<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`.)
+
+```scss
+body {
+  @enums
+  mq(width:-480px)!m2:1rem
+  mq(width:640px-1024px)!mx:1rem
+  mq(width:1280px)!m8:1rem
+  ;
+}
+```
+
+> In `height` case; there are designatable value of condition and behavior that is same as `width`.
+>
+> But applying media feature are changed to `height`, `min-height`, and `max-height`.
+
+```scss
+body {
+  @enums
+  mq(height:-480px)!m2:1rem
+  mq(height:640px-1024px)!mx:1rem
+  mq(height:1280px)!m8:1rem
+  ;
+}
+```
+
+> In `aspect-ratio` case; you can only designate a value in numeric which is integer (like a `1`) or float (like a `0.85`) type.
+>
+> Notice: Must NOT designate value with divide operator (`/`), by what you wish to transform it from `@media (aspect-ratio: 16/9)`. You should designate a calculated literal number. (e.g. 16/9 🔀 1.78)
+>
+> + In `-<number>` case (the syntax is `<number>` with `-` prefix) -- this plugin recognize it as "This aspect ratio is smaller than `<number>`". (Applied media feature is `max-aspect-ratio`.)
+> + In `<number>-<number>` case (the syntax is `-` sandwiching by 2 `<number>`) -- this plugin recognize it as "This aspect ratio stillis range of between first `<number>` and second `<number>`". (Applied media feature are `min-aspect-ratio` and `max-aspect-ratio`.)
+> + In `<number>-` case (the syntax is `<number>` with `-` postfix) -- this plugin recognize it as "This aspect ratio is largeer than `<number>`". (Applied media feature is `min-aspect-ratio`.)
+> + In `<number>` case (the syntax only is `<number>` and without any `-`) -- this plugin recognize it as "This aspect ratio is as just equal as `<number>`". (Applied media feature is `aspect-ratio`.)
+
+```scss
+body {
+  @enums
+  mq(aspect-ratio:-0.5)!m2:1rem
+  mq(aspect-ratio:0.55-0.95)!mx:1rem
+  mq(aspect-ratio:1.25-)!m8:1rem
+  mq(aspect-ratio:1)!p:1rem
+  ;
+}
+```
+
+
+#### Custom data attribute
+
+Using `data(...)!` case that conditional syntax, this plugin behave to combine CSS selector and custom data attributes.
+
+If you wish to combine multiple custom data attributes consecutively, can describe by `,` splitting syntax.
+
+```scss
+/* 🚧Before */
+h1 {
+  @emums data(visible="hidden")!display:none;
+}
+
+/* 🚀After */
+h1[data-visible="hidden"] {
+  display: none;
+}
+```
+
+The custom data attributes (which are as arguments of `data(...)` function) can be described in these combination; `attribute name`, `conditional operator`, `attribute value`.
+
+If do you need a attribute value (that means you want to need only attribute name like as `*[data-loading]`), should not designate `conditional operator` and `attribute value`,
+
+```scss
+/* 🚧Before */
+h1 {
+  @enums data(loading)!display:none
+  data(is-empty="false")!m8:1rem;
+}
+
+/* 🚀After */
+h1[data-loading] {
+  display: none;
+}
+h1[data-is-empty="false"] {
+  margin-top: 1rem;
+}
+```
+
+> At attribute name; designated value is only string which is following onto `data-`.
+>
+> Strictly speaking, there are available only `/[A-Za-z\d_\-]/` characters. But you cannot put `-` characters at first or last.
+
+> At conditional operator; there are usable kinds as a below.
+>
+> + `=`: The case of matching between designated value and custom data attributes absolutely. (e.g. `[data-foo="bar"]`)
+> + `~=`: The case of matching between one of designated value ([required] string must be space character separated style) and custom data attributes. (e.g. `[data-tags~="ipsum"]` vs. `<span data-tags="lorem ipsum dolor sit amet"></span>`)
+> + `^=`: The case of matching between designated value and custom data attributes starting with the same characters. (e.g. `[data-href^="https://"]`)
+> + `$=`: The case of matching between designated value and custom data attributes finishing with the same characters. (e.g. `[data-href$=".webp"]`)
+> + `*=`: The case of matching between designated value and custom data attributes including with the same characters. (e.g. `[data-alphabet*="bcdef"]`)
+> + `|=`: The case of matching between designated value and custom data attributes starting with the same characters, and string of custom data attribute followed `/-[A-Za-z]+/`. (e.g. `[data-lang|="en"]`)
+>
+> > This expression is offen used by tag of languages (like a `en-US`, `en-GB`) which based on ISO 639 + ISO 3166.
+
+> At attribute value; you need to sandwich a designated value by quote symbols (`"` or `'`).
+>
+> Please notice if you want to handle quote symbol characters in custom data attributes.
+>
+> And saying, this plugin transform at percent encoding (%xx) against below characters in attribute value by internal processing.
+> + `%`: %25
+> + `"`: %22
+> + `'`: %27
+> + `｀`: %60
+> + `\`: %5D
+
+
+#### ARIA attributes
+
+Using `aria(...)!` case that conditional syntax, this plugin behave to combine CSS selector and ARIA attributes.
+
+If you wish to combine multiple ARIA attributes consecutively, can describe by `,` splitting syntax.
+
+```scss
+/* 🚧Before */
+h1 {
+  @emums aria(label="heading")!fs:1.5rem;
+}
+
+/* 🚀After */
+h1[aria-label="heading"] {
+  font-size: 1.5rem;
+}
+```
+
+The ARIA attributes (which are as arguments of `aria(...)` function) can be described in these combination; `attribute name`, `=`, `attribute value`.
+
+> At attribute name; designated value is only string which is following onto `aria-`.
+>
+> Strictly speaking, there are available only `/[a-z]/` characters.
+
+> At conditional operator; there is only available character `=`.
+>
+> If there are desirable more operators, I would be extending to a level of same kinds as `data(...)!` maybe.
+
+> At attribute value; you need to sandwich a designated value by quote symbols (`"` or `'`).
+>
+> Please notice if you want to handle quote symbol characters in ARIA attributes.
+>
+> And saying, this plugin transform at percent encoding (%xx) against below characters in attribute value by internal processing.
+> + `%`: %25
+> + `"`: %22
+> + `'`: %27
+> + `｀`: %60
+> + `\`: %5D
+
+
 ### Special characters
 
 There are 5 characters which behave especially; `:`, `^`, `!`, `[[`, and `]]`.
@@ -132,6 +464,7 @@ Please transform to escape the characters by yourself -- `content:"\03A"`.
 
 When you postfix EXCLAMATION (`!`) character about property value, this plugin recognize "I ordered this property is declared `!important`". There is `padding-top:1rem`, then will be replaced to `padding-top: 1rem !important`.
 
+> Notice: This usage case of exclamation character (`!`) which behave as `!important` declaration is different to conditional syntax as `hover!`.
 
 #### CIRCUMFLEX character
 
@@ -173,7 +506,7 @@ You can describe as `width:calc[[100vw-(100%+2rem)*(2)+1rem]]` too to omit `^` c
 Because there ware annoying `^` characters they appear many and many times about `width:calc(100vw^-^(100%^+^2rem)^*^2^+^1rem)`, that is not visibility at good.
 
 > Please must you not use `[[` and `]]` characters about non-mathematical functions like `var()`.
-> 
+>
 > Cause for example; `var[[--foo-bar]]` will be wrongly replacing to `var(--foo - var)`. That is destructed and meaningless property value of CSS.
 
 This is experimental function. I am improving a transform compiler, so you will face at risk that would not insert whitespace characters to both end of calculation operators normally at your wish.
@@ -181,6 +514,47 @@ This is experimental function. I am improving a transform compiler, so you will
 It works to replace whitespace to `^` characters as this case too. But I recommend to take a surefire way, it is supplements by `^` characters manually without `[[` and `]]`.
 
 
+### Default colors
+
+Default colors forked from [Flexoki] v2.0 to this package.
+
+If you want to use it, call a CSS variable from CSS `var()` function.
+
+```scss
+body {
+  @enums ct:var(--color-red-400);
+}
+```
+
+[<img src="README.img/default_color.png" alt="Default color">](README.img/default_color.png)
+
+But currently you cannot use a CSS color settings with alpha channel which styles as `#RRGGBBAA`.
+
+So this packages includes `_color.scss` file.
+
+```scss
+@use '../node_modules/postcss-enumerates-in-line/_color.scss' as c;
+
+html {
+  color: #{c.$color-red-400}99; // D14D4199
+}
+```
+
+> I will implement `color-alpha[[<color-theme>,<color-depth>,<alpha>,<optional:output-style>]]` function futurity.
+
+```scss
+/* 🚧Before */
+html {
+  color: color-alpha[[red,400,60%,oklch]];
+}
+
+/* 🚀After */
+html {
+  color: oklch(0.597 0.1692 28.38 / 60%);
+}
+```
+
+
 ### Shorthands of property names
 
 There are defined shorthands about some property names.
@@ -495,7 +869,7 @@ If you designate to `true` (either nothing to designate, or designate `"hsl"` in
 
 ```css
 :root {
-  --enums-color-gray-100: hsl(210 5% 10%);
+  --color-red-400: hsl(5 61% 53.7%);
 }
 ```
 
@@ -505,7 +879,7 @@ You want to output by RGB type (without default HSL type), may designate `"rgb"`
 
 ```css
 :root {
-  --enums-color-gray-100: #181a1b;
+  --color-red-400: #D14D41;
 }
 ```
 
@@ -513,7 +887,7 @@ Or want to output by OKLCH type, may designate `"oklch"` or `"OKLCH"`.
 
 ```css
 :root {
-  --enums-color-gray-100: oklch(0.21 0.01 210);
+  --color-red-400: oklch(0.597 0.1692 28.38);
 }
 ```
 

package/_color.scss

@@ -0,0 +1,138 @@
+/*!
+ * Color theme
+ * @author Steph Ango
+ * @namespace Flexoki
+ * @copyright https://stephango.com/flexoki
+ */
+
+$color-black-0: "#100F0F";
+$color-black-999: "#000000";
+
+$color-white-0: "#FFFCF0";
+$color-white-999: "#FFFFFF";
+
+$color-base-50: "#F2F0E5";
+$color-base-100: "#E6E4D9";
+$color-base-150: "#DAD8CE";
+$color-base-200: "#CECDC3";
+$color-base-300: "#B7B5AC";
+$color-base-400: "#9F9D96";
+$color-base-500: "#878580";
+$color-base-600: "#6F6E69";
+$color-base-700: "#575653";
+$color-base-800: "#403E3C";
+$color-base-850: "#343331";
+$color-base-900: "#282726";
+$color-base-950: "#1C1B1A";
+
+$color-red-50: "#FFE1D5";
+$color-red-100: "#FFCABB";
+$color-red-150: "#FDB2A2";
+$color-red-200: "#F89A8A";
+$color-red-300: "#E8705F";
+$color-red-400: "#D14D41";
+$color-red-500: "#C03E35";
+$color-red-600: "#AF3029";
+$color-red-700: "#942822";
+$color-red-800: "#6C201C";
+$color-red-850: "#551B18";
+$color-red-900: "#3E1715";
+$color-red-950: "#261312";
+
+$color-orange-50: "#FFE7CE";
+$color-orange-100: "#FED3AF";
+$color-orange-150: "#FCC192";
+$color-orange-200: "#F9AE77";
+$color-orange-300: "#EC8B49";
+$color-orange-400: "#DA702C";
+$color-orange-500: "#CB6120";
+$color-orange-600: "#BC5215";
+$color-orange-700: "#9D4310";
+$color-orange-800: "#71320D";
+$color-orange-850: "#59290D";
+$color-orange-900: "#40200D";
+$color-orange-950: "#27180E";
+
+$color-yellow-50: "#FAEEC6";
+$color-yellow-100: "#F6E2A0";
+$color-yellow-150: "#F1D67E";
+$color-yellow-200: "#ECCB60";
+$color-yellow-300: "#DFB431";
+$color-yellow-400: "#D0A215";
+$color-yellow-500: "#BE9207";
+$color-yellow-600: "#AD8301";
+$color-yellow-700: "#8E6B01";
+$color-yellow-800: "#664D01";
+$color-yellow-850: "#503D02";
+$color-yellow-900: "#3A2D04";
+$color-yellow-950: "#241E08";
+
+$color-green-50: "#EDEECF";
+$color-green-100: "#DDE2B2";
+$color-green-150: "#CDD597";
+$color-green-200: "#BEC97E";
+$color-green-300: "#A0AF54";
+$color-green-400: "#879A39";
+$color-green-500: "#768D21";
+$color-green-600: "#66800B";
+$color-green-700: "#536907";
+$color-green-800: "#3D4C07";
+$color-green-850: "#313D07";
+$color-green-900: "#252D09";
+$color-green-950: "#1A1E0C";
+
+$color-cyan-50: "#DDF1E4";
+$color-cyan-100: "#BFE8D9";
+$color-cyan-150: "#A2DECE";
+$color-cyan-200: "#87D3C3";
+$color-cyan-300: "#5ABDAC";
+$color-cyan-400: "#3AA99F";
+$color-cyan-500: "#2F968D";
+$color-cyan-600: "#24837B";
+$color-cyan-700: "#1C6C66";
+$color-cyan-800: "#164F4A";
+$color-cyan-850: "#143F3C";
+$color-cyan-900: "#122F2C";
+$color-cyan-950: "#101F1D";
+
+$color-blue-50: "#E1ECEB";
+$color-blue-100: "#C6DDE8";
+$color-blue-150: "#ABCFE2";
+$color-blue-200: "#92BFDB";
+$color-blue-300: "#66A0C8";
+$color-blue-400: "#4385BE";
+$color-blue-500: "#3171B2";
+$color-blue-600: "#205EA6";
+$color-blue-700: "#1A4F8C";
+$color-blue-800: "#163B66";
+$color-blue-850: "#133051";
+$color-blue-900: "#12253B";
+$color-blue-950: "#101A24";
+
+$color-purple-50: "#F0EAEC";
+$color-purple-100: "#E2D9E9";
+$color-purple-150: "#D3CAE6";
+$color-purple-200: "#C4B9E0";
+$color-purple-300: "#A699D0";
+$color-purple-400: "#8B7EC8";
+$color-purple-500: "#735EB5";
+$color-purple-600: "#5E409D";
+$color-purple-700: "#4F3685";
+$color-purple-800: "#3C2A62";
+$color-purple-850: "#31234E";
+$color-purple-900: "#261C39";
+$color-purple-950: "#1A1623";
+
+$color-magenta-50: "#FEE4E5";
+$color-magenta-100: "#FCCFDA";
+$color-magenta-150: "#F9B9CF";
+$color-magenta-200: "#F4A4C2";
+$color-magenta-300: "#E47DA8";
+$color-magenta-400: "#CE5D97";
+$color-magenta-500: "#B74583";
+$color-magenta-600: "#A02F6F";
+$color-magenta-700: "#87285E";
+$color-magenta-800: "#641F46";
+$color-magenta-850: "#4F1B39";
+$color-magenta-900: "#39172B";
+$color-magenta-950: "#24131D";