Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@cssfn/jss-plugin-extend

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cssfn/jss-plugin-extend - npm Package Compare versions

Comparing version
1.0.1
 to
1.0.2
+18
-28
dist/jss-plugin-extend.js

@@ -5,3 +5,2 @@ // others libs:

const isStyle = (object) => isLiteralObject(object);
const ruleGenerateId = (rule, sheet) => rule.name ?? rule.key;
const mergeExtend = (style, rule, sheet) => {

@@ -47,3 +46,6 @@ const extend = style.extend;

const mergeLiteral = (style, newStyle, rule, sheet) => {
for (const [propName, newPropValue] of Object.entries(newStyle)) { // loop through `newStyle`'s props
for (const [propName, newPropValue] of [
...Object.entries(newStyle),
...Object.getOwnPropertySymbols(newStyle).map((sym) => [sym, newStyle[sym]]),
]) { // loop through `newStyle`'s props
// `extend` is a special prop name that we don't handle here:

@@ -82,31 +84,19 @@ if (propName === 'extend')

const onProcessStyle = (style, rule, sheet) => {
if (!style)
return {};
mergeExtend(style, rule, sheet);
//#region handle `@keyframes`
if (sheet) {
for (const [propName, propValue] of Object.entries(style)) {
if (propName.startsWith('@keyframes ')) {
// move `@keyframes` to StyleSheet:
sheet.addRule(propName, propValue, {
generateId: ruleGenerateId,
});
// delete `@keyframes` prop, so another plugins won't see this:
delete style[propName];
} // if
} // for
} // if
//#endregion handle `@keyframes`
return style;
};
const unextendedProp = Symbol();
const onChangeValue = (value, prop, rule) => {
if (prop !== 'extend')
return value; // do not modify any props other than `extend`
const __prevObject = '__prevObject';
if (typeof (value) === 'object') {
const ruleProp = rule.prop;
if (typeof (ruleProp) === 'function') {
for (const [propName, propValue] of Object.entries(value)) {
ruleProp(propName, propValue);
const defineProp = rule.prop;
if (typeof (defineProp) === 'function') {
for (const [propName, propValue] of Object.entries(value)) { // no need to iterate Symbol(s), because [prop: Symbol] is for storing nested rule
defineProp(propName, propValue);
} // for
// store the object to the rule, so we can remove all props we've set later:
rule[__prevObject] = value;
rule[unextendedProp] = value;
} // if

@@ -116,12 +106,12 @@ }

// remove all props we've set before (if any):
const prevObject = rule[__prevObject];
const prevObject = rule[unextendedProp];
if (prevObject) {
const ruleProp = rule.prop;
if (typeof (ruleProp) === 'function') {
for (const propName of Object.keys(prevObject)) {
ruleProp(propName, null);
const defineProp = rule.prop;
if (typeof (defineProp) === 'function') {
for (const propName of Object.keys(prevObject)) { // no need to iterate Symbol(s), because [prop: Symbol] is for storing nested rule
defineProp(propName, null);
} // for
} // if
// clear the stored object:
delete rule[__prevObject];
delete rule[unextendedProp];
} // if

@@ -128,0 +118,0 @@ } // if

+3
-2
package.json
{
"name": "@cssfn/jss-plugin-extend",
"version": "1.0.1",
"version": "1.0.2",
"description": "A plugin for JSS.",

@@ -27,5 +27,6 @@ "type": "module",

"dependencies": {
"jss": "^10.8.2",
"@cssfn/types": "^1.0.4",
"jss": "^10.9.0",
"tiny-warning": "^1.0.3"
}
}
+32
-44
src/jss-plugin-extend.ts

@@ -10,2 +10,7 @@ // jss:

// cssfn:
import type {
ValueOf,
} from '@cssfn/types' // cssfn's types
// others libs:

@@ -32,6 +37,2 @@ import warning from 'tiny-warning'

const ruleGenerateId = (rule: Rule, sheet?: StyleSheet) => (rule as any).name ?? rule.key;
const mergeExtend = (style: Style, rule?: Rule, sheet?: StyleSheet): void => {

@@ -89,3 +90,6 @@ const extend = style.extend;

const mergeLiteral = (style: Style & LiteralObject, newStyle: Style, rule?: Rule, sheet?: StyleSheet): void => {
for (const [propName, newPropValue] of Object.entries(newStyle)) { // loop through `newStyle`'s props
for (const [propName, newPropValue] of [
...Object.entries(newStyle),
...Object.getOwnPropertySymbols(newStyle).map((sym): [symbol, ValueOf<typeof newStyle>] => [sym, (newStyle as any)[sym] as any]),
]) { // loop through `newStyle`'s props
// `extend` is a special prop name that we don't handle here:

@@ -98,4 +102,4 @@ if (propName === 'extend') continue; // skip `extend` prop

// `newPropValue` is not a `Style` => unmergeable => add/overwrite `newPropValue` into `style`:
delete style[propName]; // delete the old prop (if any), so the new prop always placed at the end of LiteralObject
style[propName] = newPropValue; // add/overwrite
delete style[propName as string]; // delete the old prop (if any), so the new prop always placed at the end of LiteralObject
style[propName as string] = newPropValue; // add/overwrite
}

@@ -105,7 +109,7 @@ else {

const currentPropValue = style[propName];
const currentPropValue = style[propName as string];
if (!isStyle(currentPropValue)) {
// `currentPropValue` is not a `Style` => unmergeable => add/overwrite `newPropValue` into `style`:
delete style[propName]; // delete the old prop (if any), so the new prop always placed at the end of LiteralObject
style[propName] = newPropValue; // add/overwrite
delete style[propName as string]; // delete the old prop (if any), so the new prop always placed at the end of LiteralObject
style[propName as string] = newPropValue; // add/overwrite
}

@@ -119,3 +123,3 @@ else {

// merging style prop no need to rearrange the prop position
style[propName] = currentValueClone; // set the mutated `currentValueClone` back to `style`
style[propName as string] = currentValueClone; // set the mutated `currentValueClone` back to `style`
} // if

@@ -135,3 +139,7 @@ } // if

const onProcessStyle = (style: Style, rule: Rule, sheet?: StyleSheet): Style => {
const onProcessStyle = (style: Style|null, rule: Rule, sheet?: StyleSheet): Style => {
if (!style) return {};
mergeExtend(style, rule, sheet);

@@ -141,25 +149,6 @@

//#region handle `@keyframes`
if (sheet) {
for (const [propName, propValue] of Object.entries(style)) {
if (propName.startsWith('@keyframes ')) {
// move `@keyframes` to StyleSheet:
sheet.addRule(propName, propValue as Style, {
generateId : ruleGenerateId,
});
// delete `@keyframes` prop, so another plugins won't see this:
delete (style as any)[propName];
} // if
} // for
} // if
//#endregion handle `@keyframes`
return style;
};
const unextendedProp = Symbol();
const onChangeValue = (value: any, prop: string, rule: Rule): string|null|false => {

@@ -170,8 +159,7 @@ if (prop !== 'extend') return value; // do not modify any props other than `extend`

const __prevObject = '__prevObject';
if (typeof(value) === 'object') {
const ruleProp = (rule as any).prop;
if (typeof(ruleProp) === 'function') {
for (const [propName, propValue] of Object.entries(value)) {
ruleProp(propName, propValue);
const defineProp = (rule as any).prop;
if (typeof(defineProp) === 'function') {
for (const [propName, propValue] of Object.entries(value)) { // no need to iterate Symbol(s), because [prop: Symbol] is for storing nested rule
defineProp(propName, propValue);
} // for

@@ -182,3 +170,3 @@

// store the object to the rule, so we can remove all props we've set later:
(rule as any)[__prevObject] = value;
(rule as any)[unextendedProp] = value;
} // if

@@ -188,8 +176,8 @@ }

// remove all props we've set before (if any):
const prevObject = (rule as any)[__prevObject];
const prevObject = (rule as any)[unextendedProp];
if (prevObject) {
const ruleProp = (rule as any).prop;
if (typeof(ruleProp) === 'function') {
for (const propName of Object.keys(prevObject)) {
ruleProp(propName, null);
const defineProp = (rule as any).prop;
if (typeof(defineProp) === 'function') {
for (const propName of Object.keys(prevObject)) { // no need to iterate Symbol(s), because [prop: Symbol] is for storing nested rule
defineProp(propName, null);
} // for

@@ -201,3 +189,3 @@ } // if

// clear the stored object:
delete (rule as any)[__prevObject];
delete (rule as any)[unextendedProp];
} // if

@@ -204,0 +192,0 @@ } // if