Why is my style not ordering correctly on production/staging build that differ from local?

[Uniphix]

So the following images below is on my localhost started hot reloading app.

As you can see two fields are disabled, and no issues with the style however the image is on our build for static files of React/Styled-Components

This image shows that the fields are somewhat disabled (the left one still has "disabled" in the html tag) but the order of the "disabled" style is not the same as the one on localhost. As you can also see there is no "border-right" on the input/button when there should be. As the first image is the correct one.

The following two images below are localhost/production build css based in chrome.

localhost environment

production build environment, It is inspecting the exact same element which is the "NOW" button of the first two images.

NOW the question, what is causing this, anyone ever had the same issue? Any thoughts on how I can fix this frustrating issue?

I am also using an third party theme that is using styled components. I am not sure how it is different on the local (yarn start) vs (yarn build)

Much appreciated for assistance!

[mxstbr]

Can you share some of your code you use to define the components? This should absolutely never happen. Which version of styled-components are you using?

[apuntovanini]

This started to happen to us as well suddenly, I can't trace it, maybe some dependencies got updated and caused this. May it be related to attrs passed to styled-component?

Edit: we load bootstrap.scss in our build, and it seems it's placed before/after in two different pages, and that causes style overrides.

Not working example, styled-components style tags are loaded before .scss import

Working example (same stack), bootstrap (selected in the pic) and other scss are imported before styled-components style tags, and it works

[Uniphix]

After some pretty intense expermenting, I THINK I might have found what might be happening but I am still confused whether or why the build during "start.js" vs "build.js" should differ when compiling styles, they should function the exact same except one is optimized and the other isn't.

So this is what I did...

I have a wrapper file that wraps with the input aspect of the third party library "ant-design" https://ant.design/

When I don't include the wrapper code that is provided by another third party theme that we purchased, thinking it was their code that was at fault, however I am beginning to think that what they did should not produce the outcome we've been facing.

To help speed this up some, I am using the latest version of create-app-react (v3.3.0) (ejected) so I could modify the configuration files. I am using the version of styled-components (v4.4.1). Had this issue even in v3.4.9. I am also using ant-design (v3.22.0).

The reason why in one "input" datepicker on the first image from above had white background, and the timepicker on the right didn't was because the datepicker has a similar setup as the input.js I posted above, where that datepicker.style.js is overriding antd's default style, however this is only when compiled with 'build.js' and not with 'start.js' so it would be confusing.

When I don't use the datePicker from the theme library that is overriding antd, however the thing is it should inherit the antd's .ant-input[disabled] and yet it doesn't, it gets completely overriden as if antd isn't installed. Which is NOT created by styled-components and uses less from my understanding.

If I am forgetting anything just let me know and I'll be happy to share this. Apparently there are others that are having similar issues. One thing I do notice and I think it is how the optimized version of styled-components work?

I noticed during build.js that the <style></style> element is COMPLETELY empty however the sheet/style in the DOM contains the rules of the sytlesheet. I assume that is by designed?

input.js

import { Input } from 'antd';
import {
  InputWrapper,
  InputGroupWrapper,
  InputSearchWrapper,
  TextAreaWrapper,
} from './styles/input.style';
import WithDirection from '../../settings/withDirection';

const { Search, TextArea, Group } = Input;

const WDStyledInput = InputWrapper(Input);
const StyledInput = WithDirection(WDStyledInput);

const WDInputGroup = InputGroupWrapper(Group);
const InputGroup = WithDirection(WDInputGroup);

const WDInputSearch = InputSearchWrapper(Search);
const InputSearch = WithDirection(WDInputSearch);

const WDTextarea = TextAreaWrapper(TextArea);
const Textarea = WithDirection(WDTextarea);

export default StyledInput;
export { InputSearch, InputGroup, Textarea };

input.style.js

import styled from 'styled-components';
import { palette } from 'styled-theme';
import {
  transition,
  borderRadius,
  boxShadow,
} from '../../../settings/style-util';

const InputWrapper = ComponentName => styled(ComponentName)`
  &.ant-input {
    padding: 4px 10px;
    width: 100%;
    height: 35px;
    cursor: text;
    text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
    font-size: 13px;
    line-height: 1.5;
    color: ${palette('text', 1)};
    background-color: #fff;
    background-image: none;
    border: 1px solid ${palette('border', 0)};
    ${borderRadius('4px')};
    ${transition()};

    &:focus {
      border-color: ${palette('primary', 0)};
    }

    &.ant-input-lg {
      height: 42px;
      padding: 6px 10px;
    }

    &.ant-input-sm {
      padding: 1px 10px;
      height: 30px;
    }

    &::-webkit-input-placeholder {
      text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
      color: ${palette('grayscale', 0)};
    }

    &:-moz-placeholder {
      text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
      color: ${palette('grayscale', 0)};
    }

    &::-moz-placeholder {
      text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
      color: ${palette('grayscale', 0)};
    }
    &:-ms-input-placeholder {
      text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
      color: ${palette('grayscale', 0)};
    }
  }
`;
const InputGroupWrapper = ComponentName => styled(ComponentName)`
  &.ant-input-group {
    margin-bottom: 10px;

    .ant-select-auto-complete {
      margin-right: ${props => (props['data-rtl'] === 'rtl' ? '-1px' : '0')};
    }

    .ant-input {
      &:first-child {
        border-radius: ${props =>
          props['data-rtl'] === 'rtl' ? '0 4px 4px 0' : '4px 0 0 4px'};
      }
    }

    .ant-input-group-addon:not(:first-child):not(:last-child),
    .ant-input-group-wrap:not(:first-child):not(:last-child),
    > .ant-input:not(:first-child):not(:last-child) {
      padding: 0 7px;
      border-left-width: ${props =>
        props['data-rtl'] === 'rtl' ? '0' : '1px'};
      margin-right: ${props => (props['data-rtl'] === 'rtl' ? '-1px' : '0')};
    }

    .ant-input-group-addon {
      padding: 4px 7px;
      font-size: 12px;
      color: ${palette('text', 1)};
      text-align: center;
      background-color: ${palette('grayscale', 4)};
      border: 1px solid ${palette('border', 0)};
      ${transition()};

      &:first-child {
        border-right-width: ${props =>
          props['data-rtl'] === 'rtl' ? '1px' : '0'};
        border-left-width: ${props =>
          props['data-rtl'] === 'rtl' ? '0' : '1px'};
        border-radius: ${props =>
          props['data-rtl'] === 'rtl' ? '0 4px 4px 0' : '4px 0 0 4px'};
      }

      &:last-child {
        border-right-width: ${props =>
          props['data-rtl'] === 'rtl' ? '0' : '1px'};
        border-left-width: ${props =>
          props['data-rtl'] === 'rtl' ? '1px' : '0'};
        border-radius: ${props =>
          props['data-rtl'] === 'rtl' ? '4px 0 0 4px' : '0 4px 4px 0'};
      }

      .ant-select {
        .ant-select-selection {
          background-color: inherit;
          margin: -1px;
          border: 1px solid transparent;
          ${boxShadow()};
        }
      }
    }

    .ant-input-group-addon:not(:first-child):not(:last-child),
    .ant-input-group-wrap:not(:first-child):not(:last-child) {
      border-left: 0;
      border-right: 0;
    }

    & > .ant-input:not(:first-child):not(:last-child) {
      ${'' /* border-left: 0; */};
    }

    .ant-input:first-child:last-child {
      border-radius: 4px;
    }

    &.ant-input-group-compact > * {
      border-right-width: ${props =>
        props['data-rtl'] === 'rtl' ? '1px ' : '0'};
    }

    &.ant-input-group-compact > .ant-select > .ant-select-selection,
    &.ant-input-group-compact > .ant-calendar-picker .ant-input,
    &.ant-input-group-compact > .ant-select-auto-complete .ant-input,
    &.ant-input-group-compact > .ant-cascader-picker .ant-input,
    &.ant-input-group-compact > .ant-mention-wrapper .ant-mention-editor,
    &.ant-input-group-compact > .ant-time-picker .ant-time-picker-input {
      border-right-width: ${props =>
        props['data-rtl'] === 'rtl' ? '1px ' : '0'};
    }

    &.ant-input-group-compact > *:first-child,
    &.ant-input-group-compact > .ant-select:first-child > .ant-select-selection,
    &.ant-input-group-compact > .ant-calendar-picker:first-child .ant-input,
    &.ant-input-group-compact
      > .ant-select-auto-complete:first-child
      .ant-input,
    &.ant-input-group-compact > .ant-cascader-picker:first-child .ant-input,
    &.ant-input-group-compact
      > .ant-mention-wrapper:first-child
      .ant-mention-editor,
    &.ant-input-group-compact
      > .ant-time-picker:first-child
      .ant-time-picker-input {
      border-radius: ${props =>
        props['data-rtl'] === 'rtl' ? '0 4px 4px 0' : '4px 0 0 4px'};
      border-left-width: 1px
        ${'' /* border-right-width: ${props =>
        props['data-rtl'] === 'rtl' ? '1px' : '0'}; */};
    }

    &.ant-input-group-compact > *:last-child,
    &.ant-input-group-compact > .ant-select:last-child > .ant-select-selection,
    &.ant-input-group-compact > .ant-calendar-picker:last-child .ant-input,
    &.ant-input-group-compact > .ant-select-auto-complete:last-child .ant-input,
    &.ant-input-group-compact > .ant-cascader-picker:last-child .ant-input,
    &.ant-input-group-compact
      > .ant-mention-wrapper:last-child
      .ant-mention-editor,
    &.ant-input-group-compact
      > .ant-time-picker:last-child
      .ant-time-picker-input {
      border-radius: ${props =>
        props['data-rtl'] === 'rtl' ? '4px 0 0 4px' : '0 4px 4px 0'};
      border-right-width: ${props =>
        props['data-rtl'] === 'rtl' ? '0 ' : '1px'};
    }

    .ant-calendar-picker-clear,
    .ant-calendar-picker-icon {
      right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '8px')};
      left: ${props => (props['data-rtl'] === 'rtl' ? '8px' : 'inherit')};
    }
  }

  &.ant-input-group-lg {
    .ant-input,
    > .ant-input-group-addon {
      padding: 6px 10px;
      height: 35px;
    }
  }
`;

const TextAreaWrapper = ComponentName => styled(ComponentName)`
  &.ant-input {
    padding: 4px 10px;
    width: 100%;
    height: auto;
    cursor: text;
    font-size: 13px;
    line-height: 1.5;
    color: ${palette('text', 1)};
    background-color: #fff;
    background-image: none;
    border: 1px solid ${palette('border', 0)};
    ${borderRadius('4px')};
    ${transition()};

    &:focus {
      border-color: ${palette('primary', 0)};
    }

    &::-webkit-input-placeholder {
      color: ${palette('grayscale', 0)};
    }

    &:-moz-placeholder {
      color: ${palette('grayscale', 0)};
    }

    &::-moz-placeholder {
      color: ${palette('grayscale', 0)};
    }
    &:-ms-input-placeholder {
      color: ${palette('grayscale', 0)};
    }
  }
`;

const InputSearchWrapper = ComponentName => styled(ComponentName)`
  &.ant-input-affix-wrapper {
    .ant-input {
      padding: 4px 10px;
      width: 100%;
      height: 35px;
      cursor: text;
      font-size: 13px;
      line-height: 1.5;
      color: ${palette('text', 1)};
      background-color: #fff;
      background-image: none;
      border: 1px solid ${palette('border', 0)};
      ${borderRadius('4px')};
      ${transition()};

      &:focus {
        border-color: ${palette('primary', 0)};
      }

      &.ant-input-lg {
        height: 42px;
        padding: 6px 10px;
      }

      &.ant-input-sm {
        padding: 1px 10px;
        height: 30px;
      }

      &::-webkit-input-placeholder {
        color: ${palette('grayscale', 0)};
      }

      &:-moz-placeholder {
        color: ${palette('grayscale', 0)};
      }

      &::-moz-placeholder {
        color: ${palette('grayscale', 0)};
      }
      &:-ms-input-placeholder {
        color: ${palette('grayscale', 0)};
      }
    }

    .ant-input-suffix {
      right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '7px')};
      left: ${props => (props['data-rtl'] === 'rtl' ? '7px' : 'inherit')};
    }

    .ant-input-ant-input-prefix {
      right: ${props => (props['data-rtl'] === 'rtl' ? '7px' : 'inherit')};
      left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '7px')};
    }

    .ant-input-search-icon {
      color: ${palette('grayscale', 0)};

      &:hover {
        color: ${palette('primary', 0)};
      }
    }
  }
`;

export { InputWrapper, InputGroupWrapper, InputSearchWrapper, TextAreaWrapper };

withDirection.js

import React from 'react';

const rtl = document.getElementsByTagName('html')[0].getAttribute('dir');

const withDirection = Component => {
  class WithDirection extends React.Component {
    render() {
      return <Component {...this.props} data-rtl={rtl} />;
    }
  }
  return WithDirection;
};

export default withDirection;
export { rtl };

datePicker.style.js

import styled from 'styled-components';
import { palette } from 'styled-theme';
import { transition, borderRadius } from '../../../settings/style-util';

const AntDatePicker = ComponentName => styled(ComponentName)`
  .ant-input {
    padding: 4px 10px;
    width: 100%;
    height: 35px;
    cursor: text;
    font-size: 13px;
    line-height: 1.5;
    color: ${palette('text', 1)};
    background-color: #fff;
    background-image: none;
    border: 1px solid ${palette('border', 0)};
    ${borderRadius('4px')};
    ${transition()};

    &:focus {
      border-color: ${palette('primary', 0)};
    }

    &::-webkit-input-placeholder {
      color: ${palette('grayscale', 0)};
    }

    &:-moz-placeholder {
      color: ${palette('grayscale', 0)};
    }

    &::-moz-placeholder {
      color: ${palette('grayscale', 0)};
    }
    &:-ms-input-placeholder {
      color: ${palette('grayscale', 0)};
    }
  }
`;

export default AntDatePicker;

[apuntovanini]

May it be related to #2721 ?

[kitten]

Closing due to age of issue, lack of addressability, or lack of reproduction.