!styled.md

// app.jsx
import React from "react";
import styled from "@fabyscore/styled.macro";


const Container = styled.div(`
  #@ {
    color: red;
  }

  #@[active] {
    color: blue;
  }
`,
  (props) => ({
    active: props.active === "1"
  })
);


function App() {
  return (
    <Container>
      <div>123</div>
      <div>abc</div>
    </Container>
  );
}

export default App;

===> Babel Compiler macht aus dem oben .scss Dateien und ändert den Code

• .scss sodass nesting, mixins, .... funktionieren
  • die klassen sind hash namen in prod und in dev einfach "__fs-filename-variable-hash" sodass man zeugs findet in den dev tools
  • die dateien haben immer __fs als Prefix sodass man sie aus git und aus vscode ausnehemn kann (__fs*.scss) ... die dateien werden neben der hauptdateien (z.b. app.jsx) erstellt, sodass auch relative imports funktionieren
• das 2te argument (die funktion) ist optional ... man braucht ja nicht immer verschiedene klassen je nach properties

// __fs-app-Container-adf234.scss (Existiert wirklich auf der Disk, ansonsten würde webpack die datei nicht finden)

.asdfds {
  color: red
}

.asdfds--active {
  color: blue
}

// ~app.jsx  (Die Datei wird nie auf die Disk geschrieben, nur in memory babel -> webpack)
import React from "react";

import "./__fs-app-Container-adf234.scss";

const Container = (props) =>{
  const resolveClassNamesFromProps = (props) => ({
    "asdfds--active": props.active === "1"
  });

  const className = classnames("asdfds", resolveClassNamesFromProps(props));
  
  return  <div className={className}>{props.children}</div>; 
};


function App() {
  return (
    <Container>
      <div>123</div>
      <div>abc</div>
    </Container>
  );
}

export default App;

===> Standard create react app scss/css Loader laufen und bundeln die style Dateien so wie immer

interpolation.md

// mit interpolation

const colorValue = "red";

// wenn immer statisch und die klasse nicht direkt benötigt wird
const Container = styled.div`
  color: ${colorValue};
  padding: ${(props) => props.padding}
`

===>

// __fs-app-Container-adf234.scss (Existiert wirklich auf der Disk, ansonsten würde webpack die datei nicht finden)

.asdfds {
  color: var(--fs-asdfs-color-435jiot);
  padding: var(--fs-asdfs-padding-asdfdf);
}

import "./__fs-app-Container-adf234.scss";

const Container = (props) =>{
   const style = {
    "--fs-asdfs-colorvalue": colorValue,
    "--fs-asdfs-padding-asdfdf": ((props) => props.padding)(props)
  };
  
  return  <div style={style}>{props.children}</div>; 
};

syntax.md

Andere Möglichkeiten:

// app.jsx
import React from "react";
import styled from "@fabyscore/styled.macro";

// wenn immer statisch und die klasse nicht direkt benötigt wird
const Container = styled.div`
  color: red;
`

// aus datei
const Container = styled.div("./styles/container.scss", (props) => ({
active: props.active === "1"
}))