Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

css-counter-value

Package Overview
Dependencies
Maintainers
0
Versions
4
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-counter-value - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

2

package.json
{
"name": "css-counter-value",
"version": "1.0.1",
"version": "2.0.0",
"description": "Convert CSS counter() values to integers without JavaScript",

@@ -5,0 +5,0 @@ "main": "counter-value.css",

214

README.md

@@ -10,7 +10,9 @@ [![Jane Ori - PropJockey.io](https://img.shields.io/badge/Jane%20Ori%20%F0%9F%91%BD-%F0%9F%A4%8D%20PropJockey.io-7300E6.svg?labelColor=FB04C2&style=plastic)](http://jane.propjockey.io/)

1) Converting any `counter()` value into an `integer` for use in `calc()`.
2) Passing integer value of a counter UP to parents (Giving parents child count).
3) Passing integer counter value UP a maximum of five levels (from inside a `td` up to the element above its `table`)
4) Global indexing of elements with integers their style can respond to.
5) Counter values `0` to `120` supported.
6) No JavaScript involved.
2) Passing integer value of a counter UP to parents (Giving parents their child count as a --var).
3) The integer for a counter value can be set from any `counter()` contextually and be scoped all the way up on `:root` so the whole site's CSS can mathematically respond to any counter anywhere.
4) Counter values `0` to `120` supported.
5) Since counters can count globally unlike `:nth-*` selectors, elements can now mathematically respond to their GLOBAL index (<= 120).
6) Style queries then empower decendants of the `counter value`'s scope to respond in any way you can think of, beyond mathematical manipulation.
7) Need the `counter value`'s scope itself to respond in non-mathematical ways? Run a [mathematical comparitor](https://codepen.io/propjockey/pen/YzZMNaz) then convert the resulting `bit` into a [Space Toggle](https://github.com/propjockey/css-sweeper?tab=readme-ov-file#css-is-a-programming-language-thanks-to-the-space-toggle-trick) using an animation like [shown in the demo window here](https://codepen.io/propjockey/pen/dyVMgBg).
8) No JavaScript involved.

@@ -28,3 +30,3 @@ ## Installation and Setup

```html
<link rel="stylesheet" type="text/css" href="https://unpkg.com/css-counter-value@1/counter-value.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/css-counter-value@2/counter-value.css">
```

@@ -35,3 +37,3 @@

```css
@import url(https://unpkg.com/css-counter-value@1/counter-value.css);
@import url(https://unpkg.com/css-counter-value@2/counter-value.css);
```

@@ -41,16 +43,27 @@

Any element on the page can have a maximum of `8` converted counters in its scope, each counter occupying a variable `1` through `8`.
Any element on the page can have a maximum of `8` converted counters `host`ed in its `scope`, each counter occupying a variable `1` through `8`.
For example, a `td` might have its `table-row counter` (1) and its `table-col counter` (2).
`var(--counter-value\\1)`
`var(--counter-value\\2)`
`var(--counter-value\\3)`
`var(--counter-value\\4)`
`var(--counter-value\\5)`
`var(--counter-value\\6)`
`var(--counter-value\\7)`
`var(--counter-value\\8)`
Additionally, the last `td` on the table might scope its `table-row counter` and `table-col counter` up to the parent table, effectively putting two more counters in scope for the rest of the table.
For example, a `td` might `host` its `table-row counter` (1) and its `table-col counter` (2).
This enables the table (or grid) to know how many rows and columns it has without writing complex selectors to account for every potential count.
Additionally, the `table` might `host` the value of the counters of the last `td`, effectively putting two more counters in `scope` for the rest of the `table`.
In this scenario, there are still `4` additional counters that could be converted in scope of any `td` on the `table`.
This rapidly enables the table (or grid, lists, etc) to know how many rows and columns it has without writing complex selectors to account for every potential count.
In this scenario, there would still `4` additional `counters-value`s that could be converted in `scope` of any `td` on the `table`.
### `css-counter-value` Example
Given this table, or a similarly structured grid, nested lists, or any other DOM tree - note the inline styles managing the counter states.
If you prefer to dive into live code, [check out this codepen](https://codepen.io/propjockey/pen/GgKMOdz/82aac5c9c3a29a8a23c27856b176c75d?editors=1100).
Given this table, or a similarly structured grid, nested lists, or any other DOM tree (noting the inline styles managing the counter states):
```html

@@ -80,8 +93,6 @@ <table>

To convert a counter into an integer, add a `directive` as a descendant of the elment being counted and `css-counter-value`'s built in CSS `interpreter` will assign the output vars as directed.
To convert a counter into an integer, add a `directive` as a descendant of the elment being counted and `css-counter-value`'s built in CSS `interpreter` will assign the output `counter-value\\*` vars as directed.
By default, the `directive` will assign the converted counter to output number `1` (of `8`) on its immediate parent.
By default, without a matching `host` in a `directive`'s context, the `directive` will assign the converted `counter-value` to var `1` (of `8`) on its `immediate parent`, making the parent element an *implicit host* for the variable its setting:
It can assign the converted counter to an ancestor up to `5` levels above itself.
```html

@@ -113,7 +124,7 @@ <table>

The two `td` elements now hold a CSS var `var(--counter-value\\1)` with an integer value of `2`.
The two `td` elements with the `data-counter-value` `directive` inside of them now hold a CSS var `var(--counter-value\\1)` with an integer value of `2`.
We set the `--counter` variable to `[the name of the counter]` we wish to convert using the `style` attribute inline, but this can be done from your CSS if you prefer.
To add the row number, we must choose a variable slot other than `1`. To do this, assign the desired number `1` to `8` to the `data-counter-value` attribute like so:
To add the row number, we must choose a variable slot not already in `scope` (other than `1` in this case) and add another `directive` to the `td`'s. To do this, assign the desired number `1` to `8` to the `data-counter-value` attribute and set `--counter` to the `table-row` counter like so:

@@ -128,10 +139,10 @@ ```html

The two `td` elements now hold a CSS var `var(--counter-value\\2)` with an integer value of `1` or `2` depending on which row is looking.
The two `td` elements now *implicity host* a second CSS var `var(--counter-value\\2)` with an integer value of `1` or `2` depending on which row is looking.
If we pass up to the `table` counter values for the `row` and `col` of the last `td` in the `table`, its styles will then be able to respond to the number of columns and rows it has inside easily.
`data-counter-value="7"` would mean "set `var(--counter-value\\7)`'s value to [whatever counter name's value is specified]"
To do this, we must add `directives` with further instruction like so:
If we want our `table` to know how many `rows` and `cols` it contains, we add a explicit `host` `directive attribute values` to the `table` and, in the final `td`, two `directives` that set those values based on the `counter()` states in their `td` element's `scope`:
```html
<table>
<table data-counter-value="host:3 host:4">
...

@@ -145,4 +156,4 @@ <tbody style="counter-reset: table-row 0;">

<output data-counter-value="2" style="--counter: table-row;"></output>
<output data-counter-value="3:on-nth-parent(4)" style="--counter: table-col;"></output>
<output data-counter-value="4:on-nth-parent(4)" style="--counter: table-row;"></output>
<output data-counter-value="3" style="--counter: table-col;"></output>
<output data-counter-value="4" style="--counter: table-row;"></output>
Know Thyself.

@@ -152,16 +163,155 @@ </td>

Assuming this is the last `td` in the `table`, the `table` and every element inside of it will have access to `var(--counter-value\\3)` which contains the total number of columns in the last row and `var(--counter-value\\4)` which contains the total number of rows in the table.
Assuming this is the last `td` in the `table`, the `table` and every element inside of it will have access to `var(--counter-value\\3)` (which contains and integer count of the total number of columns in the last row) and `var(--counter-value\\4)` (which contains the integer total count of rows in the table).
The `:on-nth-parent(X)` `operator` must be preceeded by a number `1` to `8` and contain a value in its parentheses `1` to `5`.
Any of the `8` counter-value variables can be hosted on any ancestor, even `:root`, and be set from any counter context within the `host` element.
Note: Even though the `table-row` counter itself is stored on the `tbody`, the whole `tabel` has access to its integer counter value.
> [!NOTE]
> Even though the `table-row` counter itself is stored on the `tbody`, the whole `tabel` has access to its integer counter value now.
Since they're on the `table`, every `td` can use both of these vars without adding the additional `directives` because the `--counter-value\\3` and `--counter-value\\4` vars are inherited.
Every `td` can use both of these total count vars without adding the additional `directives` because the `--counter-value\\3` and `--counter-value\\4` vars are inherited from `table`.
For any given scope, each of the `8` available counters can only be set at most once.
> [!CAUTION]
> Any hosting element (matching `data-counter-value*="host:"`) must not `host` the same variable as an ancestor.
> That is, for any given element's scope, it must not have more than one ancestor hosting the same counter-value variable `1` to `8`.
If a `directive` sets a variable on an element, no other `directives` inside that element's scope can re-use that same variable.
> [!CAUTION]
> Within any given `host` element's context (descendants), there must not be more than one `directive` trying to set the same `counter-value` variable.
If more than one does happen in the same scope, the value will fail to `0` until it is resolved.
> [!TIP]
> If your counters for a specific `counter-value` variable `1` to `8` are all `0` values, the most likely scenario is a violation of either of the previous two rules.
Any number of sibling elements can host all `8` `counter-value` variables for their own contexts as long as they don't have ancestors or descendants also trying to host one of the `8` variables.
For example, these three scenarios all break for the same reason:
```html
<div data-counter-value="host:1 host:2 host:3">
<output data-counter-value="2" style="--counter: global-div-counter;"></output>
1
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- note this ^ is setting var 1, not implicitly on the parent, but explicitly to the ancestor hosting var 1 since it exists -->
2
</div>
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- note this ^ is setting var 1 to the same host, which is a conflict -->
3
</div>
</div>
```
and, very similar:
```html
<div data-counter-value="host:1 host:2 host:3">
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- note this ^ is setting var 1 to its parent because the parent explicitly hosts var 1 -->
1
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- note this ^ is setting var 1 to the ancestor hosting var 1 since one exists -->
2
</div>
</div>
```
and, the tricky one:
```html
<div data-counter-value="host:2 host:3">
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- note this ^ is setting var 1 to its parent implicitly -->
1
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- note this ^ is going to try setting var1 implicitly to its parent but will fail because an ancestor is implicity already hosting it -->
2
</div>
</div>
```
The following example is completely acceptable - there's a wide range of wild, exciting behavior still possible.
We can have all sorts of fun within the established boundaries of this relationship, if you want 😉
```html
<html data-counter-value="host:8">
...
<body style="counter-reset: global-div-counter: 0;">
<style>div { counter-increment: global-div-counter 1; }</style>
<div data-counter-value="host:3">
<output data-counter-value="2" style="--counter: global-div-counter;"></output>
<!-- var 2, implicitly on parent -->
1
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- var 1, implicitly on parent -->
2
</div>
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- var 1, implicitly on parent -->
<output data-counter-value="3" style="--counter: global-div-counter;"></output>
<!-- var 3, explicitly on an ancestor -->
3
</div>
</div>
<div data-counter-value="host:3">
<output data-counter-value="2" style="--counter: global-div-counter;"></output>
<!-- var 2, implicitly on parent -->
4
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- var 1, implicitly on parent -->
5
</div>
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- var 1, implicitly on parent -->
<output data-counter-value="3" style="--counter: global-div-counter;"></output>
<!-- var 3, explicitly on an ancestor -->
6
</div>
</div>
<div data-counter-value="host:3">
<output data-counter-value="2" style="--counter: global-div-counter;"></output>
<!-- var 2, implicitly on parent -->
7
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- var 1, implicitly on parent -->
8
</div>
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- var 1, implicitly on parent -->
9
</div>
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- var 1, implicitly on parent -->
10
</div>
<div>
<output data-counter-value style="--counter: global-div-counter;"></output>
<!-- var 1, implicitly on parent -->
<output data-counter-value="3" style="--counter: global-div-counter;"></output>
<!-- var 3, explicitly on an ancestor -->
<output data-counter-value="8" style="--counter: global-div-counter;"></output>
<!-- var 8, explicitly on :root, giving the whole document access to a variable var(--counter-value\\8) === 11 -->
11
</div>
</div>
```
Have fun!
<!--
Next project (that was in dev when I needed this counter idea to work):
Connecting a CPU hack to this directive-operator-interpretor concept and inventing a whole new html/css based programming langauge. :3
-->
## Open Contact 👽

@@ -168,0 +318,0 @@ 

counter-value.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc