-
-
Notifications
You must be signed in to change notification settings - Fork 377
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: Determine CSS module by filename, not directory #1714
Changes from all commits
dc9f0e4
778d782
6036804
1f48325
8c5c4c7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
--- | ||
'preact-cli': major | ||
--- | ||
|
||
Alters CSS Module detection to instead rely upon file names, rather than directory names. | ||
|
||
Treating all CSS files found within `routes/` and `components/` as CSS Modules was not obvious, nor did it offer an easy way to opt out (or in) without editing the Webpack config itself. | ||
|
||
This change makes is so that users can opt into CSS Modules from anywhere in their app by instead naming their CSS files according to the pattern `*.module.css`. | ||
|
||
Anyone using CSS Modules within `routes/` or `components/` will need to alter their CSS files to be `x.module.css`. If you've disabled CSS Modules in your `preact.config.js`, you can remove that bit of configuration and use file names to instead determine behavior. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,21 @@ | ||
declare global { | ||
const __webpack_public_path__: string; | ||
namespace jest { | ||
interface Matchers<R> { | ||
toBeCloseInSize(receivedSize: number, expectedSize: number): R; | ||
toFindMatchingKey(receivedKey: string): R; | ||
} | ||
declare const __webpack_public_path__: string; | ||
|
||
declare namespace jest { | ||
interface Matchers<R> { | ||
toBeCloseInSize(receivedSize: number, expectedSize: number): R; | ||
toFindMatchingKey(receivedKey: string): R; | ||
} | ||
} | ||
|
||
export {}; | ||
declare module '*.module.css' { | ||
const classes: { [key: string]: string }; | ||
export default classes; | ||
} | ||
declare module '*.module.sass' { | ||
const classes: { [key: string]: string }; | ||
export default classes; | ||
} | ||
declare module '*.module.scss' { | ||
const classes: { [key: string]: string }; | ||
export default classes; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -63,7 +63,7 @@ function getSassConfiguration(...includePaths) { | |
* @returns {import('webpack').Configuration} | ||
*/ | ||
module.exports = function createBaseConfig(env) { | ||
const { cwd, isProd, isWatch, src, source } = env; | ||
const { cwd, isProd, src, source } = env; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just a consistency thing. Easier to scan if we're not switching between |
||
const IS_SOURCE_PREACT_X_OR_ABOVE = isInstalledVersionPreactXOrAbove(cwd); | ||
// Apply base-level `env` values | ||
env.dest = resolve(cwd, env.dest || 'build'); | ||
|
@@ -219,20 +219,15 @@ module.exports = function createBaseConfig(env) { | |
], | ||
}, | ||
{ | ||
// User styles | ||
test: /\.(p?css|less|s[ac]ss|styl)$/, | ||
include: [source('components'), source('routes')], | ||
exclude: /\.module\.(p?css|less|s[ac]ss|styl)$/, | ||
use: [ | ||
isWatch | ||
? require.resolve('style-loader') | ||
: MiniCssExtractPlugin.loader, | ||
isProd | ||
? MiniCssExtractPlugin.loader | ||
: require.resolve('style-loader'), | ||
{ | ||
loader: require.resolve('css-loader'), | ||
options: { | ||
modules: { | ||
localIdentName: '[local]__[hash:base64:5]', | ||
}, | ||
importLoaders: 1, | ||
sourceMap: true, | ||
}, | ||
}, | ||
|
@@ -246,18 +241,25 @@ module.exports = function createBaseConfig(env) { | |
}, | ||
}, | ||
], | ||
// Don't consider CSS imports dead code even if the | ||
// containing package claims to have no side effects. | ||
// Remove this when webpack adds a warning or an error for this. | ||
// See https://github.com/webpack/webpack/issues/6571 | ||
sideEffects: true, | ||
}, | ||
{ | ||
// External / `node_module` styles | ||
test: /\.(p?css|less|s[ac]ss|styl)$/, | ||
exclude: [source('components'), source('routes')], | ||
test: /\.module\.(p?css|less|s[ac]ss|styl)$/, | ||
use: [ | ||
isWatch | ||
? require.resolve('style-loader') | ||
: MiniCssExtractPlugin.loader, | ||
isProd | ||
? MiniCssExtractPlugin.loader | ||
: require.resolve('style-loader'), | ||
{ | ||
loader: require.resolve('css-loader'), | ||
options: { | ||
modules: { | ||
localIdentName: '[local]__[hash:base64:5]', | ||
}, | ||
importLoaders: 1, | ||
sourceMap: true, | ||
}, | ||
}, | ||
|
@@ -271,11 +273,6 @@ module.exports = function createBaseConfig(env) { | |
}, | ||
}, | ||
], | ||
// Don't consider CSS imports dead code even if the | ||
// containing package claims to have no side effects. | ||
// Remove this when webpack adds a warning or an error for this. | ||
// See https://github.com/webpack/webpack/issues/6571 | ||
sideEffects: true, | ||
}, | ||
{ | ||
test: /\.(xml|html|txt|md)$/, | ||
|
@@ -366,7 +363,7 @@ module.exports = function createBaseConfig(env) { | |
|
||
mode: isProd ? 'production' : 'development', | ||
|
||
devtool: isWatch ? 'eval-cheap-module-source-map' : 'source-map', | ||
devtool: isProd ? 'source-map' : 'eval-cheap-module-source-map', | ||
|
||
node: { | ||
__filename: false, | ||
|
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,13 @@ | ||
import { h } from 'preact'; | ||
import Component from './components'; | ||
import Route from './routes'; | ||
import './global.css'; | ||
|
||
import './style.css'; | ||
import styles from './style.module.css'; | ||
|
||
export default () => { | ||
return ( | ||
<div> | ||
<h1>This is an app with some fancy styles!</h1> | ||
<Route /> | ||
<Component /> | ||
<h2 class={styles.text}>We can even use CSS Modules!</h2> | ||
</div> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.text { | ||
color: blue; | ||
} |
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,17 @@ | ||
import { h } from 'preact'; | ||
import App from './components/app'; | ||
|
||
export default () => <App />; | ||
import './style.sass'; | ||
import './style.scss'; | ||
import sassStyles from './style.module.sass'; | ||
import scssStyles from './style.module.scss'; | ||
|
||
export default () => { | ||
return ( | ||
<div> | ||
<h1>This is an app with some fancy styles!</h1> | ||
<h2 class={`${sassStyles.text} ${scssStyles.text}`}> | ||
We can even use CSS Modules! | ||
</h2> | ||
</div> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
.text | ||
color: blue |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.text { | ||
background: red; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
h1 | ||
color: red |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Noticed when debugging.
We attempt to log warnings if
stats.hasWarnings()
is true:preact-cli/packages/cli/lib/lib/webpack/run-webpack.js
Lines 167 to 169 in 3f389c2
However,
info.warnings
will always be empty w/out this change.