browserslist
rollup-plugin-postcss
Our great sponsors
browserslist | rollup-plugin-postcss | |
---|---|---|
55 | 3 | |
12,651 | 668 | |
0.9% | - | |
7.8 | 0.0 | |
17 days ago | 29 days ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
browserslist
-
Shoelace: A forward-thinking library of web components
Not these days, where most people are using evergreen browsers and iOS users upgrade very quickly.
Take a look at the defaults for browserslist, for example:
https://browsersl.ist/#q=defaults
It just barely supports Safari 15, on iOS only, and that’s likely to go away imminently because it’s under 1% usage.
-
How we improved page load speed for Next.js ecommerce website by 1.5 times
We compile JS only for modern browsers. The list of default browsers in Next can be overridden in your browserslist.
-
Baseline: a unified view of stable web features
The way folks handle this in production is with browserslist, which lets you query on different things you want to support: https://github.com/browserslist/browserslist. This in turn tells other parts of your tooling what language features to transpile for production.
I imagine tools could be built on top of that which do what you’re asking too
-
Configure Stimulus with esbuild and Babel — Rails & Javascript
# .browserslist.rc # Babel Preset configuration # -------------------------- # Defines web-browser compatibility parameters for Babel to transpile your JS code. # This configuration is used by babel.config.js. # More information in here. # https://github.com/browserslist/browserslist # Support browsers with a market share higher than 5% >10%
-
Set up Tailwind in your Project
warn - The `content` option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating Rebuilding... Done in 88ms.
-
Lemmy 0.16.7 on OpenBSD 7.2
Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating Latest version: 1.0.30001444 Installed version: 1.0.30001298 Removing old caniuse-lite from lock file Installing new caniuse-lite version $ yarn add -W caniuse-lite (...) caniuse-lite has been successfully updated Target browser changes: - and_chr 96 + and_chr 108 (...) - ios_saf 12.2-12.5 + ios_saf 16.2 (...) - safari 13.1 + safari 16.2 (...) npm notice New major version of npm available! 8.15.0 -> 9.3.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.3.0 npm notice Run npm install -g [email protected] to update! npm notice
- Need help understanding something. I have tried googling it and nothing is coming up.
-
Reveddit does not work
Unfortunately I'm not able to fix the issue for older versions of Chrome on Android. The tool I use to convert code to be backwards compatible only seems to know about the latest version of Chrome for Android, as mentioned in this issue. I left a comment in there but I doubt any solution is forthcoming.
-
When Vite ignores your Browserslist configuration
I’m a long time user of Browserslist and Vite and I was pretty convinced they paired very-well. It seems to be the case for both CSS and JavaScript output, but it actually is not for JavaScript.
-
The Complete Guide for Setting Up React App from Scratch (feat. TypeScript)
w/ postcss-preset-env(v7.8.3): convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments. It takes the support data that comes from MDN and Can I Use and determine from a browserlist whether those transformations are needed. It also packs Autoprefixer within and shares the list with it, so prefixes are only applied when you're going to need them given your browser support list.
rollup-plugin-postcss
-
React Library Builder using Rollup.js and Storybook
The React Library Builder supports both SCSS and CSS out of the box, so you can style your components as you normally would. If you want to use CSS modules, you can refer to the rollup-plugin-postcss documentation for more information.
-
Using Fontsource With 11ty
import { nodeResolve } from "@rollup/plugin-node-resolve"; import postcss from "rollup-plugin-postcss"; import copy from "rollup-plugin-copy"; export default [ { input: "src/js/combine.js", output: { file: "src/js/minified/index.bundle.js", sourcemap: false, } plugins: [ nodeResolve(), postcss({ extract: true, // no way to move output to another folder https://github.com/egoist/rollup-plugin-postcss/issues/250 minimize: true, }), copy({ targets: [ { src: "src/js/minified/index.bundle.css", dest: "src/styles/minified", rename: "fonts.bundle.css", }, ], verbose: true, hook: "writeBundle", }) ], } ];
-
Setting Up a JavaScript Build Process using Rollup
To process Less files we will use PostCSS, which is a JavaScript build tool for CSS, Less, and other CSS preprocessors. It also comes with a built-in minifier. We can add it to the project with a Rollup plugin:
What are some alternatives?
autoprefixer - Parse CSS and add vendor prefixes to rules by Can I Use
Less - Leaner CSS, in your browser or Ruby (via less.js).
parcel - The zero configuration build tool for the web. 📦🚀
caniuse - Raw browser/feature support data from caniuse.com
ECMAScript 6 compatibility table - ECMAScript compatibility tables
rollup-plugin-terser - Rollup plugin to minify generated bundle
react-typescript-webpack-starter - A starter project for using React, TypeScript, SCSS using Webpack 5.
vue3-component-library - This is a template for building vue components library.Project makes use of vue3.0 with rollup configuration to build treeshakable imports and Postcss for compilation of css
TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
parcel-html-css-js-starter-template - An HTML, CSS, and JS web app starter template using the Parcel web app bundler.