fix: position sticky prefixing

We have switched to style-vendorizer which additionally supports property aliases, e.g. `gap` -> `grid-gap`

README.md

@@ -331,7 +331,7 @@ It would be untrue to suggest that the design here is totally original, other th
 - [goober](https://github.com/cristianbote/goober): an impossibly small yet efficient CSS-in-JS implementation that defines critical module features.
 - [otion](https://github.com/kripod/otion): the first CSS-in-JS solution specifically oriented around handling CSS in an atomic fashion.
 - [clsx](https://github.com/lukeed/clsx): a tiny utility for constructing class name strings conditionally.
-- [tiny-css-prefixer](https://github.com/kitten/tiny-css-prefixer): essentials CSS prefixing helpers in less than 1KB of JavaScript.
+- [style-vendorizer](https://github.com/kripod/style-vendorizer): essentials CSS prefixing helpers in less than 1KB of JavaScript.
 - [csstype](https://github.com/frenic/csstype): providing autocompletion and type checking for CSS properties and values.
 
 ## License

docs/architecture.md

@@ -258,14 +258,14 @@ interface Sheet {
 #### prefix
 
 > CSS prefixing
-> **default**: based on tiny-css-prefixer
+> **default**: based on [style-vendorizer](https://github.com/kripod/style-vendorizer)
 
 - boolean
 - function
 
 ```js
 interface Prefixer {
-  (property: string, value: string): string;
+  (property: string, value: string, important?: boolean): string;
 }
 ```
 

package.json

@@ -36,7 +36,7 @@
   ],
   "// These are ONLY bundled (eg included) in the umd builds": "",
   "bundledDependencies": [
-    "tiny-css-prefixer"
+    "style-vendorizer"
   ],
   "scripts": {
     "build": "distilt",
@@ -101,7 +101,7 @@
   },
   "dependencies": {
     "csstype": "^3.0.5",
-    "tiny-css-prefixer": "^1.1.4"
+    "style-vendorizer": "^2.0.0"
   },
   "peerDependencies": {
     "typescript": "^4.1.0"

src/__tests__/mode.test.ts

@@ -96,7 +96,7 @@ test('ignore vendor specific pseudo classes errors', () => {
   assert.equal(calls, [
     ['::-moz-focus-inner{border-style:none}', 0],
     [':-moz-focusring{outline:1px dotted ButtonText}', 0],
-    ['.underline{text-decoration:underline}', 0],
+    ['.underline{-webkit-text-decoration:underline;text-decoration:underline}', 0],
     ['.text-center{text-align:center}', 1],
   ])
 
@@ -112,7 +112,7 @@ test('propagate other errors to warn', () => {
   sheet.insert = (rule, index) => {
     calls.push([rule, index])
 
-    if (rule.includes('-web')) {
+    if (rule.includes('invalid-web')) {
       throw new Error(
         `Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '${rule}'.`,
       )
@@ -131,7 +131,7 @@ test('propagate other errors to warn', () => {
 
   assert.equal(calls, [
     ['.invalid-web{color:blue}', 0],
-    ['.underline{text-decoration:underline}', 0],
+    ['.underline{-webkit-text-decoration:underline;text-decoration:underline}', 0],
   ])
 
   assert.is(warn.callCount, 1)

src/__tests__/prefix.test.ts

@@ -36,9 +36,9 @@ test('add prefix', ({ sheet, instance }) => {
     'sticky scroll-snap-x appearance-menulist-button',
   )
   assert.equal(sheet.target, [
-    '.sticky{position:-webkit-sticky, sticky}',
-    '.appearance-menulist-button{appearance:menulist-button;-moz-appearance:menulist-button;-webkit-appearance:menulist-button}',
-    '.scroll-snap-x{scroll-snap-type:x;-ms-scroll-snap-type:x;-webkit-scroll-snap-type:x}',
+    '.sticky{position:-webkit-sticky;position:sticky}',
+    '.appearance-menulist-button{-webkit-appearance:menulist-button;-moz-appearance:menulist-button;appearance:menulist-button}',
+    '.scroll-snap-x{scroll-snap-type:x}',
   ])
 })
 
@@ -48,9 +48,9 @@ test('add prefix with important', ({ sheet, instance }) => {
     'sticky! scroll-snap-x! appearance-menulist-button!',
   )
   assert.equal(sheet.target, [
-    '.sticky\\!{position:-webkit-sticky, sticky !important}',
-    '.appearance-menulist-button\\!{appearance:menulist-button !important;-moz-appearance:menulist-button !important;-webkit-appearance:menulist-button !important}',
-    '.scroll-snap-x\\!{scroll-snap-type:x !important;-ms-scroll-snap-type:x !important;-webkit-scroll-snap-type:x !important}',
+    '.sticky\\!{position:-webkit-sticky !important;position:sticky !important}',
+    '.appearance-menulist-button\\!{-webkit-appearance:menulist-button !important;-moz-appearance:menulist-button !important;appearance:menulist-button !important}',
+    '.scroll-snap-x\\!{scroll-snap-type:x !important}',
   ])
 })
 

src/__tests__/preflight.test.ts

@@ -29,19 +29,19 @@ test('add preflight styles', () => {
     'body{font-family:inherit;line-height:inherit}',
     '*,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}',
     'h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}',
-    'a{color:inherit;text-decoration:inherit}',
+    'a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}',
     '::-moz-focus-inner{border-style:none;padding:0}',
     '[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}',
     'pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}',
     'img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}',
     'img,video{max-width:100%;height:auto}',
-    ':root{tab-size:4;-moz-tab-size:4}',
+    ':root{-moz-tab-size:4;tab-size:4}',
     'ol,ul{list-style:none}',
     'img{border-style:solid}',
     'button,select{text-transform:none}',
     ':-moz-ui-invalid{box-shadow:none}',
     'progress{vertical-align:baseline}',
-    'abbr[title]{text-decoration:underline dotted}',
+    'abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}',
     'b,strong{font-weight:bolder}',
     'sub{bottom:-0.25em}',
     'sup{top:-0.5em}',

src/server/async-sheet.test.ts

@@ -93,13 +93,13 @@ if (Number(process.versions.node.split('.')[0]) >= 12) {
     assert.match(first.textContent, '.text-center{text-align:center}.font-bold{font-weight:700}')
     assert.not.match(
       first.textContent,
-      '.italic{font-style:italic}.underline{text-decoration:underline}',
+      '.italic{font-style:italic}.underline{-webkit-text-decoration:underline;text-decoration:underline}',
     )
 
     assert.match(second.textContent, 'ol,ul{list-style:none}')
     assert.match(
       second.textContent,
-      '.italic{font-style:italic}.underline{text-decoration:underline}',
+      '.italic{font-style:italic}.underline{-webkit-text-decoration:underline;text-decoration:underline}',
     )
     assert.not.match(
       second.textContent,

src/twind/prefix.ts

@@ -1,6 +1,6 @@
 import type { Prefixer } from '../types'
 
-import { prefixProperty, prefixValue } from 'tiny-css-prefixer'
+import { cssPropertyAlias, cssPropertyPrefixFlags, cssValuePrefixFlags } from 'style-vendorizer'
 
 export const noprefix: Prefixer = (property: string, value: string, important?: boolean): string =>
   `${property}:${value}${important ? ' !important' : ''}`
@@ -10,15 +10,28 @@ export const autoprefix: Prefixer = (
   value: string,
   important?: boolean,
 ): string => {
-  const declaration = noprefix(property, prefixValue(property, value), important)
+  let cssText = ''
 
-  let cssText = declaration
+  // Resolve aliases, e.g. `gap` -> `grid-gap`
+  const propertyAlias = cssPropertyAlias(property)
+  if (propertyAlias) cssText += `${noprefix(propertyAlias, value, important)};`
 
-  const flag = prefixProperty(property)
+  // Prefix properties, e.g. `backdrop-filter` -> `-webkit-backdrop-filter`
+  let flags = cssPropertyPrefixFlags(property)
+  if (flags & 0b001) cssText += `-webkit-${noprefix(property, value, important)};`
+  if (flags & 0b010) cssText += `-moz-${noprefix(property, value, important)};`
+  if (flags & 0b100) cssText += `-ms-${noprefix(property, value, important)};`
 
-  if (flag & 1 /* 0b001 */) cssText += `;-ms-${declaration}`
-  if (flag & 2 /* 0b010 */) cssText += `;-moz-${declaration}`
-  if (flag & 4 /* 0b100 */) cssText += `;-webkit-${declaration}`
+  // Prefix values, e.g. `position: "sticky"` -> `position: "-webkit-sticky"`
+  // Notice that flags don't overlap and property prefixing isn't needed here
+  flags = cssValuePrefixFlags(property, value)
+  if (flags & 0b001) cssText += `${noprefix(property, `-webkit-${value}`, important)};`
+  if (flags & 0b010) cssText += `${noprefix(property, `-moz-${value}`, important)};`
+  if (flags & 0b100) cssText += `${noprefix(property, `-ms-${value}`, important)};`
+
+  /* Include the standardized declaration last */
+  /* https://css-tricks.com/ordering-css3-properties/ */
+  cssText += noprefix(property, value, important)
 
   return cssText
 }

yarn.lock

@@ -3605,6 +3605,11 @@ structured-source@^3.0.2:
   dependencies:
     boundary "^1.0.1"
 
+style-vendorizer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/style-vendorizer/-/style-vendorizer-2.0.0.tgz#0c46cec94069f1c768d31c3d307ed045646f503c"
+  integrity sha512-CeqwnrtXd/DKIadVNdJDtHnpCmsc28rWVWLmgpF2HdzTiWFVCE1F1OzWWwskOEtWpOpgm6NrjccfkNGo8qW4MA==
+
 supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -3693,11 +3698,6 @@ text-table@^0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-tiny-css-prefixer@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/tiny-css-prefixer/-/tiny-css-prefixer-1.1.4.tgz#b96a0aa6b312227d996e9c303645e3ae2f194086"
-  integrity sha512-QLnDGLUmMkNlSuWogBaSu92uQnvWhcQwUc+MG8L4YgBkjSmBkAz29pTq+8Rh3YWR1TwPrjuZDKWzO7v4PXkipQ==
-
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"