add different browserslist environments for BSv4 and BSv5

This commit is contained in:
IanDelMar 2022-02-27 23:33:05 +01:00
parent 93ea349018
commit fa72a47692
6 changed files with 170 additions and 137 deletions

View File

@ -1,17 +1,27 @@
# Please see https://github.com/browserslist/browserslist for more info # Please see https://github.com/browserslist/browserslist for more info
# These settings can be changed depending on what browsers your project is supporting # These settings can be changed depending on what browsers your project is supporting
#
# BOOTSTRAP 4
#
[bs4]
# General rules # General rules
last 2 major version and not dead last 2 major version and not dead
>= 0.01% >= 0.01%
# Explicit inclusions # Explicit inclusions
# See https://getbootstrap.com/docs/4.6/getting-started/browsers-devices/ # See https://getbootstrap.com/docs/4.6/getting-started/browsers-devices/
>= 1%
last 1 major version
not dead
Chrome >= 45 Chrome >= 45
Firefox >= 38
Firefox ESR Firefox ESR
Explorer >= 10 Firefox >= 38
Edge >= 12 Edge >= 12
Explorer >= 10
iOS >= 9 iOS >= 9
Safari >= 9 Safari >= 9
Android >= 4.4 Android >= 4.4
@ -28,3 +38,19 @@ not Safari < 8 # no support for flex-shrink
not Opera < 12.1 # no flexbox support not Opera < 12.1 # no flexbox support
not OperaMobile < 12.1 # no flexbox support not OperaMobile < 12.1 # no flexbox support
not Android < 4.4 # no flexbox support not Android < 4.4 # no flexbox support
#
# BOOTSTRAP 5
# See https://getbootstrap.com/docs/5.1/getting-started/browsers-devices/
#
[bs5]
>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11

View File

@ -1 +1 @@
{"--blue":"#007bff","--indigo":"#6610f2","--purple":"#5533ff","--pink":"#e83e8c","--red":"#dc3545","--orange":"#fd7e14","--yellow":"#ffc107","--green":"#28a745","--teal":"#20c997","--cyan":"#17a2b8","--white":"#fff","--gray":"#6c757d","--gray-dark":"#343a40"} {"--bs-blue":"#0d6efd","--bs-indigo":"#6610f2","--bs-purple":"#5533ff","--bs-pink":"#d63384","--bs-red":"#dc3545","--bs-orange":"#fd7e14","--bs-yellow":"#ffc107","--bs-green":"#198754","--bs-teal":"#20c997","--bs-cyan":"#0dcaf0","--bs-white":"#fff","--bs-gray":"#6c757d","--bs-gray-dark":"#343a40"}

View File

@ -1,33 +1,34 @@
'use strict' 'use strict';
module.exports = ctx => { module.exports = ( ctx ) => {
return { return {
map: { map: {
inline: false, inline: false,
annotation: true, annotation: true,
sourcesContent: true sourcesContent: true,
}, },
plugins: { plugins: {
autoprefixer: { autoprefixer: {
cascade: false cascade: false,
}, env: 'bs4',
"postcss-understrap-palette-generator" : { },
colors: [ 'postcss-understrap-palette-generator': {
"--blue", colors: [
"--indigo", '--blue',
"--purple", '--indigo',
"--pink", '--purple',
"--red", '--pink',
"--orange", '--red',
"--yellow", '--orange',
"--green", '--yellow',
"--teal", '--green',
"--cyan", '--teal',
"--white", '--cyan',
"--gray", '--white',
"--gray-dark" '--gray',
] '--gray-dark',
} ],
} },
} },
} };
};

View File

@ -1,38 +1,40 @@
'use strict' 'use strict';
const path = require('path') const path = require( 'path' );
const { babel } = require('@rollup/plugin-babel') const { babel } = require( '@rollup/plugin-babel' );
const { nodeResolve } = require('@rollup/plugin-node-resolve') const { nodeResolve } = require( '@rollup/plugin-node-resolve' );
import multi from '@rollup/plugin-multi-entry' const multi = require( '@rollup/plugin-multi-entry' );
const banner = require('./banner.js') const banner = require( './banner.js' );
let fileDest = 'theme-bootstrap4.js' const fileDest = 'theme-bootstrap4.js';
const external = ['jquery'] const external = [ 'jquery' ];
const plugins = [ const plugins = [
babel({ babel( {
// Only transpile our source code browserslistEnv: 'bs4',
exclude: 'node_modules/**', // Include the helpers in the bundle, at most one copy of each
// Include the helpers in the bundle, at most one copy of each babelHelpers: 'bundled',
babelHelpers: 'bundled' } ),
}), nodeResolve(),
nodeResolve(), multi(),
multi() ];
]
const globals = { const globals = {
jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode
'popper.js': 'Popper' 'popper.js': 'Popper',
} };
module.exports = { module.exports = {
input: [path.resolve(__dirname, '../js/bootstrap4.js'), path.resolve(__dirname, '../js/skip-link-focus-fix.js'), path.resolve(__dirname, '../js/custom-javascript.js')], input: [
output: { path.resolve( __dirname, '../js/bootstrap4.js' ),
banner, path.resolve( __dirname, '../js/skip-link-focus-fix.js' ),
file: path.resolve(__dirname, `../../js/${fileDest}`), path.resolve( __dirname, '../js/custom-javascript.js' ),
format: 'umd', ],
globals, output: {
name: 'understrap' banner,
}, file: path.resolve( __dirname, `../../js/${ fileDest }` ),
external, format: 'umd',
plugins globals,
} name: 'understrap',
},
external,
plugins,
};

View File

@ -1,33 +1,34 @@
'use strict' 'use strict';
module.exports = ctx => { module.exports = ( ctx ) => {
return { return {
map: { map: {
inline: false, inline: false,
annotation: true, annotation: true,
sourcesContent: true sourcesContent: true,
}, },
plugins: { plugins: {
autoprefixer: { autoprefixer: {
cascade: false cascade: false,
}, env: 'bs5',
"postcss-understrap-palette-generator" : { },
colors: [ 'postcss-understrap-palette-generator': {
"--bs-blue", colors: [
"--bs-indigo", '--bs-blue',
"--bs-purple", '--bs-indigo',
"--bs-pink", '--bs-purple',
"--bs-red", '--bs-pink',
"--bs-orange", '--bs-red',
"--bs-yellow", '--bs-orange',
"--bs-green", '--bs-yellow',
"--bs-teal", '--bs-green',
"--bs-cyan", '--bs-teal',
"--bs-white", '--bs-cyan',
"--bs-gray", '--bs-white',
"--bs-gray-dark" '--bs-gray',
] '--bs-gray-dark',
} ],
} },
} },
} };
};

View File

@ -1,44 +1,47 @@
'use strict' 'use strict';
const path = require('path') const path = require( 'path' );
const { babel } = require('@rollup/plugin-babel') const { babel } = require( '@rollup/plugin-babel' );
const { nodeResolve } = require('@rollup/plugin-node-resolve') const { nodeResolve } = require( '@rollup/plugin-node-resolve' );
import commonjs from '@rollup/plugin-commonjs' const commonjs = require( '@rollup/plugin-commonjs' );
import multi from '@rollup/plugin-multi-entry' const multi = require( '@rollup/plugin-multi-entry' );
const replace = require('@rollup/plugin-replace') const replace = require( '@rollup/plugin-replace' );
const banner = require('./banner.js') const banner = require( './banner.js' );
let fileDest = 'theme.js' const fileDest = 'theme.js';
const external = ['jquery'] const external = [ 'jquery' ];
const plugins = [ const plugins = [
babel({ babel( {
// Only transpile our source code browserslistEnv: 'bs5',
exclude: 'node_modules/**', // Include the helpers in the bundle, at most one copy of each
// Include the helpers in the bundle, at most one copy of each babelHelpers: 'bundled',
babelHelpers: 'bundled' } ),
}), replace( {
replace({ 'process.env.NODE_ENV': '"production"',
'process.env.NODE_ENV': '"production"', preventAssignment: true,
preventAssignment: true } ),
}), nodeResolve(),
nodeResolve(), commonjs(),
commonjs(), multi(),
multi() ];
]
const globals = { const globals = {
jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode
} '@popperjs/core': 'Popper',
};
module.exports = { module.exports = {
input: [path.resolve(__dirname, '../js/bootstrap.js'), path.resolve(__dirname, '../js/skip-link-focus-fix.js'), path.resolve(__dirname, '../js/custom-javascript.js')], input: [
output: { path.resolve( __dirname, '../js/bootstrap.js' ),
banner, path.resolve( __dirname, '../js/skip-link-focus-fix.js' ),
file: path.resolve(__dirname, `../../js/${fileDest}`), path.resolve( __dirname, '../js/custom-javascript.js' ),
format: 'umd', ],
globals, output: {
name: 'understrap' banner,
}, file: path.resolve( __dirname, `../../js/${ fileDest }` ),
external, format: 'umd',
plugins globals,
} name: 'understrap',
},
external,
plugins,
};