Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(vue): hippy vue css style refactor #3671

Merged
merged 12 commits into from
Dec 25, 2023
Merged

feat(vue): hippy vue css style refactor #3671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
10e2a9f
feat(vue): ts refactor
zealotchen0 Nov 29, 2023
e132951
feat(vue): ts type refactor
zealotchen0 Nov 30, 2023
f0f2fa2
feat(vue): ts type refactor
zealotchen0 Dec 1, 2023
7fa4df7
feat(vue): ts type refactor
zealotchen0 Dec 1, 2023
8bf035d
feat(vue): ts refactor
zealotchen0 Dec 4, 2023
c54e079
feat(vue): ts-refactor
zealotchen0 Dec 5, 2023
8923a7d
feat(vue): ts refactor
zealotchen0 Dec 18, 2023
47d0d13
feat(vue): add css cache & css inherit
zealotchen0 Dec 21, 2023
60342a2
feat(vue): add css cache & css inherit
zealotchen0 Dec 21, 2023
a4a4e32
feat(vue): add css cache & css inherit
zealotchen0 Dec 21, 2023
8d17e1e
feat(vue): add css cache & css inherit
zealotchen0 Dec 21, 2023
a793164
feat(vue): add new file license
zealotchen0 Dec 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions driver/js/packages/hippy-vue-css-loader/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"loader-utils": "^1.4.1"
},
"devDependencies": {
"@types/loader-utils": "^2.0.6",
"ansi-regex": "^5.0.1",
"hosted-git-info": "~3.0.8",
"lodash": "~4.17.21",
Expand Down
0 ...loader/src/__tests__/color-parser.test.js → ...loader/src/__tests__/color-parser.test.ts
View file
Open in desktop
File renamed without changes.
25 changes: 14 additions & 11 deletions .../hippy-vue-css-loader/src/color-parser.js → .../hippy-vue-css-loader/src/color-parser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,11 @@
*/

/* eslint-disable no-mixed-operators */
type NameMapType = {
[key: string]: number;
};

export const names = {
export const names: NameMapType = {
transparent: 0x00000000,
aliceblue: 0xf0f8ffff,
antiquewhite: 0xfaebd7ff,
Expand Down Expand Up @@ -173,7 +176,7 @@ export const names = {
yellowgreen: 0x9acd32ff,
};

const call = (...args) => `\\(\\s*(${args.join(')\\s*,\\s*(')})\\s*\\)`;
const call = (...args: any[]) => `\\(\\s*(${args.join(')\\s*,\\s*(')})\\s*\\)`;

const NUMBER = '[-+]?\\d*\\.?\\d+';
const PERCENTAGE = `${NUMBER}%`;
Expand All @@ -189,7 +192,7 @@ const matchers = {
hex8: /^#([0-9a-fA-F]{8})$/,
};

const parse255 = (str) => {
const parse255 = (str: string) => {
const int = parseInt(str, 10);
if (int < 0) {
return 0;
Expand All @@ -200,7 +203,7 @@ const parse255 = (str) => {
return int;
};

const parse1 = (str) => {
const parse1 = (str: string) => {
const num = parseFloat(str);
if (num < 0) {
return 0;
Expand All @@ -211,7 +214,7 @@ const parse1 = (str) => {
return Math.round(num * 255);
};

const hue2rgb = (p, q, tx) => {
const hue2rgb = (p: number, q: number, tx: number) => {
let t = tx;
if (t < 0) {
t += 1;
Expand All @@ -231,7 +234,7 @@ const hue2rgb = (p, q, tx) => {
return p;
};

const hslToRgb = (h, s, l) => {
const hslToRgb = (h: number, s: number, l: number) => {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
const r = hue2rgb(p, q, h + 1 / 3);
Expand All @@ -244,13 +247,13 @@ const hslToRgb = (h, s, l) => {
);
};

const parse360 = (str) => {
const parse360 = (str: string) => {
const int = parseFloat(str);
return (((int % 360) + 360) % 360) / 360;
};

const parsePercentage = (str) => {
const int = parseFloat(str, 10);
const parsePercentage = (str: string) => {
const int = parseFloat(str);
if (int < 0) {
return 0;
}
Expand All @@ -260,7 +263,7 @@ const parsePercentage = (str) => {
return int / 100;
};

function baseColor(color) {
function baseColor(color: number | string) {
let match;
if (typeof color === 'number') {
if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) {
Expand Down Expand Up @@ -345,7 +348,7 @@ function baseColor(color) {
/**
* Translate the color to make sure native understood.
*/
function translateColor(color) {
function translateColor(color: string | number) {
if (typeof color === 'string' && color.indexOf('var(') !== -1) return color;
let int32Color = baseColor(color);
if (int32Color === null) {
Expand Down
11 changes: 6 additions & 5 deletions ...es/hippy-vue-css-loader/src/css-loader.js → ...es/hippy-vue-css-loader/src/css-loader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ let sourceId = 0;
/**
* Convert the CSS text to AST that able to parse by selector parser.
*/
function hippyVueCSSLoader(source) {
function hippyVueCSSLoader(this: any, source: any) {
const options = getOptions(this);
const parsed = parseCSS(source, { source: sourceId });

Expand All @@ -38,12 +38,13 @@ function hippyVueCSSLoader(source) {
const hash = crypto.createHash(hashType);
const contentHash = hash.update(source).digest('hex');
sourceId += 1;
const rulesAst = parsed.stylesheet.rules.filter(n => n.type === 'rule').map(n => ({
const rulesAst = parsed.stylesheet.rules.filter((n: any) => n.type === 'rule').map((n: any) => ({
hash: contentHash,
selectors: n.selectors,
declarations: n.declarations.map((dec) => {

declarations: n.declarations.map((dec: any) => {
let { value } = dec;
const isVariableColor = dec.property && dec.property.startsWith('-') && typeof value === 'string'
const isVariableColor = dec.property?.startsWith('-') && typeof value === 'string'
&& (
value.includes('#')
|| value.includes('rgb')
Expand All @@ -52,7 +53,7 @@ function hippyVueCSSLoader(source) {
|| value.trim() in colorNames
);
if (dec.property && (dec.property.toLowerCase().indexOf('color') > -1 || isVariableColor)) {
value = translateColor(value, options);
value = translateColor(value);
}
return {
type: dec.type,
Expand Down
Loading
Loading