

The config to share target browsers and Node.\+js versions between different front-\/end tools. It is used in\+:


\begin{DoxyItemize}
\item \href{https://github.com/postcss/autoprefixer}{\texttt{ Autoprefixer}}
\item \href{https://github.com/babel/babel/tree/master/packages/babel-preset-env}{\texttt{ Babel}}
\item \href{https://github.com/jonathantneal/postcss-preset-env}{\texttt{ postcss-\/preset-\/env}}
\item \href{https://github.com/amilajack/eslint-plugin-compat}{\texttt{ eslint-\/plugin-\/compat}}
\item \href{https://github.com/ismay/stylelint-no-unsupported-browser-features}{\texttt{ stylelint-\/no-\/unsupported-\/browser-\/features}}
\item \href{https://github.com/jonathantneal/postcss-normalize}{\texttt{ postcss-\/normalize}}
\item \href{https://github.com/ElemeFE/obsolete-webpack-plugin}{\texttt{ obsolete-\/webpack-\/plugin}}
\end{DoxyItemize}

All tools will find target browsers automatically, when~you~add~the~following to {\ttfamily package.\+json}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{"{}browserslist"{}: [}
\DoxyCodeLine{  "{}defaults"{},}
\DoxyCodeLine{  "{}not IE 11"{},}
\DoxyCodeLine{  "{}not IE\_Mob 11"{},}
\DoxyCodeLine{  "{}maintained node versions"{}}
\DoxyCodeLine{] }

\end{DoxyCode}


Or in {\ttfamily .browserslistrc} config\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\# Browsers that we support}
\DoxyCodeLine{}
\DoxyCodeLine{defaults}
\DoxyCodeLine{not IE 11}
\DoxyCodeLine{not IE\_Mob 11}
\DoxyCodeLine{maintained node versions }

\end{DoxyCode}


Developers set their version lists using queries like {\ttfamily last 2 versions} to be free from updating versions manually. Browserslist~will~use \href{https://github.com/ben-eb/caniuse-lite}{\texttt{ {\ttfamily caniuse-\/lite}}} with~\href{https://caniuse.com/}{\texttt{ Can I Use}} data for this queries.

Browserslist will take queries from tool option, {\ttfamily browserslist} config, {\ttfamily .browserslistrc} config, {\ttfamily browserslist} section in~{\ttfamily package.\+json} or~environment variables.

\href{https://github.com/browserslist/browserslist-example}{\texttt{ Browserslist Example}} shows how every tool uses Browserslist.

\href{https://evilmartians.com/?utm_source=browserslist}{\texttt{  }}\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4571}{}\doxysection{Table of Contents}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4571}

\begin{DoxyItemize}
\item \href{\#tools}{\texttt{ Tools}}
\item \href{\#best-practices}{\texttt{ Best Practices}}
\item \href{\#browsers-data-updating}{\texttt{ Browsers Data Updating}}
\item \href{\#queries}{\texttt{ Queries}}
\begin{DoxyItemize}
\item \href{\#query-composition}{\texttt{ Query Composition}}
\item \href{\#full-list}{\texttt{ Full List}}
\item \href{\#debug}{\texttt{ Debug}}
\item \href{\#browsers}{\texttt{ Browsers}}
\end{DoxyItemize}
\item \href{\#config-file}{\texttt{ Config File}}
\begin{DoxyItemize}
\item \href{\#packagejson}{\texttt{ {\ttfamily package.\+json}}}
\item \href{\#browserslistrc}{\texttt{ {\ttfamily .browserslistrc}}}
\end{DoxyItemize}
\item \href{\#shareable-configs}{\texttt{ Shareable Configs}}
\item \href{\#configuring-for-different-environments}{\texttt{ Configuring for Different Environments}}
\item \href{\#custom-usage-data}{\texttt{ Custom Usage Data}}
\item \href{\#js-api}{\texttt{ JS API}}
\item \href{\#environment-variables}{\texttt{ Environment Variables}}
\item \href{\#cache}{\texttt{ Cache}}
\item \href{\#security-contact}{\texttt{ Security Contact}}
\item \href{\#for-enterprise}{\texttt{ For Enterprise}}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4572}{}\doxysection{Tools}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4572}

\begin{DoxyItemize}
\item \href{https://browserl.ist/}{\texttt{ {\ttfamily browserl.\+ist}}} is an online tool to check what browsers will be selected by some query.
\item \href{https://github.com/browserslist/browserslist-ga}{\texttt{ {\ttfamily browserslist-\/ga}}} and \href{https://github.com/browserslist/browserslist-ga-export}{\texttt{ {\ttfamily browserslist-\/ga-\/export}}} download your website browsers statistics to~use~it~in {\ttfamily $>$ 0.\+5\% in my stats} query.
\item \href{https://github.com/browserslist/browserslist-useragent-regexp}{\texttt{ {\ttfamily browserslist-\/useragent-\/regexp}}} compiles Browserslist query to a Reg\+Exp to test browser useragent.
\item \href{https://github.com/browserslist/browserslist-useragent-ruby}{\texttt{ {\ttfamily browserslist-\/useragent-\/ruby}}} is a Ruby library to checks browser by user agent string to match Browserslist.
\item \href{https://github.com/xeroxinteractive/browserslist-browserstack}{\texttt{ {\ttfamily browserslist-\/browserstack}}} runs Browser\+Stack tests for all browsers in Browserslist config.
\item \href{https://github.com/xeroxinteractive/browserslist-adobe-analytics}{\texttt{ {\ttfamily browserslist-\/adobe-\/analytics}}} use Adobe Analytics data to target browsers.
\item \href{https://github.com/Nyalab/caniuse-api}{\texttt{ {\ttfamily caniuse-\/api}}} returns browsers which support some specific feature.
\item Run {\ttfamily npx browserslist} in your project directory to see project’s target browsers. This CLI tool is built-\/in and available in~any project with Autoprefixer.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4573}{}\doxysection{Best Practices}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4573}

\begin{DoxyItemize}
\item There is a {\ttfamily defaults} query, which gives a reasonable configuration for most users\+:
\end{DoxyItemize}


\begin{DoxyCode}{0}
\DoxyCodeLine{"{}browserslist"{}: [}
\DoxyCodeLine{  "{}defaults"{}}
\DoxyCodeLine{]}

\end{DoxyCode}



\begin{DoxyItemize}
\item If you want to change the default set of browsers, we recommend combining {\ttfamily last 2 versions}, {\ttfamily not dead} with a usage number like {\ttfamily $>$ 0.\+2\%}. This is because {\ttfamily last n versions} on its own does not add popular old versions, while only using a percentage above {\ttfamily 0.\+2\%} will in the long run make popular browsers even more popular. We might run into a monopoly and stagnation situation, as we had with Internet Explorer 6. Please use this setting with caution.
\item Select browsers directly ({\ttfamily last 2 Chrome versions}) only if you are making a web app for a kiosk with one browser. There~are a lot of browsers on the market. If you are making general web app you should respect browsers diversity.
\item Don’t remove browsers just because you don’t know them. Opera Mini has 100 million users in Africa and it is more popular in the global market than Microsoft Edge. Chinese QQ Browsers has more market share than Firefox and desktop Safari combined.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4574}{}\doxysection{Browsers Data Updating}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4574}
{\ttfamily npx browserslist@latest -\/-\/update-\/db} updates {\ttfamily caniuse-\/lite} version in your npm, yarn or pnpm lock file.

You need to do it regularly for two reasons\+:


\begin{DoxyEnumerate}
\item To use the latest browser’s versions and statistics in queries like {\ttfamily last 2 versions} or {\ttfamily $>$1\%}. For example, if you created your project 2 years ago and did not update your dependencies, {\ttfamily last 1 version} will return 2 year old browsers.
\item {\ttfamily caiuse-\/lite} deduplication\+: to synchronize version in different tools.
\end{DoxyEnumerate}

\begin{quote}
What is deduplication? \end{quote}
Due to how npm architecture is setup, you may have a situation where you have multiple versions of a single dependency required.

Imagine you begin a project, and you add {\ttfamily autoprefixer} as a dependency. npm looks for the latest {\ttfamily caniuse-\/lite} version (1.\+0.\+30000700) and adds it to {\ttfamily package-\/lock.\+json} under {\ttfamily autoprefixer} dependencies.

A year later, you decide to add Babel. At this moment, we have a new version of {\ttfamily canuse-\/lite} (1.\+0.\+30000900). npm took the latest version and added it to your lock file under {\ttfamily @babel/preset-\/env} dependencies.

Now your lock file looks like this\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{autoprefixer 7.1.4}
\DoxyCodeLine{  browserslist 3.1.1}
\DoxyCodeLine{    caniuse-\/lite 1.0.30000700}
\DoxyCodeLine{@babel/preset-\/env 7.10.0}
\DoxyCodeLine{  browserslist 4.13.0}
\DoxyCodeLine{    caniuse-\/lite 1.0.30000900 }

\end{DoxyCode}


As you can see, we now have two versions of {\ttfamily caniuse-\/lite} installed.\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4575}{}\doxysection{Queries}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4575}
Browserslist will use browsers and Node.\+js versions query from one of these sources\+:


\begin{DoxyEnumerate}
\item {\ttfamily browserslist} key in {\ttfamily package.\+json} file in current or parent directories. {\bfseries{We recommend this way.}}
\item {\ttfamily .browserslistrc} config file in current or parent directories.
\item {\ttfamily browserslist} config file in current or parent directories.
\item {\ttfamily BROWSERSLIST} environment variable.
\item If the above methods did not produce a valid result Browserslist will use defaults\+: {\ttfamily $>$ 0.\+5\%, last 2 versions, Firefox ESR, not dead}.
\end{DoxyEnumerate}\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4576}{}\doxysubsection{Query Composition}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4576}
An {\ttfamily or} combiner can use the keyword {\ttfamily or} as well as {\ttfamily ,}. {\ttfamily last 1 version or $>$ 1\%} is equal to {\ttfamily last 1 version, $>$ 1\%}.

{\ttfamily and} query combinations are also supported to perform an intersection of all the previous queries\+: {\ttfamily last 1 version or chrome $>$ 75 and $>$ 1\%} will select ({\ttfamily browser last version} or {\ttfamily Chrome since 76}) and {\ttfamily more than 1\% marketshare}.

There is 3 different ways to combine queries as depicted below. First you start with a single query and then we combine the~queries to get our final list.

Obviously you can {\itshape not} start with a {\ttfamily not} combiner, since there is no left-\/hand side query to~combine~it~with. The left-\/hand is always resolved as {\ttfamily and} combiner even if {\ttfamily or} is used (this is an API implementation specificity).

\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{3}{|X[-1]}|}
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Query combiner type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Illustration   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Example    }\\\cline{1-3}
\endfirsthead
\hline
\endfoot
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Query combiner type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Illustration   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Example    }\\\cline{1-3}
\endhead
{\ttfamily or}/{\ttfamily ,} combiner ~\newline
 (union)   &\PBS\centering    &{\ttfamily $>$ .5\% or last 2 versions} ~\newline
 {\ttfamily $>$ .5\%, last 2 versions}    \\\cline{1-3}
{\ttfamily and} combiner ~\newline
 (intersection)   &\PBS\centering    &{\ttfamily $>$ .5\% and last 2 versions}    \\\cline{1-3}
{\ttfamily not} combiner ~\newline
 (relative complement)   &\PBS\centering    &All those three are equivalent to the first one ~\newline
 {\ttfamily $>$ .5\% and not last 2 versions} ~\newline
 {\ttfamily $>$ .5\% or not last 2 versions} ~\newline
 {\ttfamily $>$ .5\%, not last 2 versions}   \\\cline{1-3}
\end{longtabu}


\+\_\+A quick way to test your query is to do `npx browserslist '$>$ 0.\+5\%, not IE 11\textquotesingle{}\`{} in your terminal.\+\_\+\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4577}{}\doxysubsection{Full List}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4577}
You can specify the browser and Node.\+js versions by queries (case insensitive)\+:


\begin{DoxyItemize}
\item {\ttfamily defaults}\+: Browserslist’s default browsers ({\ttfamily $>$ 0.\+5\%, last 2 versions, Firefox ESR, not dead}).
\item {\ttfamily $>$ 5\%}\+: browsers versions selected by global usage statistics. {\ttfamily $>$=}, {\ttfamily $<$} and {\ttfamily $<$=} work too.
\begin{DoxyItemize}
\item {\ttfamily $>$ 5\% in US}\+: uses USA usage statistics. It accepts \href{https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2\#Officially_assigned_code_elements}{\texttt{ two-\/letter country code}}.
\item {\ttfamily $>$ 5\% in alt-\/\+AS}\+: uses Asia region usage statistics. List of all region codes can be found at \href{https://github.com/ben-eb/caniuse-lite/tree/master/data/regions}{\texttt{ {\ttfamily caniuse-\/lite/data/regions}}}.
\item {\ttfamily $>$ 5\% in my stats}\+: uses \href{\#custom-usage-data}{\texttt{ custom usage data}}.
\item {\ttfamily $>$ 5\% in browserslist-\/config-\/mycompany stats}\+: uses \href{\#custom-usage-data}{\texttt{ custom usage data}} from {\ttfamily browserslist-\/config-\/mycompany/browserslist-\/stats.\+json}.
\item {\ttfamily cover 99.\+5\%}\+: most popular browsers that provide coverage.
\item {\ttfamily cover 99.\+5\% in US}\+: same as above, with \href{https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2\#Officially_assigned_code_elements}{\texttt{ two-\/letter country code}}.
\item {\ttfamily cover 99.\+5\% in my stats}\+: uses \href{\#custom-usage-data}{\texttt{ custom usage data}}.
\end{DoxyItemize}
\item {\ttfamily dead}\+: browsers without official support or updates for 24 months. Right now it is {\ttfamily IE 10}, {\ttfamily IE\+\_\+\+Mob 11}, {\ttfamily Black\+Berry 10}, {\ttfamily Black\+Berry 7}, {\ttfamily Samsung 4} and {\ttfamily Opera\+Mobile 12.\+1}.
\item {\ttfamily last 2 versions}\+: the last 2 versions for {\itshape each} browser.
\begin{DoxyItemize}
\item {\ttfamily last 2 Chrome versions}\+: the last 2 versions of Chrome browser.
\item {\ttfamily last 2 major versions} or {\ttfamily last 2 i\+OS major versions}\+: all minor/patch releases of last 2 major versions.
\end{DoxyItemize}
\item {\ttfamily node 10} and {\ttfamily node 10.\+4}\+: selects latest Node.\+js {\ttfamily 10.\+x.\+x} or {\ttfamily 10.\+4.\+x} release.
\begin{DoxyItemize}
\item {\ttfamily current node}\+: Node.\+js version used by Browserslist right now.
\item {\ttfamily maintained node versions}\+: all Node.\+js versions, which are \href{https://github.com/nodejs/Release}{\texttt{ still maintained}} by Node.\+js Foundation.
\end{DoxyItemize}
\item {\ttfamily i\+OS 7}\+: the i\+OS browser version 7 directly.
\begin{DoxyItemize}
\item {\ttfamily Firefox $>$ 20}\+: versions of Firefox newer than 20. {\ttfamily $>$=}, {\ttfamily $<$} and {\ttfamily $<$=} work too. It also works with Node.\+js.
\item {\ttfamily ie 6-\/8}\+: selects an inclusive range of versions.
\item {\ttfamily Firefox ESR}\+: the latest \mbox{[}Firefox ESR\mbox{]} version.
\item {\ttfamily Phantom\+JS 2.\+1} and {\ttfamily Phantom\+JS 1.\+9}\+: selects Safari versions similar to Phantom\+JS runtime.
\end{DoxyItemize}
\item {\ttfamily extends browserslist-\/config-\/mycompany}\+: take queries from {\ttfamily browserslist-\/config-\/mycompany} npm package.
\item {\ttfamily supports es6-\/module}\+: browsers with support for specific features. {\ttfamily es6-\/module} here is the {\ttfamily feat} parameter at the URL of the \href{https://caniuse.com/}{\texttt{ Can I Use}} page. A list of all available features can be found at \href{https://github.com/ben-eb/caniuse-lite/tree/master/data/features}{\texttt{ {\ttfamily caniuse-\/lite/data/features}}}.
\item {\ttfamily since 2015} or {\ttfamily last 2 years}\+: all versions released since year 2015 (also {\ttfamily since 2015-\/03} and {\ttfamily since 2015-\/03-\/10}).
\item {\ttfamily unreleased versions} or {\ttfamily unreleased Chrome versions}\+: alpha and beta versions.
\item {\ttfamily not ie $<$= 8}\+: exclude browsers selected by previous queries.
\end{DoxyItemize}

You can add {\ttfamily not} to any query.\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4578}{}\doxysubsection{Debug}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4578}
Run {\ttfamily npx browserslist} in project directory to see what browsers was selected by your queries.


\begin{DoxyCode}{0}
\DoxyCodeLine{\$ npx browserslist}
\DoxyCodeLine{and\_chr 61}
\DoxyCodeLine{and\_ff 56}
\DoxyCodeLine{and\_qq 1.2}
\DoxyCodeLine{and\_uc 11.4}
\DoxyCodeLine{android 56}
\DoxyCodeLine{baidu 7.12}
\DoxyCodeLine{bb 10}
\DoxyCodeLine{chrome 62}
\DoxyCodeLine{edge 16}
\DoxyCodeLine{firefox 56}
\DoxyCodeLine{ios\_saf 11}
\DoxyCodeLine{opera 48}
\DoxyCodeLine{safari 11}
\DoxyCodeLine{samsung 5 }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4579}{}\doxysubsection{Browsers}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4579}
Names are case insensitive\+:


\begin{DoxyItemize}
\item {\ttfamily Android} for Android Web\+View.
\item {\ttfamily Baidu} for Baidu Browser.
\item {\ttfamily Black\+Berry} or {\ttfamily bb} for Blackberry browser.
\item {\ttfamily Chrome} for Google Chrome.
\item {\ttfamily Chrome\+Android} or {\ttfamily and\+\_\+chr} for Chrome for Android
\item {\ttfamily Edge} for Microsoft Edge.
\item {\ttfamily Electron} for Electron framework. It will be converted to Chrome version.
\item {\ttfamily Explorer} or {\ttfamily ie} for Internet Explorer.
\item {\ttfamily Explorer\+Mobile} or {\ttfamily ie\+\_\+mob} for Internet Explorer Mobile.
\item {\ttfamily Firefox} or {\ttfamily ff} for Mozilla Firefox.
\item {\ttfamily Firefox\+Android} or {\ttfamily and\+\_\+ff} for Firefox for Android.
\item {\ttfamily i\+OS} or {\ttfamily ios\+\_\+saf} for i\+OS Safari.
\item {\ttfamily Node} for Node.\+js.
\item {\ttfamily Opera} for Opera.
\item {\ttfamily Opera\+Mini} or {\ttfamily op\+\_\+mini} for Opera Mini.
\item {\ttfamily Opera\+Mobile} or {\ttfamily op\+\_\+mob} for Opera Mobile.
\item {\ttfamily QQAndroid} or {\ttfamily and\+\_\+qq} for QQ Browser for Android.
\item {\ttfamily Safari} for desktop Safari.
\item {\ttfamily Samsung} for Samsung Internet.
\item {\ttfamily UCAndroid} or {\ttfamily and\+\_\+uc} for UC Browser for Android.
\item {\ttfamily kaios} for Kai\+OS Browser.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4580}{}\doxysection{Config File}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4580}
\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4581}{}\doxysubsection{$<$tt$>$package.\+json$<$/tt$>$}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4581}
If you want to reduce config files in project root, you can specify browsers in {\ttfamily package.\+json} with {\ttfamily browserslist} key\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  "{}private"{}: true,}
\DoxyCodeLine{  "{}dependencies"{}: \{}
\DoxyCodeLine{    "{}autoprefixer"{}: "{}\string^6.5.4"{}}
\DoxyCodeLine{  \},}
\DoxyCodeLine{  "{}browserslist"{}: [}
\DoxyCodeLine{    "{}last 1 version"{},}
\DoxyCodeLine{    "{}> 1\%"{},}
\DoxyCodeLine{    "{}IE 10"{}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4582}{}\doxysubsection{$<$tt$>$.\+browserslistrc$<$/tt$>$}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4582}
Separated Browserslist config should be named {\ttfamily .browserslistrc} and have browsers queries split by a new line. Each line is combined with the {\ttfamily or} combiner. Comments~starts~with~{\ttfamily \#}~symbol\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\# Browsers that we support}
\DoxyCodeLine{}
\DoxyCodeLine{last 1 version}
\DoxyCodeLine{> 1\%}
\DoxyCodeLine{IE 10 \# sorry }

\end{DoxyCode}


Browserslist will check config in every directory in {\ttfamily path}. So, if tool process {\ttfamily app/styles/main.\+css}, you can put config to root, {\ttfamily app/} or {\ttfamily app/styles}.

You can specify direct path in {\ttfamily BROWSERSLIST\+\_\+\+CONFIG} environment variables.\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4583}{}\doxysection{Shareable Configs}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4583}
You can use the following query to reference an exported Browserslist config from another package\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{"{}browserslist"{}: [}
\DoxyCodeLine{  "{}extends browserslist-\/config-\/mycompany"{}}
\DoxyCodeLine{] }

\end{DoxyCode}


For security reasons, external configuration only supports packages that have the {\ttfamily browserslist-\/config-\/} prefix. npm scoped packages are also supported, by naming or prefixing the module with {\ttfamily @scope/browserslist-\/config}, such as {\ttfamily @scope/browserslist-\/config} or {\ttfamily @scope/browserslist-\/config-\/mycompany}.

If~you~don’t~accept Browserslist queries from users, you can disable the validation by using the or {\ttfamily BROWSERSLIST\+\_\+\+DANGEROUS\+\_\+\+EXTEND} environment variable or {\ttfamily dangerous\+Extend} option.


\begin{DoxyCode}{0}
\DoxyCodeLine{BROWSERSLIST\_DANGEROUS\_EXTEND=1 npx webpack }

\end{DoxyCode}


Because this uses {\ttfamily npm}\textquotesingle{}s resolution, you can also reference specific files in a package\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{"{}browserslist"{}: [}
\DoxyCodeLine{  "{}extends browserslist-\/config-\/mycompany/desktop"{},}
\DoxyCodeLine{  "{}extends browserslist-\/config-\/mycompany/mobile"{}}
\DoxyCodeLine{] }

\end{DoxyCode}


When writing a shared Browserslist package, just export an array. {\ttfamily browserslist-\/config-\/mycompany/index.\+js}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = [}
\DoxyCodeLine{  'last 1 version',}
\DoxyCodeLine{  '> 1\%',}
\DoxyCodeLine{  'ie 10'}
\DoxyCodeLine{] }

\end{DoxyCode}


You can also include a {\ttfamily browserslist-\/stats.\+json} file as part of your shareable config at the root and query it using {\ttfamily $>$ 5\% in browserslist-\/config-\/mycompany stats}. It uses the same format as {\ttfamily extends} and the {\ttfamily dangerous\+Extend} property as above.

You can export configs for different environments and select environment by {\ttfamily BROWSERSLIST\+\_\+\+ENV} or {\ttfamily env} option in your tool\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  development: [}
\DoxyCodeLine{    'last 1 version'}
\DoxyCodeLine{  ],}
\DoxyCodeLine{  production: [}
\DoxyCodeLine{    'last 1 version',}
\DoxyCodeLine{    '> 1\%',}
\DoxyCodeLine{    'ie 10'}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4584}{}\doxysection{Configuring for Different Environments}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4584}
You can also specify different browser queries for various environments. Browserslist will choose query according to~{\ttfamily BROWSERSLIST\+\_\+\+ENV} or {\ttfamily NODE\+\_\+\+ENV} variables. If none of them is declared, Browserslist will firstly look for {\ttfamily production} queries and then use defaults.

In {\ttfamily package.\+json}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{"{}browserslist"{}: \{}
\DoxyCodeLine{  "{}production"{}: [}
\DoxyCodeLine{    "{}> 1\%"{},}
\DoxyCodeLine{    "{}ie 10"{}}
\DoxyCodeLine{  ],}
\DoxyCodeLine{  "{}modern"{}: [}
\DoxyCodeLine{    "{}last 1 chrome version"{},}
\DoxyCodeLine{    "{}last 1 firefox version"{}}
\DoxyCodeLine{  ],}
\DoxyCodeLine{  "{}ssr"{}: [}
\DoxyCodeLine{    "{}node 12"{}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}


In {\ttfamily .browserslistrc} config\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{[production]}
\DoxyCodeLine{> 1\%}
\DoxyCodeLine{ie 10}
\DoxyCodeLine{}
\DoxyCodeLine{[modern]}
\DoxyCodeLine{last 1 chrome version}
\DoxyCodeLine{last 1 firefox version}
\DoxyCodeLine{}
\DoxyCodeLine{[ssr]}
\DoxyCodeLine{node 12 }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4585}{}\doxysection{Custom Usage Data}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4585}
If you have a website, you can query against the usage statistics of your site. \href{https://github.com/browserslist/browserslist-ga}{\texttt{ {\ttfamily browserslist-\/ga}}} will ask access to Google Analytics and then generate {\ttfamily browserslist-\/stats.\+json}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{npx browserslist-\/ga }

\end{DoxyCode}


Or you can use \href{https://github.com/browserslist/browserslist-ga-export}{\texttt{ {\ttfamily browserslist-\/ga-\/export}}} to convert Google Analytics data without giving a password for Google account.

You can generate usage statistics file by any other method. File format should be like\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  "{}ie"{}: \{}
\DoxyCodeLine{    "{}6"{}: 0.01,}
\DoxyCodeLine{    "{}7"{}: 0.4,}
\DoxyCodeLine{    "{}8"{}: 1.5}
\DoxyCodeLine{  \},}
\DoxyCodeLine{  "{}chrome"{}: \{}
\DoxyCodeLine{    …}
\DoxyCodeLine{  \},}
\DoxyCodeLine{  …}
\DoxyCodeLine{\} }

\end{DoxyCode}


Note that you can query against your custom usage data while also querying against global or regional data. For~example,~the query {\ttfamily $>$ 1\% in my stats, $>$ 5\% in US, 10\%} is permitted.\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4586}{}\doxysection{JS API}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4586}

\begin{DoxyCode}{0}
\DoxyCodeLine{const browserslist = require('browserslist')}
\DoxyCodeLine{}
\DoxyCodeLine{// Your CSS/JS build tool code}
\DoxyCodeLine{function process (source, opts) \{}
\DoxyCodeLine{  const browsers = browserslist(opts.overrideBrowserslist, \{}
\DoxyCodeLine{    stats: opts.stats,}
\DoxyCodeLine{    path:  opts.file,}
\DoxyCodeLine{    env:   opts.env}
\DoxyCodeLine{  \})}
\DoxyCodeLine{  // Your code to add features for selected browsers}
\DoxyCodeLine{\} }

\end{DoxyCode}


Queries can be a string {\ttfamily \char`\"{}$>$ 1\%, IE 10\char`\"{}} or an array `\mbox{[}'$>$ 1\textquotesingle{}, \textquotesingle{}IE 10\textquotesingle{}\mbox{]}\`{}.

If a query is missing, Browserslist will look for a config file. You can provide a {\ttfamily path} option (that~can~be~a~file) to~find~the~config~file relatively to it.

Options\+:


\begin{DoxyItemize}
\item {\ttfamily path}\+: file or a directory path to look for config file. Default is {\ttfamily .}.
\item {\ttfamily env}\+: what environment section use from config. Default is {\ttfamily production}.
\item {\ttfamily stats}\+: custom usage statistics data.
\item {\ttfamily config}\+: path to config if you want to set it manually.
\item {\ttfamily ignore\+Unknown\+Versions}\+: do not throw on direct query (like {\ttfamily ie 12}). Default is {\ttfamily false.}
\item {\ttfamily dangerous\+Extend}\+: Disable security checks for {\ttfamily extend} query. Default is {\ttfamily false.}
\item {\ttfamily mobile\+To\+Desktop}\+: Use desktop browsers if Can I Use doesn’t have data about this mobile version. For instance, Browserslist will return {\ttfamily chrome 20} on {\ttfamily and\+\_\+chr 20} query (Can I Use has only data only about latest versions of mobile browsers). Default is {\ttfamily false}.
\end{DoxyItemize}

For non-\/\+JS environment and debug purpose you can use CLI tool\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{browserslist "{}> 1\%, IE 10"{} }

\end{DoxyCode}


You can get total users coverage for selected browsers by JS API\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{browserslist.coverage(browserslist('> 1\%'))}
\DoxyCodeLine{//=> 81.4 }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{browserslist.coverage(browserslist('> 1\% in US'), 'US')}
\DoxyCodeLine{//=> 83.1 }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{browserslist.coverage(browserslist('> 1\% in my stats'), 'my stats')}
\DoxyCodeLine{//=> 83.1 }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{browserslist.coverage(browserslist('> 1\% in my stats', \{ stats \}), stats)}
\DoxyCodeLine{//=> 82.2 }

\end{DoxyCode}


Or by CLI\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\$ browserslist -\/-\/coverage "{}> 1\%"{}}
\DoxyCodeLine{These browsers account for 81.4\% of all users globally }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{\$ browserslist -\/-\/coverage=US "{}> 1\% in US"{}}
\DoxyCodeLine{These browsers account for 83.1\% of all users in the US }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{\$ browserslist -\/-\/coverage "{}> 1\% in my stats"{}}
\DoxyCodeLine{These browsers account for 83.1\% of all users in custom statistics }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{\$ browserslist -\/-\/coverage "{}> 1\% in my stats"{} -\/-\/stats=./stats.json}
\DoxyCodeLine{These browsers account for 83.1\% of all users in custom statistics }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4587}{}\doxysection{Environment Variables}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4587}
If a tool uses Browserslist inside, you can change the Browserslist settings with \mbox{[}environment variables\mbox{]}\+:


\begin{DoxyItemize}
\item {\ttfamily BROWSERSLIST} with browsers queries.
\end{DoxyItemize}


\begin{DoxyCode}{0}
\DoxyCodeLine{BROWSERSLIST="{}> 5\%"{} npx webpack}

\end{DoxyCode}



\begin{DoxyItemize}
\item {\ttfamily BROWSERSLIST\+\_\+\+CONFIG} with path to config file.
\end{DoxyItemize}


\begin{DoxyCode}{0}
\DoxyCodeLine{BROWSERSLIST\_CONFIG=./config/browserslist npx webpack}

\end{DoxyCode}



\begin{DoxyItemize}
\item {\ttfamily BROWSERSLIST\+\_\+\+ENV} with environments string.
\end{DoxyItemize}


\begin{DoxyCode}{0}
\DoxyCodeLine{BROWSERSLIST\_ENV="{}development"{} npx webpack}

\end{DoxyCode}



\begin{DoxyItemize}
\item {\ttfamily BROWSERSLIST\+\_\+\+STATS} with path to the custom usage data for {\ttfamily $>$ 1\% in my stats} query.
\end{DoxyItemize}


\begin{DoxyCode}{0}
\DoxyCodeLine{BROWSERSLIST\_STATS=./config/usage\_data.json npx webpack}

\end{DoxyCode}



\begin{DoxyItemize}
\item {\ttfamily BROWSERSLIST\+\_\+\+DISABLE\+\_\+\+CACHE} if you want to disable config reading cache.
\end{DoxyItemize}


\begin{DoxyCode}{0}
\DoxyCodeLine{BROWSERSLIST\_DISABLE\_CACHE=1 npx webpack}

\end{DoxyCode}



\begin{DoxyItemize}
\item {\ttfamily BROWSERSLIST\+\_\+\+DANGEROUS\+\_\+\+EXTEND} to disable security shareable config name check.
\end{DoxyItemize}


\begin{DoxyCode}{0}
\DoxyCodeLine{BROWSERSLIST\_DANGEROUS\_EXTEND=1 npx webpack}

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4588}{}\doxysection{Cache}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4588}
Browserslist caches the configuration it reads from {\ttfamily package.\+json} and {\ttfamily browserslist} files, as well as knowledge about the existence of files, for the duration of the hosting process.

To clear these caches, use\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{browserslist.clearCaches() }

\end{DoxyCode}


To disable the caching altogether, set the {\ttfamily BROWSERSLIST\+\_\+\+DISABLE\+\_\+\+CACHE} environment variable.\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4589}{}\doxysection{Security Contact}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4589}
To report a security vulnerability, please use the \href{https://tidelift.com/security}{\texttt{ Tidelift security contact}}. Tidelift will coordinate the fix and disclosure.\hypertarget{md_sfcode_node_modules_browserslist_README_autotoc_md4590}{}\doxysection{For Enterprise}\label{md_sfcode_node_modules_browserslist_README_autotoc_md4590}
Available as part of the Tidelift Subscription.

The maintainers of {\ttfamily browserslist} and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. \href{https://tidelift.com/subscription/pkg/npm-browserslist?utm_source=npm-browserslist&utm_medium=referral&utm_campaign=enterprise&utm_term=repo}{\texttt{ Learn more.}} 