add webpack, eslint, stylelint

This commit is contained in:
Ray Elliott 2021-02-17 23:44:20 +00:00
parent 4a60c0e3f0
commit 2180d16d43
15 changed files with 13246 additions and 3 deletions

11
.eslintrc.js Normal file
View File

@ -0,0 +1,11 @@
module.exports = {
env: {
es6: true,
browser: true,
},
parserOptions: {
ecmaVersion: 2017,
},
parser: 'babel-eslint',
extends: 'eslint-config-airbnb-base',
};

10
.stylelintrc Normal file
View File

@ -0,0 +1,10 @@
{
"extends": "stylelint-config-recommended",
"ignoreFiles": ["dist/**/*"],
"rules": {
"at-rule-no-unknown": [
true,
ignoreAtRules: ["mixin", "define-mixin"]
]
}
}

12974
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

48
package.json Normal file
View File

@ -0,0 +1,48 @@
{
"name": "webpack-static-html",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack serve",
"watch": "webpack --watch --progress",
"build": "webpack --env production"
},
"author": "",
"license": "UNLICENSED",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"cssnano-webpack-plugin": "^1.0.3",
"ejs-compiled-loader": "^3.0.0",
"eslint": "^7.2.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-webpack-plugin": "^2.4.1",
"html-webpack-plugin": "^5.0.0",
"mini-css-extract-plugin": "^1.3.3",
"postcss": "^8.2.2",
"postcss-functions": "^4.0.2",
"postcss-import": "^14.0.0",
"postcss-loader": "^4.1.0",
"postcss-mixins": "^7.0.2",
"postcss-nesting": "^7.0.1",
"postcss-preset-env": "^6.7.0",
"postcss-simple-vars": "^6.0.2",
"style-loader": "^2.0.0",
"stylelint": "^13.8.0",
"stylelint-config-recommended": "^3.0.0",
"stylelint-webpack-plugin": "^2.1.1",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
},
"dependencies": {
"postcss-custom-media": "^8.0.0"
}
}

14
postcss.config.js Normal file
View File

@ -0,0 +1,14 @@
const postcssFunctions = require('./src/postcss/functions');
const postcssMixins = require('./src/postcss/mixins');
module.exports = {
plugins: [
'postcss-import',
'postcss-custom-media',
['postcss-mixins', { mixins: postcssMixins }],
'postcss-preset-env',
'postcss-nesting',
'postcss-simple-vars',
['postcss-functions', { functions: postcssFunctions }],
],
};

6
src/css/base/base.css Normal file
View File

@ -0,0 +1,6 @@
@import 'typography.css';
@import 'accessibility.css';
@import 'forms.css';
@import 'buttons.css';
@import 'icons.css';
@import 'visibility.css';

View File

@ -181,7 +181,10 @@ u {
margin-left: calc(50% - 50vw); margin-left: calc(50% - 50vw);
} }
@mixin breakpoint sm {
/* postcss-custom-media */
/* if using sass and not postcss will need to change */
@media (--bp-sm) {
.text-component__block--left, .text-component__block--left,
.text-component__block--right { .text-component__block--right {
width: 45%; width: 45%;
@ -204,7 +207,9 @@ u {
} }
/* outset content */ /* outset content */
@mixin breakpoint xl { /* postcss-custom-media */
/* if using sass and not postcss will need to change */
@media (--bp-xl) {
.text-component__block--outset { .text-component__block--outset {
width: calc(100% + 10.5 * var(--space-unit)); width: calc(100% + 10.5 * var(--space-unit));
} }

View File

@ -1,3 +1,9 @@
@custom-media --bp-xs (max-width: 32em); /* ~512px */
@custom-media --bp-sm (max-width: 48em); /* ~768px */
@custom-media --bp-md (max-width: 64em); /* ~1024px */
@custom-media --bp-lg (max-width: 80em); /* ~1280px */
@custom-media --bp-xl (max-width: 90em); /* ~1440px */
:root { :root {
/* z-index */ /* z-index */
--zindex-header: 3; /* e.g., main header */ --zindex-header: 3; /* e.g., main header */

View File

@ -1,3 +1,5 @@
// import '../sass/main.scss';
import '../css/mixins.postcss.css';
import '../css/style.css'; import '../css/style.css';
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener('DOMContentLoaded', (event) => {

27
src/postcss/package-lock.json generated Normal file
View File

@ -0,0 +1,27 @@
{
"name": "postcss",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"hex-to-hsl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hex-to-hsl/-/hex-to-hsl-1.0.2.tgz",
"integrity": "sha1-1cWezgAXhEToIcj8WKQwr8CYMcI=",
"requires": {
"hex-to-rgb": "^1.0.1",
"rgb-to-hsl": "0.0.2"
}
},
"hex-to-rgb": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hex-to-rgb/-/hex-to-rgb-1.0.1.tgz",
"integrity": "sha1-EAud8SazLydirfhIa+aMZe+O0qQ="
},
"rgb-to-hsl": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/rgb-to-hsl/-/rgb-to-hsl-0.0.2.tgz",
"integrity": "sha1-Nvn8KGN2uQrMRX5pkAW0y0LTUOw="
}
}
}

View File

@ -1 +1,2 @@
// TODO @import 'breakpoints';
@import 'mixins';

30
src/templates/index.ejs Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>THE TITLE IS THIS!</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="THE DESCRIPTION IS THIS!">
<meta name="author" content="I AM THE AUTHOR">
</head>
<body>
<header>
</header>
<main id="js-main">
<%# weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46 %>
<%- require('!!ejs-compiled-loader?{}!./partials/component.ejs')({ text: 'text is text yahh!!!' }) %>
</main>
<footer>
</footer>
</body>
</html>

View File

@ -0,0 +1,4 @@
<div class="component">
<p><%= text %></p>
<p>woot!</p>
</div>

105
webpack.config.js Normal file
View File

@ -0,0 +1,105 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssnanoPlugin = require('cssnano-webpack-plugin');
const EsLintPlugin = require('eslint-webpack-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = (env) => ({
mode: env.production ? 'production' : 'development',
target: 'web',
entry: './src/js/index.js',
output: {
filename: env.production ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devtool: env.production ? 'cheap-source-map' : 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true,
},
plugins: [
new MiniCssExtractPlugin({
filename: env.production ? '[name].[contenthash].css' : '[name].css',
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46
template: '!!ejs-compiled-loader?{}!./src/templates/index.ejs',
}),
new EsLintPlugin(),
new StylelintPlugin(),
],
module: {
rules: [
{
test: /\.ejs$/,
use: {
// weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46
// NOTE - talso an alternative workaround that involves passing
// the usual 'ejs-compiled-loader' as the loader and passing
// an empty options object, however hmr did not work with that fix.
loader: '!!ejs-compiled-loader?{}!',
},
},
{
test: /\.js?/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.inline\.css$/i,
include: path.resolve(__dirname, 'src/css'),
use: [
{
loader: 'style-loader',
options: {
insert: function insertAtTop(element) {
const parent = document.querySelector('head');
// eslint-disable-next-line no-underscore-dangle
const lastInsertedElement = window._lastElementInsertedByStyleLoader;
if (!lastInsertedElement) {
parent.insertBefore(element, parent.firstChild);
} else if (lastInsertedElement.nextSibling) {
parent.insertBefore(element, lastInsertedElement.nextSibling);
} else {
parent.appendChild(element);
}
// eslint-disable-next-line no-underscore-dangle
window._lastElementInsertedByStyleLoader = element;
},
},
},
'css-loader',
'postcss-loader'],
},
{
test: /\.css$/i,
include: path.resolve(__dirname, 'src/css'),
exclude: /\.inline\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
include: path.resolve(__dirname, 'src'),
type: 'asset',
},
],
},
optimization: {
minimizer: [
new CssnanoPlugin({
sourceMap: true,
}),
'...', // access defaults (defaults are overridden when specifying minimizer: array)
],
},
});