Skip to content

Commit

Permalink
feat: add px2rem in cssinjs (#6817)
Browse files Browse the repository at this point in the history
* fix: fix table column data is passed into chlidren is undefined or null errorr

* feat: add px2rem in cssinjs
  • Loading branch information
aibayanyu20 authored Aug 18, 2023
1 parent cacbde3 commit 80a5b53
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 2 deletions.
8 changes: 6 additions & 2 deletions components/_util/cssinjs/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import type { CSSInterpolation, CSSObject } from './hooks/useStyleRegister';
import useStyleRegister, { extractStyle } from './hooks/useStyleRegister';
import Keyframes from './Keyframes';
import type { Linter } from './linters';
import { legacyNotSelectorLinter, logicalPropertiesLinter } from './linters';
import { legacyNotSelectorLinter, logicalPropertiesLinter, parentSelectorLinter } from './linters';
import type { StyleContextProps, StyleProviderProps } from './StyleContext';
import { createCache, useStyleInject, useStyleProvider, StyleProvider } from './StyleContext';
import type { DerivativeFunc, TokenType } from './theme';
import { createTheme, Theme } from './theme';
import type { Transformer } from './transformers/interface';
import legacyLogicalPropertiesTransformer from './transformers/legacyLogicalProperties';

import px2remTransformer from './transformers/px2rem';
const cssinjs = {
Theme,
createTheme,
Expand All @@ -24,10 +24,12 @@ const cssinjs = {

// Transformer
legacyLogicalPropertiesTransformer,
px2remTransformer,

// Linters
logicalPropertiesLinter,
legacyNotSelectorLinter,
parentSelectorLinter,

// cssinjs
StyleProvider,
Expand All @@ -45,10 +47,12 @@ export {

// Transformer
legacyLogicalPropertiesTransformer,
px2remTransformer,

// Linters
logicalPropertiesLinter,
legacyNotSelectorLinter,
parentSelectorLinter,

// cssinjs
StyleProvider,
Expand Down
1 change: 1 addition & 0 deletions components/_util/cssinjs/linters/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export { default as hashedAnimationLinter } from './hashedAnimationLinter';
export type { Linter } from './interface';
export { default as legacyNotSelectorLinter } from './legacyNotSelectorLinter';
export { default as logicalPropertiesLinter } from './logicalPropertiesLinter';
export { default as parentSelectorLinter } from './parentSelectorLinter';
15 changes: 15 additions & 0 deletions components/_util/cssinjs/linters/parentSelectorLinter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { Linter } from '..';
import { lintWarning } from './utils';

const linter: Linter = (_key, _value, info) => {
if (
info.parentSelectors.some(selector => {
const selectors = selector.split(',');
return selectors.some(item => item.split('&').length > 2);
})
) {
lintWarning('Should not use more than one `&` in a selector.', info);
}
};

export default linter;
76 changes: 76 additions & 0 deletions components/_util/cssinjs/transformers/px2rem.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/**
* respect https://github.com/cuth/postcss-pxtorem
*/
import unitless from '@emotion/unitless';
import type { CSSObject } from '..';
import type { Transformer } from './interface';

interface Options {
/**
* The root font size.
* @default 16
*/
rootValue?: number;
/**
* The decimal numbers to allow the REM units to grow to.
* @default 5
*/
precision?: number;
/**
* Whether to allow px to be converted in media queries.
* @default false
*/
mediaQuery?: boolean;
}

const pxRegex = /url\([^)]+\)|var\([^)]+\)|(\d*\.?\d+)px/g;

function toFixed(number: number, precision: number) {
const multiplier = Math.pow(10, precision + 1),
wholeNumber = Math.floor(number * multiplier);
return (Math.round(wholeNumber / 10) * 10) / multiplier;
}

const transform = (options: Options = {}): Transformer => {
const { rootValue = 16, precision = 5, mediaQuery = false } = options;

const pxReplace = (m: string, $1: any) => {
if (!$1) return m;
const pixels = parseFloat($1);
// covenant: pixels <= 1, not transform to rem @zombieJ
if (pixels <= 1) return m;
const fixedVal = toFixed(pixels / rootValue, precision);
return `${fixedVal}rem`;
};

const visit = (cssObj: CSSObject): CSSObject => {
const clone: CSSObject = { ...cssObj };

Object.entries(cssObj).forEach(([key, value]) => {
if (typeof value === 'string' && value.includes('px')) {
const newValue = value.replace(pxRegex, pxReplace);
clone[key] = newValue;
}

// no unit
if (!unitless[key] && typeof value === 'number' && value !== 0) {
clone[key] = `${value}px`.replace(pxRegex, pxReplace);
}

// Media queries
const mergedKey = key.trim();
if (mergedKey.startsWith('@') && mergedKey.includes('px') && mediaQuery) {
const newKey = key.replace(pxRegex, pxReplace);

clone[newKey] = clone[key];
delete clone[key];
}
});

return clone;
};

return { visit };
};

export default transform;

0 comments on commit 80a5b53

Please sign in to comment.