release: version 2025.1.6

.browserslistrc

@@ -0,0 +1,4 @@
+> 0.1%
+last 2 versions
+not dead
+IE > 5

.github/workflows/release.yml

@@ -1,13 +1,13 @@
 name: Release
 
 on:
-  push:
-    tags:
-      - 'v*.*.*'
+  pull_request:
+    types: [closed]
+    branches:
+      - main
 
 permissions:
   contents: write
-  pull-requests: write
 
 jobs:
   release:
@@ -23,60 +23,27 @@ jobs:
           node-version: 20
           cache: yarn
 
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
       - name: Configure Git
         run: |
-          git config --global user.name 'github-actions'
-          git config --global user.email 'github-actions@github.com'
-
-      - name: Fetch all tags
-        run: git fetch --tags
+          git config user.name "github-actions"
+          git config user.email "github-actions@github.com"
 
-      - name: Extract version and previous tag
-        id: extract_info
+      - name: Extract version from package.json
+        id: extract_version
         run: |
-          VERSION=${GITHUB_REF#refs/tags/v}
-          PREVIOUS_TAG=$(git describe --tags $(git rev-list --tags --skip=1 --max-count=1))
+          VERSION=$(jq -r '.version' package.json)
           echo "VERSION=$VERSION" >> $GITHUB_ENV
-          echo "PREVIOUS_TAG=$PREVIOUS_TAG" >> $GITHUB_ENV
+          echo "Extracted version: $VERSION"
 
-      - name: Determine update type
-        id: determine_update_type
+      - name: Create Git tag
         run: |
-          IFS='.' read -r -a NEW_VERSION_PARTS <<< "${VERSION}"
-          IFS='.' read -r -a OLD_VERSION_PARTS <<< "${PREVIOUS_TAG#v}"
+          git tag -a "${{ env.VERSION }}" -m "Release ${{ env.VERSION }}"
+          git push origin "${{ env.VERSION }}"
 
-          if [ "${NEW_VERSION_PARTS[0]}" != "${OLD_VERSION_PARTS[0]}" ]; then
-            UPDATE_TYPE=major
-          elif [ "${NEW_VERSION_PARTS[1]}" != "${OLD_VERSION_PARTS[1]}" ]; then
-            UPDATE_TYPE=minor
-          else
-            UPDATE_TYPE=patch
-          fi
-          echo "UPDATE_TYPE=$UPDATE_TYPE" >> $GITHUB_ENV
-
-      - name: Create and push new branch
-        run: |
-          NEW_BRANCH=release-v${VERSION}
-          git checkout -b ${NEW_BRANCH}
-          git push origin ${NEW_BRANCH}
-          echo "NEW_BRANCH=$NEW_BRANCH" >> $GITHUB_ENV
+      - name: Set up NPM auth
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
 
-      - name: Update version in package.json
-        run: jq --arg new_version "$VERSION" '.version = $new_version' package.json > temp.json && mv temp.json package.json
-
-      - name: Build the package
-        run: yarn build
-
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v6
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          commit-message: "Update version to ${{ env.VERSION }} [${{ env.UPDATE_TYPE }}] and upgrade dependencies"
-          branch: ${{ env.NEW_BRANCH }}
-          base: main
-          title: "Release ${{ env.VERSION }}"
-          body: "This PR updates the version to ${{ env.VERSION }} and upgrades dependencies."
-          labels: release
+      - name: Publish to npm
+        run: yarn publish --non-interactive
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -4,8 +4,7 @@
 ![npm](https://img.shields.io/npm/v/style-forge.form)
 ![license](https://img.shields.io/npm/l/style-forge.form)
 ![npm](https://img.shields.io/npm/dm/style-forge.form)
-[![Codacy Badge](https://app.codacy.com/project/badge/Grade/255f15046ef744fcac1eefd4495b4a71)](https://app.codacy.com/gh/Style-Forge/form/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
-![build](https://github.com/Style-Forge/form/actions/workflows/publish.yml/badge.svg)
+![build](https://github.com/Style-Forge/form/actions/workflows/release.yml/badge.svg)
 
 `Style-Forge.Form` package is a versatile and easy-to-use library designed to streamline the creation and management of forms in web applications. It offers a robust set of tools to handle form validation, styling, and submission processes, enhancing user experience and developer productivity.
 

builder.js

@@ -2,19 +2,21 @@ import fs from 'fs'
 import postcss from 'postcss'
 
 import pImport from 'postcss-import'
+import pDuplicated from 'postcss-combine-duplicated-selectors'
+import pComments from 'postcss-discard-comments'
 import pAutoprefixer from 'autoprefixer'
 import pMinify from 'postcss-minify'
 
 const [from, to] = ['src/all.css', 'form.css']
 const css = fs.readFileSync(from, 'utf8')
 
 const packageFile = JSON.parse(fs.readFileSync('package.json', 'utf8'))
-const title = packageFile.name + ' v' + packageFile.version
+const title = packageFile.name + ' ' + packageFile.version
 const license = packageFile.license + ' License'
 const link = packageFile.repository.url.replace('git+', '').replace('.git', '')
 const header = '/*! ' + [title, license, link].join(' | ') + ' */'
 
-const plugins = [pImport, pAutoprefixer, pMinify]
+const plugins = [pImport, pAutoprefixer, pDuplicated({ removeDuplicatedProperties: true }), pComments, pMinify]
 
 postcss(plugins)
   .process(css, { from })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "style-forge.form",
-  "version": "4.0.4",
+  "version": "2025.1.6",
   "description": "Style-Forge.Form: versatile library for easy form creation, validation, styling, and submission in web apps.",
   "type": "module",
   "main": "form.css",
@@ -31,8 +31,11 @@
     "build": "node builder.js"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.39",
+    "autoprefixer": "^10.4.20",
+    "caniuse-lite": "^1.0.30001690",
+    "postcss": "^8.4.49",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-discard-comments": "^7.0.3",
     "postcss-import": "^16.1.0",
     "postcss-minify": "^1.1.0"
   },

src/all.css

@@ -10,11 +10,7 @@
 @import 'color.css';
 @import 'file.css';
 
-/* Custom inputs */
 @import 'switch.css';
-
-/* Loader */
 @import 'loading.css';
-
-/* Validation */
 @import 'validate.css';
+@import 'theme.css';

src/button.css

@@ -1,20 +1,15 @@
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']) { box-sizing: border-box }
-
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']) *,
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']) *::before,
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']) *::after
-{ box-sizing: inherit }
-
-.sf-button:is(button, input[type='button'], input[type='submit'], input[type='reset']) {
-  appearance: auto;
-  touch-action: manipulation;
+:root {
+  --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --sf-form-fz: 0.9375rem;
+  --sf-disabled: 0.4;
+  --sf-form-radius: 3px;
+  --sf-form-p-input-block: 0.5em;
+  --sf-form-p-input-inline: 0.5em;
 }
 
-.sf-button:where(a, button, input[type='button'], input[type='submit'], input[type='reset']) { cursor: pointer }
+.sf-button {
+  cursor: pointer;
 
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']),
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']):hover
-{
   display: inline-block;
 
   font-size: var(--sf-form-fz);
@@ -32,24 +27,46 @@
 
   border-radius: var(--sf-form-radius);
 
+  height: 32px;
+
   padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
-}
 
-a.sf-button:not([href]) {
-  cursor: not-allowed;
-  text-decoration: none;
-  opacity: var(--sf-disabled);
-  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+
+  vertical-align: baseline;
 }
-a.sf-button:not([href]):hover { color: inherit }
 
-.sf-button:where(button, input[type='button'], input[type='submit'], input[type='reset']):disabled {
+a.sf-button:not([href]),
+.sf-button:disabled
+{
   cursor: not-allowed;
-  -webkit-tap-highlight-color: transparent;
   opacity: var(--sf-disabled);
 }
 
-.sf-button:where(a, button, input[type='button'], input[type='submit'], input[type='reset']):focus-visible {
+.sf-button:focus-visible
+{
   outline: 1px solid hsl(var(--sf-form-c-info));
   outline-offset: -1px;
 }
+
+/* /// */
+
+html.var .sf-button
+{
+  font-size: 15px;
+  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+  color: hsl(0, 0%, 10%);
+  background: hsla(0, 0%, 100%, 0.2);
+  border: 1px solid hsla(0, 0%, 10%, 0.2);
+
+  border-radius: 3px;
+
+  padding: 8px;
+}
+
+html.var a.sf-button:not([href]),
+html.var .sf-button:disabled
+{ opacity: 0.4 }
+
+html.var .sf-button:focus-visible { outline: 1px solid hsl(200, 100%, 60%) }