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

addComponents with @variants always applies to all selectors. #1224

Closed
kamalkhan opened this issue Nov 14, 2019 · 2 comments
Closed

addComponents with @variants always applies to all selectors. #1224

kamalkhan opened this issue Nov 14, 2019 · 2 comments

Comments

@kamalkhan
Copy link

@kamalkhan kamalkhan commented Nov 14, 2019

What I was trying to solve

I am using the addComponents function to add a custom component with variants on child selector as follows:

addComponents({
    "@variants hover": {
        ".parent .child": {
            color: "blue"
        }
    }
});

The Issue I was facing

The variants are also applied to the .parent selector:

.parent .child {
  color: blue;
}

.hover\:parent:hover .hover\:child:hover {
  color: blue;
}

What I tried

Nesting the @variants directive inside the .parent selector:

addComponents({
    '.parent': {
         '@variants hover': {
            '.child': {
                color: "blue"
            }
        }
    }
});

But the nesting doesn't resolve:

.parent {
  .child {
    color: blue;
  }
  .hover\:child:hover {
    color: blue;
  }
}

How I solved it

I manually required and used the postcss-nested package and added the plugin after tailwindcss in the postcss config which successfully ensures the nesting selectors are appended as a selector after the variants are applied.

Where was the problem

By looking at the code in src/util/processPlugins.js, it applies the postcss-nested too early.

Proposed solution

An easy fix would be to also apply postcss-nested after the tailwindcss in src/index.js

Why bother

The proposed solution will help in using the tailwindcss plugin mechanism out of the box as opposed to asking people to manually require the postcss-nested plugin in addition to the custom plugin.

@adamwathan

This comment has been minimized.

Copy link
Member

@adamwathan adamwathan commented Nov 14, 2019

@variants is really only meant to be used with simple single class utilities, not multi-class selectors like .parent .child, so what you're trying to do here is really undefined behavior right now.

I would just write the component selectors you want manually:

addComponents({
  ".parent .child": {
    color: "blue"
  },
  ".parent .hover\:child:hover": {
    color: "blue"
  },
});

Even that looks really weird to me though so I'm guessing you're real use case is a bit different.

Our use of postcss-nested is meant just for the CSS-in-JS syntax in plugins and if we moved where that processing happens it would run across your entire CSS file which might result in unexpected behavior for people who would rather use another nesting plugin with a different syntax like postcss-nesting.

No plans to change anything about how this works right now, if anything we may change things to be more defensive and throw an explicit error if you try to use @variants when defining a component or try to use multiple classes in a utility 👍

@adamwathan adamwathan closed this Nov 14, 2019
@kamalkhan

This comment has been minimized.

Copy link
Author

@kamalkhan kamalkhan commented Nov 14, 2019

Thanks.

Fair enough. Yes, I was working on a site color switcher where one can set any color on a parent and the entire tree where the site color is being used will then reflect the new site color.

Basically an alternate to css variables for site color switching.

I guess I should stick to using postcss-nested manually.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.