Need Help with CSS and React Rescript

1

I am reading the documentation on the React Rescript website on using CSS and almost nothing seems to work for me and stackoverflow and google are also not helping.

  1. Inline Styles

The documentation gives a simple example <div style={ReactDOM.Style.make(~color="#444444", ~fontSize="68px", ())} /> but what if the CSS property has hyphens? ex: list-style-type: none;? the code doesn’t compile and there is no guidance on how to use CSS properties with “-”

  1. Global CSS

I followed the documentation and wrote this code

%%raw("require('./main.css')")

@react.component
let make = () => {
  <header>
    <h1> { React.string("This is my tutorial") } </h1>
    <nav>
      <ul className="menu">
        <li> { React.string("Menu") } </li>
        <li> { React.string("About") } </li>
        <li> { React.string("Contact") } </li>
      </ul>
    </nav>
  </header>
}

doesn’t work throws error “SyntaxError: Unexpected token ‘.’”

  1. CSS Modules

changed my code to

@module external styles: {..} = "./main.css"

@react.component
let make = () => {
  <header>
    <h1> { React.string("This is my tutorial") } </h1>
    <nav>
      <ul className={styles["menu"]}>
        <li> { React.string("Menu") } </li>
        <li> { React.string("About") } </li>
        <li> { React.string("Contact") } </li>
      </ul>
    </nav>
  </header>
}

Doesn’t work same error.

Posted on stackoverflow and one line tip on using post-processors like webpack because browser doesn’t understand CSS but there is no guidance how to exactly set this up for a rescript project and I’m totally lost.

Can anyone help? I have checked in my whole code here just in case if you want to look at my full project.

2

Rescript just compiles your .res files into .js files, you will then need another tool to transform it into something that browsers can understand. Things like require and importing css files aren’t standard features for Browsers. The current popular options are webpack, vite, and roll-up, and I think vite is the simplest

Then what you do is open two terminals, one for rescript to process your files and then another one to bundle it into a web server. Then create a main.js file that imports your main rescript.bs.js file and runs it

If you’re new to bundlers it might sound complicated, but fortunately there’s a bunch of templates out there for you. Here’s one: https://github.com/rescriptbr/vite-rescript-starter

3

thanks for your response. Is there a web pack tutorial which shows how I can achieve the same? I found many many web pack tutorials but not something which is specific for this task.

Also, since I haven’t heard of vite ever before I am attending this tutorial on vite now STOP Wasting Time! Your Next App Needs Vite! | JS, Typescript, React - YouTube

4

Also in the meantime, can someone tell me how to use properties with hyphens when using inline? inline seems to be the fastest way to continue learn without getting bogged down by webpack and vite.

5

Also more confused the installing your vite plugin :frowning: what is the entry point of “main.jsx”? this is so weird. why not have the same entry point of index.html?

6

Check out the docs on react inline styles here DOM Elements – React (reactjs.org)