SASS compiling

[lanesCSO]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When running sass compiler on my .scss file https://github.com/CSOIreland/CSOBSTheme/blob/main/dist/app.bootstrap.guideline.scss A few class groups are dissapearing e.g.

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after { 

and

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

I have tried webpack, live sass compiler and dart sass compiler and all give same output.

Any insight into this behavior would be much appreaciated.

Reduced test cases

Have tried three different sass compilers

Webpack, live sass compiler and dart sass compiler

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

5.3.3

[julien-deramond]

Hello @lanesCSO
FYI I've transformed your issue into a GH Q&A Discussion first.

I've cloned your project and run:

npm i sass@latest
node_modules/.bin/sass app.bootstrap.guideline.scss > test.css

After analyzing your Sass files and compilation.

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {

For this use case, it's probably because you don't use autoprefixer in your build. On your side, we have our .browserlistrc and a postcss.config.mjs that applies autoprefixer.

If I change our build to drop this config, I'd have for instance:

-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
-  color: rgba(var(--bs-body-color-rgb), 0.65);
-  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
-}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
cursor: pointer;
}

For the second use case disappearing, it's because you have $enable-button-pointers defined to false in your app.bootstrap.guidelines.scss. On our side, it's defined like this, so it's skipped in your final CSS generated file:

bootstrap/scss/_reboot.scss

Lines 452 to 463 in d7b22b7

	button,
	[type="button"], // 1
	[type="reset"],
	[type="submit"] {
	-webkit-appearance: button; // 2
	@if $enable-button-pointers {
	&:not(:disabled) {
	cursor: pointer; // 3
	}
	}
	}

[julien-deramond]

Have you tried our Webpack guide yet? It includes Autoprefixer configuration. It should work and generate the right CSS. I'm realizing that maybe there's a part missing, saying where to put a .browserslistrc file. If it still doesn't work on your side, feel free to ping me around here, I'll try to help if I can find some more time.

[lanesCSO]

@julien-deramond thanks for all your help, I have been messing around a bit and in some ways getting more confused :) Anyway, I originally used webpack for building with the below config.

'use strict'

const path = require('path')
const autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
//const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  entry: './src/js/app.bootstrap.guideline.js',
  /*optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: {
          banner: (licenseFile) => {
            return `License information can be found in ${licenseFile}`;
          },
        },
      }),
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            "default",
            {
              discardComments: { removeAll: false },
            },
          ],
        },
      }),
    ],
    minimize: true,
  },*/
/*  plugins: [
    new miniCssExtractPlugin({
      filename: "app.bootstrap.guidelines.min.css",
    })],*/
  output: {
    filename: 'app.bootstrap.guidelines.min.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new miniCssExtractPlugin()
	],
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            // Extracts CSS for each JS file that includes CSS
            loader: miniCssExtractPlugin.loader
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader', options: { sourceMap: false }
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  autoprefixer
                ]
              }
            }
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: 'sass-loader', options: { sourceMap: false }
          }
        ]
      }
    ]
  }
}

I have included the browserlists file at the same level as the package.json and I still do not get the missing classes, however I have noticed that ye have a few extra ones that I cannot get included no matter what I do.

E.g.

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

Any help much apprecaited

[julien-deramond]

TBH, It'll be difficult or too time-consuming for me without any reproducible environment. Would it be possible for you to upload somewhere where you are at right now with your latest tests in a branch of https://github.com/CSOIreland/CSOBSTheme, a temp GitHub repo or maybe in something like StackBlitz?

[lanesCSO]

I have a branch here - https://github.com/CSOIreland/CSOBSTheme/tree/testing-RC-7 Thanks for your help, I have a powershell script (setup.ps1) which runs

npm install
npm run build 

[julien-deramond]

Thanks, got your branch.

rm -rf dist
npm i
npm run build

If I format dist/main.css in VS code, I can find:

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

and

.form-floating > .form-control-plaintext:not(:-moz-placeholder-shown),
.form-floating > .form-control:not(:-moz-placeholder-shown) {
  padding-bottom: 0.625rem;
  padding-top: 1.625rem;
}
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding-bottom: 0.625rem;
  padding-top: 1.625rem;
}

If I comment autoprefixer in your webpack.config.js, they disappear, so it means that your configuration seems to work pretty well:

diff --git a/webpack.config.js b/webpack.config.js
index 56adc18..ea01821 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -72,7 +72,7 @@ module.exports = {
             options: {
               postcssOptions: {
                 plugins: [
-                  autoprefixer
+                  // autoprefixer
                 ]
               }
             }

Now, if I uncomment autoprefixer and remove .browserslistrc, I only have the .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) and not the ::-webkit-file-upload-button { rule. This can be normal as without any .browserslistrc file at the root level, autoprefixer (if I remember well) will use one of its default browsers list.

If it works on my end and not on yours, I'm wondering if running it in your environment (I suppose since I can see a setup.ps1 file) could be the issue. Maybe it doesn't find the .browserslistrc and so fallbacks onto the default rule of browsers.

Right now, in your branch:

• does it generate .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown)?
• does it generate ::-webkit-file-upload-button {?

[lanesCSO]

thanks for investigating, really appreciate it. No it doesn't, im wondering is it a windows thing