Unpredictable behavior from Custom CSS feature. Online Store editor session can't be published.

[BFWebTeam]

I was very excited for the potential of adding scoped, custom CSS to individual sections and so I wrote some markup and styles for a grid of icon boxes. My code is well under 500 characters, and does not violate any of the disallowed features that Shopify lists. Despite the care I took in writing this code however, I get the dreadfully vague error "Online Store editor session can't be published".

After some experimentation, I have come to the conclusion that the new CSS nesting features, as well as the "filter" property, were the culprits preventing my code from being saved. In my research, I also found that several other users here were having similar issues. To provide some examples, Zartifact7 can't save a section with a single innocuous content rule, Kaijann can't position their text, and Marvic cannot add a scale transform. I have seen a lot of discussion about Shopify forbidding certain CSS properties, but that doesn't make a ton of sense to me. None of the properties that caused issues for these users are mentioned in the Shopify article linked in the previous paragraph, and these properties are totally okay within theme css, style tags, and even inline styles.

Where can I find concrete information about all of the limitations of the custom CSS editor? Is Shopify explicitly forbidding certain CSS properties, or are they still working out bugs with the feature?

[Made4uo-Ribe]

Hi @BFWebTeam 

Since the Custom CSS code is modified to later add with the section ID to make it unique, you cannot add multiple selectors.  One thing I always remember is to use only one or two class that is unique to that section for it to work. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[BFWebTeam]

I'm not sure what exactly you mean by "multiple selectors," but selectors have not been an issue with my style rules. To clarify, my code works fine; I'm looking for information about strange behavior of the Custom CSS editor that Shopify doesn't provide documentation on.

To illustrate what I mean by "strange behavior," I have provided the code that caused it below.

.ft {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ft-sl {
  background-color: var(--colorNav);
  transition: 0.4s background ease;
  color: var(--colorNavText);
  padding: 12px;
  display: flex;
  align-items: center;
}
img {
  width: 64px;
  margin-right: 12px;
  filter: invert();
}
.ft-sl:hover {
  background-color: var(--colorScheme2Bg);
}
@media screen and (max-width: 1024px) {
  .ft {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 425px) {
  .ft {
    display: flex;
    flex-direction: column;
  }
  .ft-sl + .ft-sl {
    margin-top: 12px;
  }
}

This is the code I wrote, which describes a feature container (.ft) that holds a responsive grid of feature selectors (.ft-sl). Although the code is under 500 characters and doesn't include any of the CSS features that Shopify disallows, the Store Editor refused to save it or explain why. I spent a good 15 minutes troubleshooting, and it wasn't until I removed the filter: invert(); rule that I was finally able to save my styles.

Based on this behavior, and the comments that users have made on the forums about similar issues, it seems that there are several CSS properties that Shopify forbids in the Custom CSS editor. I am hoping to find a full list of these forbidden properties, so that I can design and style my store with these limitations in mind rather than needing to figure them out by trial and error.

[btf85]

Having this issue as well. Would really like to see this addressed.