Kevin Powell - Community•2w ago

post-css adding spaces after colons?

I have a vite/react project which came with post-css. just noticed that it keeps breaking my site with these spaces. in my stylesheet style.css there are no spaces, but in the generated build css file main.7cbfcw55.css i have all of these spaces in all kinds of places where there are colons. anyone experienced this before ?

21 Replies

Rägnar O'ock•2w ago

Css isn't spacing sensitive outside of space separated values, so whitespace around colons should not lead to any issue. Could you show a case of it breaking your site in the browser? (the generated file looks ok to me at a glance)

clevermissfoxOP•2w ago

It's breaking the styles. Like the li::before doesn't exist when it's li: before instead of li::before . There was a footer: has(.taskbar) where the styles in the rule block weren't loading.

Rägnar O'ock•2w ago

oh I didn't think to look at selectors

clevermissfoxOP•2w ago

Firefox esp seems to be upset

Rägnar O'ock•2w ago

there might be something miss configured in your build tools or maybe you are using nesting incorrectly (I haven't dabbled too much in native nesting so it's possible you are doing something "illegal" and the compiler is doing its best to make it work) it might be something with combining & and pseudo-elements

clevermissfoxOP•2w ago

It's always possible I'm doing something wrong but even the simplest selector is creating these spaces all throughout

css 
[Data-theme] {
Background: var(--theme);
& footer:has(.taskbar) {
position:  fixed; 
}
}

css 
[Data-theme] {
Background: var(--theme);
& footer:has(.taskbar) {
position:  fixed; 
}
}

I dont think all my selectors that are broken are doing something illegal. I don't know all the nuances of nesting but the above selector at least should be fine. I was wondering[hoping] if this is a common issue with postcss that was easy to fix.

Rägnar O'ock•2w ago

https://codepen.io/ragnar_ock/pen/VYwJWxm that snippert looks like it works tho (minus the caps becaus I suppose you're on phone)

Rägnar O'ock

CodePen

css nesting debug

...

Rägnar O'ock•2w ago

that li::before thing is legal, so it might be something with your post-css config not allowing nesting

clevermissfoxOP•2w ago

Yes it works (and yes the cap is because I'm on mobile); the problem comes in when it's built and run through postCSS. My nesting all works as it is in my stylesheet ; the build css file is what results in the spaces and I'm just assuming it's a postCSS thing (which I don't use enough to know well, it just came with my react or vite install ) I know it used to be an issue with nesting but I read/heard on knows videos it was fixed to be able to use psrduo elements in nesting. Is that what you're referring to ?

Rägnar O'ock•2w ago

yeah

clevermissfoxOP•2w ago

My selector is

css 
& li::before {}

css 
& li::before {}

not

css 
li { 
&::before {}
}

css 
li { 
&::before {}
}

Just FYI

Rägnar O'ock•2w ago

you used to not be allowed to append stuff to the & without a space but it's possible that you are missing a post-css plugin to support nesting, I dunno what your setup looks like so I would suggest looking at the vite config file or any post-css config file

clevermissfoxOP•2w ago

Yeah I'm not sure how often postcss is maintained and updated and if it's keeping up What do I look for ? I dont know if I have a post css config bit I know I have vite.config

Rägnar O'ock•2w ago

post-css itself is the build tool, the support for language syntax are provided by plugins, so you might not have the one required for css-nesting support

clevermissfoxOP•2w ago

I would share it but it's not in my repo must be in the gitignore Thanks for the suggestions, I'll give it a look see tmrw

Rägnar O'ock•2w ago

https://vite.dev/guide/features#postcss look for a file named postcss.config.js or something like it it's possible you don't have one so postcss uses a default config that doesn't include the postcss-nesting plugin the plugin doc for reference : https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme no problem, keep me posted

clevermissfoxOP•2w ago

Appreciate it ! I know nothing about post css, makes sense that if I need a nesting plugin and don't have one its getting confused

clevermissfoxOP•2w ago

whoops... this isnt a vite project. i usually use vite for react so i just assumed but i think this is the one i started with CRA... so no vite.config. here are all the postcss dependancies in my node_modules

clevermissfoxOP•5d ago

still looking for a postcss.config.js Okay so it looks likek postcss-nested was already being used as part of the default tailwind module so i instaled it seperately and created a postcss-config file. unfortuantely no changes. I've tried rewriting as well as flattening selectors (so they arent nested). Im just not finding a pattern.

/* original style.css example */
[popover]:is([id="start-menu-context"]):popover-open ul {
border-radius: var(--br-default);
 & > li::before {
    content: "";
    position: absolute;
}

/* stylesheet main.css after build */
[popover]:is([id=start-menu-context]):popover-open ul {
    border-radius: .25em;
    border-radius: var(--br-default);
/* space created */
 &>li: before {
    content: "";
    position: absolute;
  }

}

/* original style.css; example with nested pseudo el and no issue in build stylesheet */
  .start-btn {
    background-image: url("/public/assets/icons/apple/icon-apple_logo-white.svg");

    &::before {
      bottom: 0;
      transform: translateY(130%);
    }
  }

/* built/rendered main.css; nested pseudo element with no issue */
.start-btn {
        background-image: url(/static/media/icon-apple_logo-white.017a1517d1c139ab74d4.svg);
        &:before {
            bottom: 0;
            transform: translateY(130%)
        }
    }

/* style.css original using :has() */
dialog[open] {
&:has(.resume-wrapper) {
    background-color: var(--clr-bg-body);
  }

  &:has(iframe[title*="Portfolio Item"]):not(.minimized) {
    height: 100%;
  }
}

/* built/rendered main.css- using :has() with no weird space */
dialog[open] {
&:has(.resume-wrapper) {
        background-color: oklch(0 0 0);
        background-color: var(--clr-bg-body);
        
    }
 &:has(iframe[title*="Portfolio Item"]): not(.minimized) {
        height:100%
    }
}

/* original style.css example */
[popover]:is([id="start-menu-context"]):popover-open ul {
border-radius: var(--br-default);
 & > li::before {
    content: "";
    position: absolute;
}

/* stylesheet main.css after build */
[popover]:is([id=start-menu-context]):popover-open ul {
    border-radius: .25em;
    border-radius: var(--br-default);
/* space created */
 &>li: before {
    content: "";
    position: absolute;
  }

}

/* original style.css; example with nested pseudo el and no issue in build stylesheet */
  .start-btn {
    background-image: url("/public/assets/icons/apple/icon-apple_logo-white.svg");

    &::before {
      bottom: 0;
      transform: translateY(130%);
    }
  }

/* built/rendered main.css; nested pseudo element with no issue */
.start-btn {
        background-image: url(/static/media/icon-apple_logo-white.017a1517d1c139ab74d4.svg);
        &:before {
            bottom: 0;
            transform: translateY(130%)
        }
    }

/* style.css original using :has() */
dialog[open] {
&:has(.resume-wrapper) {
    background-color: var(--clr-bg-body);
  }

  &:has(iframe[title*="Portfolio Item"]):not(.minimized) {
    height: 100%;
  }
}

/* built/rendered main.css- using :has() with no weird space */
dialog[open] {
&:has(.resume-wrapper) {
        background-color: oklch(0 0 0);
        background-color: var(--clr-bg-body);
        
    }
 &:has(iframe[title*="Portfolio Item"]): not(.minimized) {
        height:100%
    }
}

(cont'd) (cont'd)

/* original style.css- using :has() that renders with a space */ 
[data-theme=apple] {
footer:has(.taskbar) {
    bottom: 1rem;
  }

  footer:has(.taskbar)::-webkit-scrollbar {
    display: none;
  }
}

/* rendered/built main.css- :has() with space */
[data-theme=apple] {
footer: has(.taskbar) {
        bottom:1rem;
    }

    footer: has(.taskbar)::-webkit-scrollbar {
        display:none
    }
}

/* original style.css- using :has() that renders with a space */ 
[data-theme=apple] {
footer:has(.taskbar) {
    bottom: 1rem;
  }

  footer:has(.taskbar)::-webkit-scrollbar {
    display: none;
  }
}

/* rendered/built main.css- :has() with space */
[data-theme=apple] {
footer: has(.taskbar) {
        bottom:1rem;
    }

    footer: has(.taskbar)::-webkit-scrollbar {
        display:none
    }
}

weirdly i am finding that if i give the elements a class , so far, the two ive tested- the spacing is resolved.

/* originally... */
[popover]:is([id=start-menu-context]):popover-open ul {
border-radius: .25em;
border-radius: var(--br-default);
  &>li: before {
  background-image:linear-gradient(90deg,#cca6d4,#a588ca);
  background-image: linear-gradient(to right,var(--clr-brand-accent),var(--clr-brand-accent-2));
  
  }

  &>li: has(:focus-within,:hover) {
  outline:1px solid -webkit-tap-highlight-color;
    &:before {
    width: 100%
    }
  }

  &>li>* {
  line-height: 1;
  outline: none
  }
}
/* after giving the li's a class of 'start-menu-context-item ' */
popover]:is([id=start-menu-context]):popover-open ul {
border-radius: .25em;
border-radius: var(--br-default);
& .start-menu-context-item:before {
background-image: linear-gradient(90deg,#cca6d4,#a588ca);
background-image: linear-gradient(to right,var(--clr-brand-accent),var(--clr-brand-accent-2));

}
& .start-menu-context-item:has(:focus-within,:hover) {
outline: 1px solid -webkit-tap-highlight-color;
&:before {
width: 100%
}
}

& .start-menu-context-item>* {
line-height: 1;
line-height: var(--lh-1);
outline: none
}
}

/* originally... */
[popover]:is([id=start-menu-context]):popover-open ul {
border-radius: .25em;
border-radius: var(--br-default);
  &>li: before {
  background-image:linear-gradient(90deg,#cca6d4,#a588ca);
  background-image: linear-gradient(to right,var(--clr-brand-accent),var(--clr-brand-accent-2));
  
  }

  &>li: has(:focus-within,:hover) {
  outline:1px solid -webkit-tap-highlight-color;
    &:before {
    width: 100%
    }
  }

  &>li>* {
  line-height: 1;
  outline: none
  }
}
/* after giving the li's a class of 'start-menu-context-item ' */
popover]:is([id=start-menu-context]):popover-open ul {
border-radius: .25em;
border-radius: var(--br-default);
& .start-menu-context-item:before {
background-image: linear-gradient(90deg,#cca6d4,#a588ca);
background-image: linear-gradient(to right,var(--clr-brand-accent),var(--clr-brand-accent-2));

}
& .start-menu-context-item:has(:focus-within,:hover) {
outline: 1px solid -webkit-tap-highlight-color;
&:before {
width: 100%
}
}

& .start-menu-context-item>* {
line-height: 1;
line-height: var(--lh-1);
outline: none
}
}

or this:

/* originally these were the rendered results */
[data-theme=apple] {
  footer: has(.taskbar) {
  bottom:1rem;
 
  }

  footer: has(.taskbar)::-webkit-scrollbar {
  display:none
  }
}

/* added a class.. */
[data-theme=apple] {
& .footer:has(.taskbar) {
        bottom: 1rem;
        
    }

    & .footer:has(.taskbar)::-webkit-scrollbar {
        display: none
    }
}

/* originally these were the rendered results */
[data-theme=apple] {
  footer: has(.taskbar) {
  bottom:1rem;
 
  }

  footer: has(.taskbar)::-webkit-scrollbar {
  display:none
  }
}

/* added a class.. */
[data-theme=apple] {
& .footer:has(.taskbar) {
        bottom: 1rem;
        
    }

    & .footer:has(.taskbar)::-webkit-scrollbar {
        display: none
    }
}

i'm seeing it more with attribute selectors and pseudo elements :popover-open [data-btn], etc. Tried experimenting with :where() and :is() etc. curiouser and curiouser next im testing if this:

[data-theme=microsoft] {
  dialog[open] {
    .utility-bar {
       & :is([data-btn-minimize-dialog]: is(:hover,:focus-visible),[data-btn-maximize-dialog]:is(:hover,:focus-visible)) {
                background-color:oklch(22% 0 0);
                background-color: var(--clr-mic-neutral-650)
            }

            & :is([data-btn-close-dialog]: is(:hover,:focus-visible)) {
                background-color:#c42c1d;
                background-color: var(--clr-mic-dialog-btn-close)
            }
    }
  }
}

[data-theme=microsoft] {
  dialog[open] {
    .utility-bar {
       & :is([data-btn-minimize-dialog]: is(:hover,:focus-visible),[data-btn-maximize-dialog]:is(:hover,:focus-visible)) {
                background-color:oklch(22% 0 0);
                background-color: var(--clr-mic-neutral-650)
            }

            & :is([data-btn-close-dialog]: is(:hover,:focus-visible)) {
                background-color:#c42c1d;
                background-color: var(--clr-mic-dialog-btn-close)
            }
    }
  }
}

improves with classes instead of using the data-attr yep:

[data-theme=microsoft]{
 & .utility-bar {

            & :is(.btn-min,.btn-max):is(:hover,:focus-visible) {
                background-color: oklch(22% 0 0);
                background-color: var(--clr-mic-neutral-650)
            }

            & .btn-close:is(:hover,:focus-visible) {
                background-color: #c42c1d;
                background-color: var(--clr-mic-dialog-btn-close)
            }
        }
}

[data-theme=microsoft]{
 & .utility-bar {

            & :is(.btn-min,.btn-max):is(:hover,:focus-visible) {
                background-color: oklch(22% 0 0);
                background-color: var(--clr-mic-neutral-650)
            }

            & .btn-close:is(:hover,:focus-visible) {
                background-color: #c42c1d;
                background-color: var(--clr-mic-dialog-btn-close)
            }
        }
}

so anyone in the future, try changing any element selectors or attribute selectors to classes also it is appearing that cssnano is the problem, not my version of postcss-*

dys 🐙•5d ago

I was going to ask why you still thought PostCSS was running once you discovered CRA made the app. CRA is ancient & uses very old tools. That it wouldn't support nesting is not surprising, though screwing up pseudoelements is surprising since they predate even CRA.

clevermissfoxOP•5d ago

i dont know anything about CRA - this was a one off project i started apparently using CRA and built on top of instead of starting anew. But it certianly uses a lot of PostCSS packages , or at least has them in the dependancies. i screenshot them further up in the thread .

Gaming

Programming

post-css adding spaces after colons?

Did you find this page helpful?