mirror of
https://github.com/idrainformatica/PecFlow.git
synced 2026-06-16 20:55:41 +02:00
fase 5
This commit is contained in:
+20
@@ -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
@@ -0,0 +1,7 @@
|
||||
export = autoprefixer;
|
||||
|
||||
export as namespace autoprefixer;
|
||||
|
||||
declare namespace autoprefixer {
|
||||
function prefix(key: string, val: any): string;
|
||||
}
|
||||
+44
@@ -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
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user