CSS classnames are being interpreted in a different order in production/development

user_2976601 0
Viewed 2833

I'm using create-react-app v2.

I have a component with several classnames: "x15 x14 login-form__field". In the HTML they are the same order in both environments.

In the production build, '.x14' appears in a higher priority than 'login-form__field'. They are reversed (and correct) in development. Any ideas? I know webpack does some hoisting and post-processing, but not sure why this would affect it.

Dev & Prod class order

DevelopmentProduction

Cheers

-- Update --

I've just noticed that the custom class is being loaded in as an inline style, which is why it gets priority. I assume webpack is doing this. Is there anyway we can tell webpack/CRA to load styles as stylesheets - not inline. Otherwise it means the styles are not representative of production.

-- Second Update --

Create-react-app uses 'styleLoader' for inline-styles in dev for hot reloading and generates CSS for production only. This makes sense.

create-react-app webpack reactjs sass css
2 Answers

Create-react-app uses 'styleLoader' for inline-styles in dev for hot reloading and generates CSS for production only.

user_29766010

If you are using css modules in your project and if by chance you are using composes in your classes then this can happen. If you are using composes in one class to inherit properties from another class in different file then ordering does not hold good for the purpose.

user_130129250
Related