Comments (14)
https://github.com/postcss/postcss-custom-selectors#multiple-selectors
I will consider suppor it.
from postcss-custom-selectors.
Nice :)
from postcss-custom-selectors.
I'm pretty sure this worked before, might be a cssnext update that caused this but:
@custom-selector :--foobar .foo, .bar;
@custom-selector :--baz .baz;
:--foobar > :--baz {
color: red;
}
Isn't working for me anymore and now produces:
.foo,
.bar {
color: red;
}
Instead of:
.foo > .baz,
.bar > .baz {
color: red;
}
Is this the same limitation or just a regression?
cssnext 1.7.1 with postcss-custom-selectors 2.1.0
from postcss-custom-selectors.
Okay the comment above is definitely a cssnext problem, seems to be working with plain postcss-custom-selectors.
from postcss-custom-selectors.
MoOx/postcss-cssnext#163 (comment)
from postcss-custom-selectors.
So the case above was a playground/firefox issue. I tried to simplify the selectors I got and now have a failing case which definitely fails in postcss-custom-selectors and probably isn't related to cssnext.
input.css:
@custom-selector :--fizzbuzz .fizz, .buzz;
@custom-selector :--foobar .foo, .bar;
:--fizzbuzz > :--foobar {
color: red;
}
output.css:
.fizz > .foo,
.fizz > .bar,
.buzz > .foo,
.buzz > .bar {
color: red;
}
actual.css:
.fizz > .foo,,
.fizz > .bar,
.buzz > .foo,
.buzz > .bar {
color: red;
}
from postcss-custom-selectors.
It seems related to this part https://github.com/postcss/postcss-custom-selectors/blob/e020e3220644d1975b4dc7102d1acb1e0bec38a0/index.js#L21 which does not reset the list for each plugin executions
from postcss-custom-selectors.
I am on working on this bug.
from postcss-custom-selectors.
@yisibl I am going to completely rewrite this plugin with the codebase of postcss-selector-matches (so using babel). This will be better, are you ok with that?
from postcss-custom-selectors.
+1, Mama no longer has to worry that I don't use es 2015 often enough. :)
@MoOx Possible to allow cssnext config file to be written in es 2015 too? Maybe pass that file to babel instead of requiring it directly?
from postcss-custom-selectors.
I think this is the right way to do it, the custom selector spec even says that it expands into :matches()
selectors.
from postcss-custom-selectors.
@MoOx This is the reason why I had to use postcss-selector-matches
before. #16
You can rest assured that you can change it.
from postcss-custom-selectors.
Almost done. PR is coming really soon. Some fixes will be pushed in postcss-selector-matches
at the same time :)
from postcss-custom-selectors.
Complete rewrite has just been pushed as a PR #27
from postcss-custom-selectors.
Related Issues (20)
- Keep original code when a selector is undefined + add a warning HOT 2
- "more complicated things" HOT 3
- Use PostCSS 4.1 API HOT 2
- Two or more consecutive hyphens in selector outputs "undefined" HOT 1
- Wrong output when mixing selectors HOT 10
- Use the postcss-selector-matches HOT 5
- lineBreak does not respect indentation HOT 7
- When customSelectors is empty, console gets polluted HOT 2
- Warning: "The selector X is undefined" HOT 5
- Not valid output HOT 5
- Incompatible with :matches() HOT 1
- custom selectors with nesting HOT 3
- `npm test` crashes
- custom selectors are not applied when used in combination with postcss-nesting HOT 2
- Incorrect indentation and spaces HOT 1
- Iterate over each item in a selector? HOT 1
- Invalid spacing applied to custom-selector lists HOT 2
- Support `.pcss` file extension HOT 1
- usage with a class name selector that contains a double hyphens output a undefined selector HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from postcss-custom-selectors.