Question 108550 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – remove jss prefix from production build

I am using react version 17 and we use webpack to bundle our deps.

import React from "react";
import { Chip } from "@material-ui/core";
import {
  createGenerateClassName,
  createStyles,
  makeStyles,
  StylesProvider,
  Theme,
} from "@material-ui/core/styles";
// eslint-disable-next-line import/no-extraneous-dependencies
import { create } from "jss";
import shortid from "shortid";

const generateClassName = createGenerateClassName({
  productionPrefix: "my-prod-",
  seed: shortid.generate(),
});

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    whiteText: {
      color: "white",
      backgroundColor: "rgb(24, 190, 148)",
    },
    redText: {
      color: "white",
      backgroundColor: "rgb(233, 109, 118)",
    },
    grayText: {
      color: "gray",
      backgroundColor: "rgb(238,228,228)",
    },
  })
);

const Synced = "Synced";
const OutOfSync = "OutOfSync";
const Unknown = "Unknown";

const SyncStatusChip = ({ status }) => {
  const classes = useStyles();

  return (
    <StylesProvider generateClassName={generateClassName}>
      {status === Synced && <Chip size="small" label={status} className={classes.whiteText} />}
      {status === OutOfSync && <Chip size="small" label={status} className={classes.redText} />}
      {status === Unknown && <Chip size="small" label={status} className={classes.grayText} />}
    </StylesProvider>
  );
};

export default SyncStatusChip;

I read a lot of documentation and answers regarding the modification of class names. In our production builds whenever we use make styles we see that it adds a class that start with jss. Problem is that these names sometimes collide with other random generated class names and it creates a lot of UI issues.

even trying my own generate method to generate class names, i still see this stupid class names that start with jss. Sometimes, i wish i wasn’t doing frontend. :/

enter image description here

Tags:

3

Answers


  1. 0

    You can update the babel-plugin-jss configuration to use the useCSS option.

    // babel.config.js
module.exports = {
  plugins: [
    [
      "babel-plugin-jss",
      {
        useCSS: true,
      },
    ],
  ],
};
    Login or Signup to reply.
  2. 0

    You need to modify your webpack configuration. uses the MiniCssExtractPlugin to extract CSS into separate files. It also uses the postcss-loader to apply the postcss-preset-env plugin, which includes autoprefixer to add vendor prefixes to your CSS.

    webpack.config.js

    const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3,
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    }),
  ],
};
    Login or Signup to reply.
  3. 0

    you can use the useCSS option in the babel-plugin-jss configuration to generate CSS instead of injecting styles directly into the DOM, which can help reduce the size of the JavaScript bundle and avoid naming collisions with other randomly generated class names.

    When the useCSS option is set to true, JSS will generate CSS instead of injecting styles directly into the DOM. This means that the class names will no longer have the jss prefix and will instead be based on the generated CSS.

    Note that using the useCSS option may impact the performance of your application, as generating CSS can be slower than injecting styles directly into the DOM. However, it can help reduce the size of the JavaScript bundle and avoid naming collisions with other randomly generated class names. Be sure to test your application thoroughly after making any changes to the babel-plugin-jss configuration.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search