This commit is contained in:
2026-03-18 20:54:43 +01:00
parent b3c8b77f12
commit 9fe656b34c
8058 changed files with 912898 additions and 23 deletions
+20
View File
@@ -0,0 +1,20 @@
# goober-autoprefixer
A css autoprefixer for [🥜goober](https://github.com/cristianbote/goober) using [style-vendorizer](https://github.com/kripod/style-vendorizer).
## Install
`npm install --save goober`
## How to use it
This packages exports a `prefix` function that needs to be passed to goober's `setup` function like this:
```jsx
import React from 'react';
import { setup } from 'goober';
import { prefix } from 'goober/prefixer';
// Setup goober for react with autoprefixer
setup(React.createElement, prefix);
```
+7
View File
@@ -0,0 +1,7 @@
export = autoprefixer;
export as namespace autoprefixer;
declare namespace autoprefixer {
function prefix(key: string, val: any): string;
}
+44
View File
@@ -0,0 +1,44 @@
{
"name": "goober-autoprefixer",
"version": "1.2.3",
"sideEffects": false,
"main": "./dist/goober-autoprefixer.cjs",
"module": "./dist/goober-autoprefixer.esm.js",
"umd:main": "./dist/goober-autoprefixer.umd.js",
"source": "./src/index.js",
"unpkg": "./dist/goober-autoprefixer.umd.js",
"types": "./autoprefixer.d.ts",
"type": "module",
"author": {
"name": "Jovi De Croock",
"url": "https://www.jovidecroock.com/"
},
"license": "MIT",
"scripts": {
"build": "rm -rf ./dist && microbundle --entry src/index.js --name gooberPrefixer --no-sourcemap --generateTypes false",
"test": "jest"
},
"devDependencies": {
"microbundle": "^0.14.2",
"@babel/plugin-transform-react-jsx": "^7.7.0",
"@babel/preset-env": "^7.3.1",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
"style-vendorizer": "^2.0.0"
},
"keywords": [
"goober",
"prefixer",
"autoprefixer",
"css",
"postcss"
],
"files": [
"src",
"dist",
"README.md",
"package.json",
"LICENSE",
"autoprefixer.d.ts"
]
}
+28
View File
@@ -0,0 +1,28 @@
import { cssPropertyAlias, cssPropertyPrefixFlags, cssValuePrefixFlags } from 'style-vendorizer';
export function prefix(property, value) {
let cssText = '';
/* Resolve aliases, e.g. `gap` -> `grid-gap` */
const propertyAlias = cssPropertyAlias(property);
if (propertyAlias) cssText += `${propertyAlias}:${value};`;
/* Prefix properties, e.g. `backdrop-filter` -> `-webkit-backdrop-filter` */
const propertyFlags = cssPropertyPrefixFlags(property);
if (propertyFlags & 0b001) cssText += `-webkit-${property}:${value};`;
if (propertyFlags & 0b010) cssText += `-moz-${property}:${value};`;
if (propertyFlags & 0b100) cssText += `-ms-${property}:${value};`;
/* Prefix values, e.g. `position: "sticky"` -> `position: "-webkit-sticky"` */
/* Notice that flags don't overlap and property prefixing isn't needed here */
const valueFlags = cssValuePrefixFlags(property, value);
if (valueFlags & 0b001) cssText += `${property}:-webkit-${value};`;
else if (valueFlags & 0b010) cssText += `${property}:-moz-${value};`;
else if (valueFlags & 0b100) cssText += `${property}:-ms-${value};`;
/* Include the standardized declaration last */
/* https://css-tricks.com/ordering-css3-properties/ */
cssText += `${property}:${value};`;
return cssText;
}