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.

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

update for jss-plugin-extend #1538

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

update for jss-plugin-extend #1538

wants to merge 1 commit into from

Conversation

heyymarco
Copy link

Hi, i've made bug-fix for the jss-plugin-extend.

On the scenario like this:
See the sandbox

const btnGrand = {
  color: 'red',
  background: 'pink',
};

const btnParent = {
  // extend using array
  extend: [
    btnGrand,
  ],
};

const btnChild = {
  // extend using object
  extend: btnParent,
};

export default {
  'btnChild': btnChild,
};

the btnChild extend btnParent as an object, and btnParent extend btnGrand as an array.
The plugin fails to create correct css, because on the original file /packages/jss-plugin-extend/src/index.js, line 42:

extend(style.extend.extend, rule, sheet, newStyle)
continue

It assumes that the grandpa's type is a literal object, but actually its type might be string, literal object, string array, literal object array, or mixed type array.

Because I need the JSS to work correctly (I'm developing a css framework based on your JSS lib),
so I created my own plugin-extend.
I wrote it using TypeScript, I'm not familiar with Flow, sorry.

To easily handle 5 kinds of extend types: object, string, object[], string[], (object|string)[],
the trick is convert the extend to array if not an array, otherwise keep the array, then loop it:

    // if `extend` is an `Array` => loop it
    // otherwise => convert to single `Array` => loop it
    for (const singleExtend of (Array.isArray(extend) ? extend : [extend])) {

so, i just handle only for the object & string inside the loop.

I also updated the TS definition for the JssStyle, so it accept extend property correctly:

// upgrade `JssStyle` definition:
type Optional<T>        = T|null|undefined
type ExtendableObject   = JssStyle|string // extend using a JssStyle object or using a rule name
type SingleExtend       = Optional<ExtendableObject>
type Extend             = SingleExtend|SingleExtend[]
type Style              = JssStyle & { extend?: Optional<Extend> } // add `extend` prop into `JssStyle`
// export the upgraded `JssStyle`:
export type { Style, Style as ExtendableStyle, Style as JssStyle }

@heyymarco heyymarco requested a review from kof as a code owner August 1, 2021 09:03
@kof
Copy link
Member

kof commented Sep 5, 2021

Hey, thanks for the fix. To make it mergeable, we need a few things:

  1. Add a test
  2. Reduce the number of changes to a bare minimum.
  3. Keep the current formatting and commenting style.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants