@@ -1720,6 +1720,88 @@ module.exports = {
17201720 } ) ;
17211721 } ) ;
17221722
1723+ it ( 'React supports CSS/Sass/Less/Stylus modules' , ( done ) => {
1724+ const appDir = testSetup . createTestAppDir ( ) ;
1725+ const config = testSetup . createWebpackConfig ( appDir , 'www/build' , 'dev' ) ;
1726+ config . enableSingleRuntimeChunk ( ) ;
1727+ config . setPublicPath ( '/build' ) ;
1728+ config . addEntry ( 'main' , './react-css-modules/main.js' ) ;
1729+ config . enableReactPreset ( ) ;
1730+ config . enableSassLoader ( ) ;
1731+ config . enableLessLoader ( ) ;
1732+ config . enableStylusLoader ( ) ;
1733+ config . configureCssLoader ( options => {
1734+ // Remove hashes from local ident names
1735+ // since they are not always the same.
1736+ if ( options . modules ) {
1737+ options . modules . localIdentName = '[local]_foo' ;
1738+ }
1739+ } ) ;
1740+
1741+ // Enable the PostCSS loader so we can use `lang="postcss"`
1742+ config . enablePostCssLoader ( ) ;
1743+ fs . writeFileSync (
1744+ path . join ( appDir , 'postcss.config.js' ) ,
1745+ `
1746+ module.exports = {
1747+ plugins: [
1748+ require('autoprefixer')()
1749+ ]
1750+ } `
1751+ ) ;
1752+
1753+ testSetup . runWebpack ( config , ( webpackAssert ) => {
1754+ expect ( config . outputPath ) . to . be . a . directory ( ) . with . deep . files ( [
1755+ 'main.js' ,
1756+ 'main.css' ,
1757+ 'manifest.json' ,
1758+ 'entrypoints.json' ,
1759+ 'runtime.js' ,
1760+ ] ) ;
1761+
1762+ const expectClassDeclaration = ( className ) => {
1763+ webpackAssert . assertOutputFileContains (
1764+ 'main.css' ,
1765+ `.${ className }
1766+ ) ;
1767+ } ;
1768+
1769+ expectClassDeclaration ( 'red' ) ; // Standard CSS
1770+ expectClassDeclaration ( 'large' ) ; // Standard SCSS
1771+ expectClassDeclaration ( 'justified' ) ; // Standard Less
1772+ expectClassDeclaration ( 'lowercase' ) ; // Standard Stylus
1773+
1774+ expectClassDeclaration ( 'italic_foo' ) ; // CSS Module
1775+ expectClassDeclaration ( 'bold_foo' ) ; // SCSS Module
1776+ expectClassDeclaration ( 'underline_foo' ) ; // Less Module
1777+ expectClassDeclaration ( 'rtl_foo' ) ; // Stylus Module
1778+
1779+ testSetup . requestTestPage (
1780+ browser ,
1781+ path . join ( config . getContext ( ) , 'www' ) ,
1782+ [
1783+ 'build/runtime.js' ,
1784+ 'build/main.js'
1785+ ] ,
1786+ async ( { page } ) => {
1787+ const divClassArray = await page . evaluate ( ( ) => Array . from ( document . body . querySelector ( '#app > div' ) . classList . values ( ) ) ) ;
1788+
1789+ expect ( divClassArray . includes ( 'red' ) ) . to . be . true ; // Standard CSS
1790+ expect ( divClassArray . includes ( 'large' ) ) . to . be . true ; // Standard SCSS
1791+ expect ( divClassArray . includes ( 'justified' ) ) . to . be . true ; // Standard Less
1792+ expect ( divClassArray . includes ( 'lowercase' ) ) . to . be . true ; // Standard Stylus
1793+
1794+ expect ( divClassArray . includes ( 'italic_foo' ) ) . to . be . true ; // CSS module
1795+ expect ( divClassArray . includes ( 'bold_foo' ) ) . to . be . true ; // SCSS module
1796+ expect ( divClassArray . includes ( 'underline_foo' ) ) . to . be . true ; // Less module
1797+ expect ( divClassArray . includes ( 'rtl_foo' ) ) . to . be . true ; // Stylus module
1798+
1799+ done ( ) ;
1800+ }
1801+ ) ;
1802+ } ) ;
1803+ } ) ;
1804+
17231805 it ( 'Preact supports CSS/Sass/Less/Stylus modules' , ( done ) => {
17241806 const appDir = testSetup . createTestAppDir ( ) ;
17251807 const config = testSetup . createWebpackConfig ( appDir , 'www/build' , 'dev' ) ;
@@ -1802,7 +1884,6 @@ module.exports = {
18021884 } ) ;
18031885 } ) ;
18041886
1805-
18061887 it ( 'Vue.js error when using non-activated loaders' , ( done ) => {
18071888 const config = createWebpackConfig ( 'www/build' , 'dev' ) ;
18081889 config . setPublicPath ( '/build' ) ;
0 commit comments