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

Allow merging of arrays with objects when using extend #2700

Merged
merged 1 commit into from Oct 29, 2020

Conversation

RobinMalfait
Copy link
Contributor

@RobinMalfait RobinMalfait commented Oct 29, 2020

Currently we have the ability to use the extend keyword in our theme config:

modul.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          750: '#ff0000'
        }
      }
    }
  }
}

We introduced automatic deep-merging for Tailwind 2.0; The expected output of that snippet above means that a new color for red will be added, but the other colors (100 - 900) still exist. The deep merging of objects works as expected.

We currently also have an exception to this rule, for example when you look at the fontFamily, the values of each font is an array. This means that if you want to set the sans font family to something completely different, you can do it by changing the array. Note that the extend functionality does not merge arrays.

modul.exports = {
  theme: {
    extend: {
      fonts: {
        sans: ['my-sans-font']
      }
    }
  }
}

But here is an issue I faced while working on the typography plugin. In the typography plugin we do have an array with default values, and we can extend those values. Each "value" in the array is an object. The reason why is so that we can do something like this:

modul.exports = {
  theme: {
    typography: {
      // Defining multiple values, so that we know that the `a` keys won't collide. 
      css: [{ a: { backgroundColor: 'red' }}, { a: { color: 'pink' }}]
    },
    extend: {
      typography: {
        css: [{ a: { underline: 'none' } }]
      }
    }
  }
}

The issue now is that we don't merge arrays, in other words, it is impossible to extend the typography styles without a breaking change.
This PR makes a few assumptions, but I think that those assumptions are ok.

What this PR does:

  1. If we already have an array, and the first item of the array is an object (than we know that we don't have "simple" values like in the font family)
    1. If the incoming value is an object, push it to the array
    2. If the incoming value is an array, concat them together (to prevent nested arrays)
  2. If we already have an object
    1. If the incoming value is an object, merge it (existing behaviour)
    2. If the incoming value is an array of objects, make an array where the first value is the existing object and the other values is the incoming array
  3. If the incoming value is a "simple" array, override the existing value (existing behavior - for font families)

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