Feature: Scss/Sass style "nesting"

[saravanabalagi]

How far are we from doing "nested styles"?

.button {
  margin: 5px;
  flex-direction: row;
  > * { margin: 0 5px; }
  > .label { color: green; }
  > .icon { width: 20px; height: auto; }
}

[kristerkari]

Thanks!

Unfortunately it's not possible in React Native because it does not have a DOM tree like Web has.

[VityaSchel]

Thanks!

Unfortunately it's not possible in React Native because it does not have a DOM tree like Web has.

Hello! Please please please do something with it, it hurts my brain. It's not about functionality, it's about code (styles) being clear and easy to read. I'm crying when I have to switch between nesting <-> not-nesting when working on react and react-native projects. Is there any way I can use babel or anything to rewrite nested classes to plain-tree structure before they are processed by anything else?

I found a workaround for now. Use patch-package and this:

css = css.replaceAll(/( *\.\w+){2,} {/g, '$1 {')

Put this after 109 line in /node_modules/react-native-sass-transformer/index.js

So it looks like this:

// ...

module.exports.transform = function(src, filename, options) {
  if (typeof src === "object") {
    // handle RN >= 0.46
    ({ src, filename, options } = src);
  }

  if (filename.endsWith(".scss") || filename.endsWith(".sass")) {
    var css = renderToCSS({ src, filename, options });
    css = css.replaceAll(/( *\.\w+){2,} {/g, '$1 {') // PASTE THIS
    var cssObject = renderCSSToReactNative(css);
    return upstreamTransformer.transform({
      src: "module.exports = " + JSON.stringify(cssObject),
      filename,
      options
    });
  }
  return upstreamTransformer.transform({ src, filename, options });
};

module.exports.renderToCSS = renderToCSSPromise;

It only works with basic nesting but it should work. I hope @kristerkari will resolve this somehow.

[lortschi]

@VityaSchel is completely right on this. The basic feature of Sass is to have the nesting of element-styles. Whitout this basic feature we could also use plain CSS and producing extra data overheads. I wonder why this issue was closed?

[kristerkari]

The basic feature of Sass is to have the nesting of element-styles. Whitout this basic feature we could also use plain CSS and producing extra data overheads. I wonder why this issue was closed?

Like I said above, React Native does not have a DOM and instead the styles are assigned directly to the elements like this: <View style={mystyles.blue} />. This is why the concept of nesting styles is not possible without creating some hack that separates the styles before passing them to Sass compiler and the Sass transformer. I really don't see the worth in doing that since you can already just write the styles without using nesting, so no hacky workarounds are needed.

That said, I'm also happy to hear about some better ways of handling the nesting if you have ideas related to it.