New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Select: borders disappear after building the project. #5650
Comments
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:
However if you inspect the toggle's
These rules are invalid because the custom property 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! |
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. |
@carlosthe19916 If you're stuck with Create React App another option is to modify the webpack config to fix postcss-loader. I'd recommend {
// 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,
},
} |
@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.
You may also be able to write it as:
|
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:
You should see the
I know this might be outside the scope of this repository but I just wanted to report it. Regarding overriding the styles using CSSBoth options worked well and fixed the bug. Option 1 worked well:
Option 2 worked well:
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. |
cc @redallen |
In the seed app the problem is 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. |
…nified CSS for borders See patternfly/patternfly-react#5650
The CssMinimizerOptions where for a patternfly issue which is already resolved. patternfly/patternfly-react#5650
The CssMinimizerOptions where for a patternfly issue which is already resolved. patternfly/patternfly-react#5650
I've upgraded my app to
@patternfly/react-core@4.106.2
but after doing it the borders of anySelect
component disappeared. The bug appears only after executingyarn build
but not usingyarn 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 usingyarn install
and then:Select
component should look like you can executeyarn start
.Select
's component borders disappear you can executeyarn build
and thenserve -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?
@patternfly/react-core@4.101.9
.--pf-c-select__toggle--before--BorderWidth
is not recognized as a valid value after building the app usingyarn 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
The text was updated successfully, but these errors were encountered: