Skip to content
New issue

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

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

Already on GitHub? # 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.

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

Successfully merging this pull request may close these issues.

2 participants