styling.md

Styling

LJAS supports CSS for all frontend-related projects:

Starter Project Name	JavaScript	TypeScript
Basic Browser	View Source	View Source
Basic Electron	View Source	View Source
React + Browser	View Source	View Source
React + Electron	View Source	View Source
React + Express + MongoDB with SSR	View Source	View Source
React + Express + PostgreSQL with SSR	View Source	View Source

Contents

• Getting Started
• Linting
• Formatting
• Examples
• Adding Support for Sass

Getting Started

You can create a .css anywhere in the src/ directory and import it in any ECMAScript file. So for example you could create src/index.css and then import it in src/index.js like so:

import "./index.css";

Then webpack will handle how the CSS gets loaded in the bundle during the build process.

You can see an example of this in the buildCss ljas-webpack example.

Linting

LJAS uses Stylelint to lint all CSS-related code. You can run it with the following package.json script:

npm run lint:styles

Stylelint has a --fix option which will cause it to automatically fix as many problems as possible. A shortcut for passing this option is available as the following script:

npm run lint:styles:fix

Instead of using package.json scripts, we suggest enabling Stylelint in your code editor to lint in real-time. We show how to set this up with Visual Studio Code (VS Code) in the "Install Extensions" section in the "Code Editors" document.

To learn how to configure Stylelint, read the Stylelint configuration document.

Formatting

LJAS uses Prettier to format all code. To identify all files with code style issues, run the following package.json script:

npm run format

Note that this is an alias for npm run format:check which only identifies issues and does not make any changes to files.

If you want to automatically address all of these code style issues, use the following script:

npm run format:write

Instead of using these scripts, we suggest enabling formatting on save with Prettier in your code editor. We show how to set this up with VS Code in the "Install Extensions" section in the "Code Editors" document.

To learn how to configure Prettier, read the Prettier configuration document.

Examples

• *chan: Express server that server-side renders a React frontend
• Asset Test: Test for LJAS's asset loading capabilities
• Markdown Editor: Markdown editor desktop app
• Tic-Tac-Toe: A tic-tac-toe game

Adding Support for Sass

The frontend starter projects only support CSS by default since that is the fundamental stylesheet language, but it doesn't take much to setup Sass.

Install Dart Sass and sass-loader with the following command:

npm install sass@~1.64.2 sass-loader@^13.3.2

Next, you will need to replace the CSS-related ljas-webpack config parts in the frontend webpack configuration with the equivalent Sass config parts.

So, for example, in a frontend webpack development config file, you'd replace injectCss with injectSass. Then in a frontend webpack production config file, you'd replace buildPrefixedCss with buildPrefixedSass.

Finally, the last thing to do is configure Stylelint to cover .scss files. Install the standard Stylelint SCSS config with the following command:

npm install stylelint-config-standard-scss@^11.0.0 --save-dev

Then update .stylelintrc.json to include stylelint-config-standard-scss in the extends property like so:

{ "extends": ["stylelint-config-standard-scss"] }

You should be able to handle .sass and .scss files in your JavaScript or TypeScript code now.

Although everything should be working, you should also update the lint:styles package.json script to look for .sass and .scss files using something like this command:

"lint:styles": "stylelint \"src/**/*.{sass,scss}\"",

You can find examples of Sass being configured in the Counter and Counter, React version examples.