Building React Apps with Create React App 2.0 using Stylus for CSS picture
Image by Afrowave

Building React Apps with Create React App 2.0 using Stylus for CSS

8 minute read View comments

I started on JavaScript a long time back but got thrown into to back-end web development and I came to love Python more. However, as front-end development progressed, ReactJS (aka ‘React’) became what I need to manipulate the front end as a replacement for Django’s Template language as I looked to go into API deployment.

I love, and I am not alone, how Python uses white space and indentation. The programming context switching, as I moved from back-end development to front-end development and back a few times a day, was frustrating. My CSS pre-processor of choice at the time was LESS. According to the hype then, the upgrade to LESS was SASS. But just as I was getting to look as SASS, I came across Stylus. SASS later grew into SCSS.

On the Web, SASS is the most popular and it should be so, especially for those who are “traditional” frontend devs who started their trade as UI designers who went into HTML/CSS. But for those coming from a Python background, Stylus just makes sense.

With the introduction of the Create React App — CRA, it became easier to spin up an app to try out something without going into configuring Webpack, the same way, every time. With the introduction of CRA 2.0, upgrades have been done to Webpack as well as embedded Sass and CSS modules by taking advantage of Code Splitting.

Adding Stylus

To get into React properly, I purchased the Wes BosReact For Beginners” course and I was very happy to see that Wes uses Stylus on this series to do his CSS styling. So I put together my pipeline to use Stylus but with Yarn as my package manager. I also made sure that I got Source Maps from the index.styl file. Here is my configuration:

{
  "name": "react_stylus",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000",
  "scripts": {
    "dev": "react-scripts start",
    "start": "serve --single ./build",
    "watch": "concurrently --names \"webpack, stylus\" --prefix name \"yarn dev\" \"yarn styles:watch\"",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "styles": "stylus -u autoprefixer-stylus ./src/index.styl -o ./src/index.css",
    "styles:watch": "stylus -u autoprefixer-stylus -m ./src/index.styl -w ./src/index.styl -o ./src/index.css"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "^2.1.1",
    "react-router-dom": "^4.2.2",
    "react-transition-group": "^2.2.1",
    "serve": "^10.1.1",
    "stylus": "0.54.5",
    "autoprefixer-stylus": "0.14.0"
  },
  "devDependencies": {
    "axios": "0.18.0",
    "raven-js": "3.27.0",
    "concurrently": "4.1.0"
  },
  "engines": {
    "node": "10.13.0",
    "npm": "6.4.1",
    "yarn": "1.12.3"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

About Source Maps

I first settled on Gulp to streamline my frontend development process and then I later adopted Codekit because it abstracted Gulp rather well and made my front-end development work “simple”. Codekit does everything I would want very well. With the necessary settings, one can compile a React application. But to be on the cutting edge of development, one needs to run Yarn on the CLI.

I started up everything. The project I was migrating to React had previously been done in Django and the styling used Stylus. I found that the CSS Source maps made from the Stylus files were not showing up in the Chrome or Firefox DevTools.

I found that the yarn dev server injects the CSS files into the head tag of the index.html and the Chrome or Firefox DevTools cannot follow the source map reference at the bottom of the index.css file and into the index.styl file. Firefox DevTools at least references the <inline styles sheet> in the Style Editor. Chrome DevTools, in the Sources tab, one sees where the index.css has been injected into.

So it seems that it currently not possible to access the Source Maps through DevTools for a CRA. I hope I am wrong and I would love comments from anyone who has cracked this.

React Styling 2.0

Can I break down my index.styl into component sized styles and add then into a component?

Yes and no.

Recently CRA 2.0+ has added the ability to add a Sass style sheet into the App.js as App.sass or App.scss. One can do better, as explained on that page:

Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in <AcceptButton>and <RejectButton> components, we recommend creating a <Button> component with its own .Button styles, that both <AcceptButton> and <RejectButton> can render (but not inherit).

“Yes” if I use Sass and build my monolith index.sass file and add it to the index.js or if I break down my styles to fit into components such as the <Button> component mentioned earlier.

“No” if I want to use Stylus in either my `index.styl` or `App.styl`. For Stylus, I have preprocess to get my CSS and then add it to my CRA.

I hope Stylus is added to CRA one day. Fingers crossed. However, on my next projects, I will go with Styled Components

This article was first published on Medium.

If you liked this article, go ahead, click and fill out the form below and let us begin a conversation about your project.

Project Form

Tagged under: React javascript Stylus Sass

Last updated: Feb. 19, 2019, 1:06 p.m.

blog comments powered by Disqus