csstools / postcss-custom-selectors Goto Github PK

View Code? Open in Web Editor NEW

131.0 131.0 24.0 360 KB

Use Custom Selectors in CSS

Home Page: https://postcss.github.io/postcss-custom-selectors

License: MIT License

JavaScript 75.22% CSS 24.78%

postcss-custom-selectors's People

Contributors

Stargazers

Watchers

postcss-custom-selectors's Issues

usage with a class name selector that contains a double hyphens output a undefined selector

The following code:

@custom-selector --heading h1, h2, h3, h4, h5, h6;

.Container--main --heading {
  margin-bottom: 15px;
}

yields:

undefined {
  margin-bottom: 15px;
}

I would expect:

.Container--main h1,
.Container--main h2,
.Container--main h3,
.Container--main h4,
.Container--main h5,
.Container--main h6 {
  margin-bottom: 15px;
}

Warning: "The selector X is undefined"

cssnext: 1.8.0

Input:

@custom-selector :--modal .ReactModal__Overlay;
@custom-selector :--modal-content .ReactModal__Content;

:--modal-content.users {
  width: 400px;
}

Warning:

users.css:4:1: The selector ':--modal-content' is undefined

When customSelectors is empty, console gets polluted

Using cssnext, which uses this as a dependency. I noticed that in some cases, cssnext doesn't actually use this module, but the log gets polluted with false positives, such as:

"Warning: The selector '.ui-widget-overlay' is undefined in CSS!"

In addition to the check for if(flag === 0) maybe it should check if customSelectors is empty?

Rename to postcss-custom-selectors

With an S at the end.
Make more sense don't you think guys?

Incompatible with :matches()

Input:

@custom-selector :--button button, [role="button"];
:matches(:--button):focus {
  outline-color: royalblue;
}

Expected output:

:matches(button, [role="button"]):focus {
  outline-color: royalblue;
}

Actual output:

button:focus,
[role="button"]:focus {
  outline-color: royalblue;
}

Is this on purpose? If so, that seems unnecessary as :matches has very good support.

custom selectors are pseudo classes

Should be

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading { /* styles for all headings */ }
:--heading + p { /* more styles */ }

http://dev.w3.org/csswg/css-extensions/#example-5b616cc6

We need to support that asap and add a warning message to deprecate previous behavior.
I will try to tackle this.

Use PostCSS 4.1 API

PostCSS Plugin Guidelines are mandatory right now. Because all of rules are about ecosystem health.

Incorrect indentation and spaces

Version: 4.0.1

Input:

@custom-selector :--button .button;

:--button {
  & i {
    color: black;
  }
}

Expected result:

.button i {
  color: black
}

Actual result:

.button i{
    color: black
}

Support `.pcss` file extension

Hello.

I've faced a problem: when I had selectors.pcss file with custom selectors and importFrom option — it didn't work, but there were no errors or warnings, nothing. Then I've tried to change file extension to .css — and it started work! And even errors about non-existent files.

So:

I think this plugin should support .pcss file extension (syntax of PostCSS with plugins not always CSS compatible).
There should be errors for "ignored" (non-supported) files (formats, file extensions) which specified in the importFrom option (and maybe somewhere else).

custom selectors are not applied when used in combination with postcss-nesting

Hello

I've been trying to use this plugin in combination with the postcss-nesting plugin but I'm getting an unexpected result.

@custom-selector :--class .test;

:--class {
    @nest &__base {
        width: 100%;
    }
    @nest &__container {
      background-color: red;
    }
}

expected:

.test__base {
   width: 100%;
}

.test__container {
  background-color: red;
}

but it is actually produced this:

:--class__base {
    width: 100%;
}

Any thoughts regarding this issue?

Many Thanks

Use the postcss-selector-matches

In order to support more complex cases, We can use the postcss-selector-matches to transform.

@MoOx Do you feel that you are directly dependent on another plugin?

/* input: */
@custom-selector :--any-link :link, :visited;
@custom-selector :--heading h1, h2, h3;

:--heading > a:--any-link {
  color: red;
}

/* Then use the postcss-selector-matches to transform: */
:matches(h1, h2, h3) > a:matches(:link, :visitedk) {
  color: red;
}

/* output: */
h1 > a:link, h2 > a:link, h3 > a:link, h1 > a:visited, h2 > a:visited, h3 > a:visited {
  color: red;
}

Two or more consecutive hyphens in selector outputs "undefined"

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

.Type--centerBlocks :--headings {
  margin-left: auto;
  margin-right: auto;
}

outputs:

undefined {
  margin-left: auto;
  margin-right: auto;
}

`npm test` crashes

[email protected] lint E:\Dmitry\git\postcss\postcss-custom-selectors eslint .

TypeError: Cannot read property 'visitClass' of undefined
at monkeypatch (E:\Dmitry\git\postcss\postcss-custom-selectors\node_modules\babel-eslint\index.js:199:40)

Upgrade babel-eslint or (upgrade eslint and removing babel-eslint) will fix it.

custom selectors with nesting

I use cssnest which use this plugin and postcss-nesting.

/* custom selectors and nesting */
@custom-selector :--heading .heading;
:--heading { 
  margin-top: 0;

  @nest &-small {
    margin-top: 2px;
  }

}

expect:

/* custom selectors and nesting */
.heading { 
  margin-top: 0

}
.heading-small { 
  margin-top: 2px
}

actual:

/* custom selectors and nesting */
.heading { 
  margin-top: 0

}
:--heading-small { 
  margin-top: 2px

}

@yisibl @MoOx , could you tell me the proper syntax to solve this problem?

"more complicated things"

http://dev.w3.org/csswg/css-extensions/#custom-selectors

// Arguments are specified with $foo.
// An arg before the pseudo-class captures the rest of the compound selector.
@custom-selector $rest:--n-siblings($n, $sel) {
  specificity: $sel;
  // assumes $sel is a selector, parses it and uses its specificity
  // otherwise, specificity is [0,1,0]
  expansion: $rest:nth-child(1 of $sel):nth-last-child($n of $sel),
    :nth-child(1 of $sel):nth-last-child($n of $sel) ~ $rest;
}

we need to check the spec sometimes about this :)

Wrong output when mixing selectors

@custom-selector :--button button, .button;
:--button a, b {}

gives

button a,
.button a, b {}

~~Which doesn't seems correct.~~ (edit: it is)

This lead to a bug into cssnext where

@custom-selector :--button button, .button;

:--button:matches(:focus) {}

:--button:matches(.is-focused, .is-broken) {}

gives

button:focus,
.button:focus {}

button:matches(.is-focused,
.button.is-focused, button:matches(.is-focused,
.button.is-broken {}

It's probably because this plugin currently use .selector instead of .selectors when playing with selectors :)

Bug reported by @jaredadobe

Not valid output

cssnext: 1.8.0

Input:

@custom-selector :--modal .ReactModal__Overlay;
@custom-selector :--modal-content .ReactModal__Content;

:--modal-content.users {
  width: 400px;
}

Output:

.ReactModal__Content {
  width: 400px;
}

Using multiple custom-selectors in one selector does not work

For example this:

@custom-selector :--button-types
  .btn-primary,
  .btn-success,
  .btn-info,
  .btn-warning,
  .btn-danger;

:--button-types, :--button-types:active {
  color: white;
}

compiles to this:

.btn-primary, :--button-types:active,
.btn-success, :--button-types:active,
.btn-info, :--button-types:active,
.btn-warning, :--button-types:active,
.btn-danger, :--button-types:active {
  color: white;
}

instead of this:

.btn-primary, .btn-primary:active,
.btn-success, .btn-success:active,
.btn-info, .btn-info:active,
.btn-warning, .btn-warning:active,
.btn-danger, .btn-danger:active {
  color: white;
}

lineBreak does not respect indentation

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

  article :--heading + p { 
    margin-top: 0;
  }

output

article h1 + p,
article h2 + p,
article h3 + p { 
    margin-top: 0;
  }

but should output

  article h1 + p,
  article h2 + p,
  article h3 + p { 
    margin-top: 0;
  }

You probably just need to join selector with \n + rule.before

Keep original code when a selector is undefined + add a warning

input

@custom-selector --heading h1, h2, h3, h4, h5, h6;

:--heading { /* styles for all headings */ }
:--heading + p { /* more styles */ }

output

undefined { /* styles for all headings */ }
undefined { /* more styles */ }

Should not put an undefined value and should warn using postcss messages api

Why not English

The members of postcss organization are from various countries but we use English to write the docs and source code comments for standardization.

@yisibl You should rewrite the readme in English.

Iterate over each item in a selector?

Is it possible to iterate over each item in a selector? Here's an example of the use case I'm thinking of (maybe there's another way to achieve it?). Say you have:

@custom-selector :--button
  button,
  .button;

@custom-selector :--disabled
  :disabled,
  .disabled;

and you wanted to end up with:

button:not(:disabled):not(.disabled),
.button:not(:disabled):not(.disabled) {
    /* some styles */
}

As opposed to

button:not(:disabled),
button:not(.disabled),
.button:not(:disabled),
.button:not(.disabled) {
    /* some styles */
}

Invalid spacing applied to custom-selector lists

Whatever whitespace separator is used between multiple custom-selectors is incorrectly applied to all of the resulting selectors except for the first, which retains the expected spacing.

Example with no whitespace

@custom-selector :--foo-hover
  .foo:hover;

@custom-selector :--bar-active
  .bar:active;

@custom-selector :--baz-disabled
  .baz.is-disabled;

/* with no space between custom-selectors */
:--foo-hover,:--bar-active,:--baz-disabled {}

...produces a valid result:

/* with no space between custom-selectors */
.foo:hover,.bar:active,.baz.is-disabled {}

Example with `SPACE`

@custom-selector :--foo-hover
  .foo:hover;

@custom-selector :--bar-active
  .bar:active;

@custom-selector :--baz-disabled
  .baz.is-disabled;

/* with space between custom-selectors */
:--foo-hover, :--bar-active, :--baz-disabled {}

...produces invalid result:

/* with space between custom-selectors */
.foo:hover, .bar :active, .baz .is-disabled {}

Example with `CRLF`

@custom-selector :--foo-hover
  .foo:hover;

@custom-selector :--bar-active
  .bar:active;

@custom-selector :--baz-disabled
  .baz.is-disabled;

/* with newline between custom-selectors */
:--foo-hover,
:--bar-active,
:--baz-disabled {
}

...once again, produces invalid result:

/* with newline between custom-selectors */
.foo:hover,
.bar
:active,
.baz
.is-disabled {
}

See the following live example for details: https://codepen.io/anon/pen/MZWWzw

It appears this regression appeared between versions 4.0.1 and 5.1.1 (aka versions 5.3.0 and 6.0.0 of postcss-preset-env).

Expand existing custom selectors in selector definition

It should be possible to define one custom selector based on another custom selector, like so:

Input:

@custom-selector --heading h1, h2, h3, h4, h5, h6;
@custom-selector --main-heading main > --heading;
--main-heading {
  font-style: italic;
}

Expected output:

main > h1,
main > h2,
main > h3,
main > h4,
main > h5,
main > h6 {
  font-style: italic;
}

Actual output:

main > --heading {
  font-style: italic;
}

csstools / postcss-custom-selectors Goto Github PK

postcss-custom-selectors's People

Contributors

Stargazers

Watchers

Forkers

postcss-custom-selectors's Issues

Example with no whitespace

Example with SPACE

Example with CRLF

Recommend Projects

Recommend Topics

Recommend Org

Example with `SPACE`

Example with `CRLF`