Select: borders disappear after building the project.

[carlosthe19916]

I've upgraded my app to @patternfly/react-core@4.106.2 but after doing it the borders of any Select component disappeared. The bug appears only after executing yarn build but not using yarn start.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
I've created a repository based on Create react app and this is the link https://github.com/carlosthe19916/pf4-select-border-bug

To reproduce the bug you need to clone the repository mentioned above using git clone, then install all dependencies of the project using yarn install and then:

• To see how the Select component should look like you can execute yarn start.
• To see how the Select's component borders disappear you can execute yarn build and then serve -s build.

You should see the following results:

"Select" component using yarn start:

"Select" component using yarn build:

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?

• For now, I will need to downgrade PF4 to a previous version.
• I've verified one by one and the latest working version was @patternfly/react-core@4.101.9.
• The problem seems to be that the variable --pf-c-select__toggle--before--BorderWidth is not recognized as a valid value after building the app using yarn build

What is your product and what release version are you targeting?
The version that generates this bug is @patternfly/react-core@4.106.2

[mcoker]

Hi @carlosthe19916! @redallen and I looked into this and it looks to be a bug with the way PostCSS is converting some rules for the select toggle's border.

Here is the SCSS for the toggle's border:

border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
border-style: solid;
border-width: var(--pf-c-select__toggle--before--BorderWidth);

However if you inspect the toggle's ::before element in dev tools when serving via yarn build, you'll see the toggle's border defined as:

border-left: var(--pf-c-select__toggle--before--BorderWidth) solid var(--pf-c-select__toggle--before--BorderLeftColor);
border-bottom: var(--pf-c-select__toggle--before--BorderWidth) solid var(--pf-c-select__toggle--before--BorderBottomColor);
border-right: var(--pf-c-select__toggle--before--BorderWidth) solid var(--pf-c-select__toggle--before--BorderRightColor);
border-top: var(--pf-c-select__toggle--before--BorderWidth) solid var(--pf-c-select__toggle--before--BorderTopColor);

These rules are invalid because the custom property --pf-c-select__toggle--before--BorderWidth has 4 values (for top, right, bottom, and left border widths), which is valid when used with border-width, but not with border-top, border-right, border-bottom, and border-left. I suspect what PostCSS is doing is seeing that we have a single value for border-width and assuming that value is used for all 4 sides, and not taking into consideration that the single value may be a custom property which holds multiple values.

You may try and see if you can find which PostCSS rule is doing this conversion and fix it that way, or you can use our PatternFly seed app instead!

[carlosthe19916]

I see, thanks for your time and reply @mcoker @redallen I appreciate it. I will invest some time to investigate how I can avoid having the behavior of PostCSS you mentioned. At this moment moving our app to Patternfly seed app is not an option, maybe in a near future.

If I find some workaround I will write it here in case someone else faces the same issue I have.

[redallen]

@carlosthe19916 If you're stuck with Create React App another option is to modify the webpack config to fix postcss-loader. I'd recommend yarn react-scripts eject and then modifying this part of config/webpack.config:

{
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      }

[mcoker]

@carlosthe19916 you can try this as a CSS fix. Just make sure this CSS is loaded after the PatternFly CSS so that it's able to override the original declarations.

.pf-c-select__toggle:before {
  border-top: var(--pf-c-select__toggle--before--BorderTopWidth) solid var(--pf-c-select__toggle--before--BorderTopColor);
  border-right: var(--pf-c-select__toggle--before--BorderRightWidth) solid var(--pf-c-select__toggle--before--BorderRightColor);
  border-bottom: var(--pf-c-select__toggle--before--BorderBottomWidth) solid var(--pf-c-select__toggle--before--BorderBottomColor);
  border-left: var(--pf-c-select__toggle--before--BorderLeftWidth) solid var(--pf-c-select__toggle--before--BorderLeftColor);
}

You may also be able to write it as:

.pf-c-select__toggle:before {
  border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
  border-style: solid;
  border-width: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
}

[carlosthe19916]

Regarding patternfly-react-seed

@mcoker I just want to report that the repository https://github.com/patternfly/patternfly-react-seed you suggested has exactly the same bug. Here is how you can reproduced the error:

• Clone my fork https://github.com/carlosthe19916/patternfly-react-seed. This is the only change I've made to that repo in order to reproduce the bug carlosthe19916/patternfly-react-seed@e4c35cf
• Execute npm install, npm run build, npm run start

You should see the Select I've created and the Select has no borders:

The command I've used to upgrade Patternfly dependencies was npm install @patternfly/react-icons@4.9.9 @patternfly/react-styles@4.9.4 @patternfly/react-core@4.106.2

I know this might be outside the scope of this repository but I just wanted to report it.

Regarding overriding the styles using CSS

Both options worked well and fixed the bug.

Option 1 worked well:

.pf-c-select__toggle:before {
  border-top: var(--pf-c-select__toggle--before--BorderTopWidth) solid var(--pf-c-select__toggle--before--BorderTopColor);
  border-right: var(--pf-c-select__toggle--before--BorderRightWidth) solid var(--pf-c-select__toggle--before--BorderRightColor);
  border-bottom: var(--pf-c-select__toggle--before--BorderBottomWidth) solid var(--pf-c-select__toggle--before--BorderBottomColor);
  border-left: var(--pf-c-select__toggle--before--BorderLeftWidth) solid var(--pf-c-select__toggle--before--BorderLeftColor);
}

Option 2 worked well:

.pf-c-select__toggle:before {
  border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
  border-style: solid;
  border-width: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
}

I haven't got too much time this week to go deeper and verify which rule of PostCSS is causing the problem but this upcoming week I should invest time on this. I'll write here if I have news.

[mcoker]

the repository https://github.com/patternfly/patternfly-react-seed you suggested has exactly the same bug

cc @redallen

[knokit]

I'm having a similar problem with the typeahead variant, it only shows borders around the input element:

Devel mode output looks like this:

Overriding the css rules as mentioned above adds the borders back to the toggle.

[redallen]

In the seed app the problem is OptimizeCSSAssetsPlugin in webpack.prod.js. You can remove it or pass it this config:

new OptimizeCSSAssetsPlugin({
   cssProcessorPluginOptions: {
    preset: ['default', { mergeLonghand: false }]
  }
})

The ultimate culprit is cssnano which incorrectly merges longhand CSS variable values which you can see in this example. I've opened cssnano/cssnano#1051 upstream.