\href{https://travis-ci.org/css-modules/postcss-modules-scope}{\texttt{ }}

Transforms\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{:local(.continueButton) \{}
\DoxyCodeLine{  color: green;}
\DoxyCodeLine{\} }

\end{DoxyCode}


into\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{:export \{}
\DoxyCodeLine{  continueButton: \_\_buttons\_continueButton\_djd347adcxz9;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.\_\_buttons\_continueButton\_djd347adcxz9 \{}
\DoxyCodeLine{  color: green;}
\DoxyCodeLine{\} }

\end{DoxyCode}


so it doesn\textquotesingle{}t pollute CSS global scope and can be simply used in JS like so\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{import styles from './buttons.css'}
\DoxyCodeLine{elem.innerHTML = `<button class="{}\$\{styles.continueButton\}"{}>Continue</button>` }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21753}{}\doxysection{Composition}\label{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21753}
Since we\textquotesingle{}re exporting class names, there\textquotesingle{}s no reason to export only one. This can give us some really useful reuse of styles\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{.globalButtonStyle \{}
\DoxyCodeLine{  background: white;}
\DoxyCodeLine{  border: 1px solid;}
\DoxyCodeLine{  border-\/radius: 0.25rem;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.globalButtonStyle:hover \{}
\DoxyCodeLine{  box-\/shadow: 0 0 4px -\/2px;}
\DoxyCodeLine{\}}
\DoxyCodeLine{:local(.continueButton) \{}
\DoxyCodeLine{  compose-\/with: globalButtonStyle;}
\DoxyCodeLine{  color: green;}
\DoxyCodeLine{\} }

\end{DoxyCode}


becomes\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{.globalButtonStyle \{}
\DoxyCodeLine{  background: white;}
\DoxyCodeLine{  border: 1px solid;}
\DoxyCodeLine{  border-\/radius: 0.25rem;}
\DoxyCodeLine{\}}
\DoxyCodeLine{.globalButtonStyle:hover \{}
\DoxyCodeLine{  box-\/shadow: 0 0 4px -\/2px;}
\DoxyCodeLine{\}}
\DoxyCodeLine{:local(.continueButton) \{}
\DoxyCodeLine{  compose-\/with: globalButtonStyle;}
\DoxyCodeLine{  color: green;}
\DoxyCodeLine{\} }

\end{DoxyCode}


{\bfseries{Note\+:}} you can also use {\ttfamily composes} as a shorthand for {\ttfamily compose-\/with}\hypertarget{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21754}{}\doxysection{Local-\/by-\/default \& reuse across files}\label{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21754}
You\textquotesingle{}re looking for \href{https://github.com/css-modules/css-modules}{\texttt{ CSS Modules}}. It uses this plugin as well as a few others, and it\textquotesingle{}s amazing.\hypertarget{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21755}{}\doxysection{Building}\label{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21755}

\begin{DoxyCode}{0}
\DoxyCodeLine{npm install}
\DoxyCodeLine{npm test }

\end{DoxyCode}


\href{https://travis-ci.org/css-modules/postcss-modules-scope}{\texttt{ }}


\begin{DoxyItemize}
\item Lines\+: \href{https://coveralls.io/r/css-modules/postcss-modules-scope?branch=master}{\texttt{ }}
\item Statements\+: \href{http://codecov.io/github/css-modules/postcss-modules-scope?branch=master}{\texttt{ }}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21756}{}\doxysection{Development}\label{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21756}

\begin{DoxyItemize}
\item {\ttfamily npm autotest} will watch {\ttfamily src} and {\ttfamily test} for changes and run the tests, and transpile the ES6 to ES5 on success
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21757}{}\doxysection{License}\label{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21757}
ISC\hypertarget{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21758}{}\doxysection{With thanks}\label{md_sfcode_node_modules_postcss_modules_scope_README_autotoc_md21758}

\begin{DoxyItemize}
\item Mark Dalgleish
\item Tobias Koppers
\item Guy Bedford
\end{DoxyItemize}

\DoxyHorRuler{0}
 Glen Maddern, 2015. 