Add tests for CSS Modules with Preact

Author: Kocal

fixtures/preact-css-modules/components/App.jsx

@@ -0,0 +1,13 @@
+import { h } from 'preact';
+import './styles.css';
+import './styles.less';
+import './styles.scss';
+import './styles.stylus';
+import stylesCss from './styles.module.css?module';
+import stylesLess from './styles.module.less?module';
+import stylesScss from './styles.module.scss?module';
+import stylesStylus from './styles.module.stylus?module';
+
+export default function App() {
+    return <div className={`red large justified lowercase ${stylesCss.italic} ${stylesLess.underline} ${stylesScss.bold} ${stylesStylus.rtl}`}></div>
+}

fixtures/preact-css-modules/components/styles.css

@@ -0,0 +1,3 @@
+.red {
+    color: red;
+}

fixtures/preact-css-modules/components/styles.less

@@ -0,0 +1,3 @@
+  .justified {
+    text-align: justify;
+  }

fixtures/preact-css-modules/components/styles.module.css

@@ -0,0 +1,3 @@
+.italic {
+    font-style: italic;
+}

fixtures/preact-css-modules/components/styles.module.less

@@ -0,0 +1,3 @@
+  .underline {
+    text-decoration: underline;
+  }

fixtures/preact-css-modules/components/styles.module.scss

@@ -0,0 +1,3 @@
+.bold {
+  font-weight: bold;
+}

fixtures/preact-css-modules/components/styles.module.stylus

@@ -0,0 +1,2 @@
+  .rtl
+    direction: rtl;

fixtures/preact-css-modules/components/styles.scss

@@ -0,0 +1,3 @@
+.large {
+  font-size: 50px;
+}

fixtures/preact-css-modules/components/styles.stylus

@@ -0,0 +1,2 @@
+  .lowercase
+    text-transform: lowercase

fixtures/preact-css-modules/main.js

@@ -0,0 +1,5 @@
+import { h, render } from 'preact';
+
+import App from './components/App';
+
+render(<App />, document.getElementById('app'));

test/functional.js

@@ -1684,13 +1684,13 @@ module.exports = {
                 expectClassDeclaration('large'); // Standard SCSS
                 expectClassDeclaration('justified'); // Standard Less
                 expectClassDeclaration('lowercase'); // Standard Stylus
-                expectClassDeclaration('block'); // Standard Postcss
+                expectClassDeclaration('block'); // Standard PostCSS
 
                 expectClassDeclaration('italic_foo'); // CSS Module
                 expectClassDeclaration('bold_foo'); // SCSS Module
                 expectClassDeclaration('underline_foo'); // Less Module
                 expectClassDeclaration('rtl_foo'); // Stylus Module
-                expectClassDeclaration('hidden_foo'); // Stylus Module
+                expectClassDeclaration('hidden_foo'); // PostCSS Module
 
                 testSetup.requestTestPage(
                     browser,
@@ -1706,20 +1706,103 @@ module.exports = {
                         expect(divClassArray.includes('large')).to.be.true; // Standard SCSS
                         expect(divClassArray.includes('justified')).to.be.true; // Standard Less
                         expect(divClassArray.includes('lowercase')).to.be.true; // Standard Stylus
-                        expect(divClassArray.includes('block')).to.be.true; // Standard Stylus
+                        expect(divClassArray.includes('block')).to.be.true; // Standard PostCSS
 
                         expect(divClassArray.includes('italic_foo')).to.be.true; // CSS module
                         expect(divClassArray.includes('bold_foo')).to.be.true; // SCSS module
                         expect(divClassArray.includes('underline_foo')).to.be.true; // Less module
                         expect(divClassArray.includes('rtl_foo')).to.be.true; // Stylus module
-                        expect(divClassArray.includes('hidden_foo')).to.be.true; // Stylus module
+                        expect(divClassArray.includes('hidden_foo')).to.be.true; // PostCSS module
 
                         done();
                     }
                 );
             });
         });
 
+        it('Preact supports CSS/Sass/Less/Stylus modules', (done) => {
+            const appDir = testSetup.createTestAppDir();
+            const config = testSetup.createWebpackConfig(appDir, 'www/build', 'dev');
+            config.enableSingleRuntimeChunk();
+            config.setPublicPath('/build');
+            config.addEntry('main', './preact-css-modules/main.js');
+            config.enablePreactPreset();
+            config.enableSassLoader();
+            config.enableLessLoader();
+            config.enableStylusLoader();
+            config.configureCssLoader(options => {
+                // Remove hashes from local ident names
+                // since they are not always the same.
+                if (options.modules) {
+                    options.modules.localIdentName = '[local]_foo';
+                }
+            });
+
+            // Enable the PostCSS loader so we can use `lang="postcss"`
+            config.enablePostCssLoader();
+            fs.writeFileSync(
+                path.join(appDir, 'postcss.config.js'),
+                `
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+}                            `
+            );
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                expect(config.outputPath).to.be.a.directory().with.deep.files([
+                    'main.js',
+                    'main.css',
+                    'manifest.json',
+                    'entrypoints.json',
+                    'runtime.js',
+                ]);
+
+                const expectClassDeclaration = (className) => {
+                    webpackAssert.assertOutputFileContains(
+                        'main.css',
+                        `.${className} {`
+                    );
+                };
+
+                expectClassDeclaration('red'); // Standard CSS
+                expectClassDeclaration('large'); // Standard SCSS
+                expectClassDeclaration('justified'); // Standard Less
+                expectClassDeclaration('lowercase'); // Standard Stylus
+
+                expectClassDeclaration('italic_foo'); // CSS Module
+                expectClassDeclaration('bold_foo'); // SCSS Module
+                expectClassDeclaration('underline_foo'); // Less Module
+                expectClassDeclaration('rtl_foo'); // Stylus Module
+
+                testSetup.requestTestPage(
+                    browser,
+                    path.join(config.getContext(), 'www'),
+                    [
+                        'build/runtime.js',
+                        'build/main.js'
+                    ],
+                    async({ page }) => {
+                        const divClassArray = await page.evaluate(() => Array.from(document.body.querySelector('#app > div').classList.values()));
+
+                        expect(divClassArray.includes('red')).to.be.true; // Standard CSS
+                        expect(divClassArray.includes('large')).to.be.true; // Standard SCSS
+                        expect(divClassArray.includes('justified')).to.be.true; // Standard Less
+                        expect(divClassArray.includes('lowercase')).to.be.true; // Standard Stylus
+
+                        expect(divClassArray.includes('italic_foo')).to.be.true; // CSS module
+                        expect(divClassArray.includes('bold_foo')).to.be.true; // SCSS module
+                        expect(divClassArray.includes('underline_foo')).to.be.true; // Less module
+                        expect(divClassArray.includes('rtl_foo')).to.be.true; // Stylus module
+
+                        done();
+                    }
+                );
+            });
+        });
+
+
         it('Vue.js error when using non-activated loaders', (done) => {
             const config = createWebpackConfig('www/build', 'dev');
             config.setPublicPath('/build');