Skip to content
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.

Sign up for GitHub

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

Jump to bottom

refactor: Determine CSS module by filename, not directory #1714

Merged
merged 5 commits into from
Jul 25, 2022
Merged

refactor: Determine CSS module by filename, not directory #1714

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dc9f0e4
refactor: Determine CSS module by filename, not directory
rschristian Jul 24, 2022
778d782
docs: Adding changeset
rschristian Jul 24, 2022
6036804
refactor: Project creation pull from templates 'main' branch
rschristian Jul 25, 2022
1f48325
test: Updating tests
rschristian Jul 25, 2022
8c5c4c7
revert: Accidentally removed log message
rschristian Jul 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions packages/cli/lib/commands/create.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ const { addScripts, install, initGit } = require('../lib/setup');
const { validateArgs } = require('./validate-args');

const ORG = 'preactjs-templates';
const RGX = /\.(woff2?|ttf|eot|jpe?g|ico|png|gif|webp|mp4|mov|ogg|webm)(\?.*)?$/i;
const RGX =
/\.(woff2?|ttf|eot|jpe?g|ico|png|gif|webp|mp4|mov|ogg|webm)(\?.*)?$/i;
const isMedia = str => RGX.test(str);
const capitalize = str => str.charAt(0).toUpperCase() + str.substring(1);

Expand Down Expand Up @@ -176,11 +177,7 @@ async function fetchTemplates() {
// If cache file doesn't exist, then hit the API and fetch the data
if (!existsSync(cacheFilePath)) {
const repos = await fetch(TEMPLATES_REPO_URL).then(r => r.json());
await writeFile(
cacheFilePath,
JSON.stringify(repos, null, 2),
'utf-8'
);
await writeFile(cacheFilePath, JSON.stringify(repos, null, 2), 'utf-8');
}

// update the cache file without blocking the rest of the tasks.
Expand Down Expand Up @@ -266,7 +263,7 @@ async function command(repo, dest, argv) {
}

if (!repo.includes('/')) {
repo = `${ORG}/${repo}`;
repo = `${ORG}/${repo}#main`;
info(`Assuming you meant ${repo}...`);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/cli/lib/lib/webpack/run-webpack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ function writeJsonStats(cwd, stats) {
function allFields(stats, field, fields = [], name = null) {
const info = stats.toJson({
errors: true,
warnings: false,
warnings: true,
Copy link
Member Author

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

if (field === 'warnings' && stats.hasWarnings()) {
fields = fields.concat(info.warnings.map(addCompilerPrefix));
}

However, info.warnings will always be empty w/out this change.

errorDetails: false,
});
const addCompilerPrefix = msg =>
Expand Down
41 changes: 19 additions & 22 deletions packages/cli/lib/lib/webpack/webpack-base-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Member Author

Choose a reason for hiding this comment

The 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 isProd and isWatch.

const IS_SOURCE_PREACT_X_OR_ABOVE = isInstalledVersionPreactXOrAbove(cwd);
// Apply base-level `env` values
env.dest = resolve(cwd, env.dest || 'build');
Expand Down Expand Up @@ -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,
},
},
Expand All @@ -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,
},
},
Expand All @@ -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)$/,
Expand Down Expand Up @@ -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,
Expand Down
40 changes: 20 additions & 20 deletions packages/cli/tests/images/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ exports.default = {
'assets/icons/mstile-150x150.png': 9050,
'assets/favicon.ico': 15086,

'ssr-build/ssr-bundle.77c49.css': 1281,
'ssr-build/ssr-bundle.77c49.css.map': 2070,
'ssr-build/ssr-bundle.c9123.css': 1281,
'ssr-build/ssr-bundle.c9123.css.map': 2070,
'ssr-build/ssr-bundle.js': 9801,
'ssr-build/ssr-bundle.js.map': 30625,
'ssr-build/asset-manifest.json': 82,

'bundle.6d2a5.js': 21323,
'bundle.6d2a5.js.map': 85534,
'bundle.6d2a5.legacy.js': 22514,
'bundle.6d2a5.legacy.js.map': 106422,
'bundle.9bde9.css': 945,
'bundle.9bde9.css.map': 1758,
'bundle.3f496.js': 21323,
'bundle.3f496.js.map': 85534,
'bundle.3f496.legacy.js': 22514,
'bundle.3f496.legacy.js.map': 106422,
'bundle.a2557.css': 945,
'bundle.a2557.css.map': 1758,

'dom-polyfills.c88f4.legacy.js': 5252,
'dom-polyfills.c88f4.legacy.js.map': 18836,
Expand All @@ -31,19 +31,19 @@ exports.default = {
'push-manifest.json': 450,
'asset-manifest.json': 943,

'route-home.chunk.25907.js': 306,
'route-home.chunk.25907.js.map': 1615,
'route-home.chunk.25907.legacy.js': 363,
'route-home.chunk.25907.legacy.js.map': 1913,
'route-home.chunk.f1c94.css': 112,
'route-home.chunk.f1c94.css.map': 224,
'route-home.chunk.b9f12.js': 306,
'route-home.chunk.b9f12.js.map': 1615,
'route-home.chunk.b9f12.legacy.js': 363,
'route-home.chunk.b9f12.legacy.js.map': 1913,
'route-home.chunk.6eaee.css': 112,
'route-home.chunk.6eaee.css.map': 224,

'route-profile.chunk.d1e1a.js': 2469,
'route-profile.chunk.d1e1a.js.map': 9736,
'route-profile.chunk.d1e1a.legacy.js': 2624,
'route-profile.chunk.d1e1a.legacy.js.map': 12373,
'route-profile.chunk.e0d39.css': 118,
'route-profile.chunk.e0d39.css.map': 231,
'route-profile.chunk.d94b1.js': 2469,
'route-profile.chunk.d94b1.js.map': 9736,
'route-profile.chunk.d94b1.legacy.js': 2624,
'route-profile.chunk.d94b1.legacy.js.map': 12373,
'route-profile.chunk.0af3e.css': 118,
'route-profile.chunk.0af3e.css.map': 231,
};

exports.sass = `
Expand Down