add webpack, eslint, stylelint
This commit is contained in:
parent
4a60c0e3f0
commit
2180d16d43
|
@ -0,0 +1,11 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
es6: true,
|
||||
browser: true,
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 2017,
|
||||
},
|
||||
parser: 'babel-eslint',
|
||||
extends: 'eslint-config-airbnb-base',
|
||||
};
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"extends": "stylelint-config-recommended",
|
||||
"ignoreFiles": ["dist/**/*"],
|
||||
"rules": {
|
||||
"at-rule-no-unknown": [
|
||||
true,
|
||||
ignoreAtRules: ["mixin", "define-mixin"]
|
||||
]
|
||||
}
|
||||
}
|
File diff suppressed because it is too large
Load Diff
|
@ -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"
|
||||
}
|
||||
}
|
|
@ -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 }],
|
||||
],
|
||||
};
|
|
@ -0,0 +1,6 @@
|
|||
@import 'typography.css';
|
||||
@import 'accessibility.css';
|
||||
@import 'forms.css';
|
||||
@import 'buttons.css';
|
||||
@import 'icons.css';
|
||||
@import 'visibility.css';
|
|
@ -181,7 +181,10 @@ u {
|
|||
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--right {
|
||||
width: 45%;
|
||||
|
@ -204,7 +207,9 @@ u {
|
|||
}
|
||||
|
||||
/* 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 {
|
||||
width: calc(100% + 10.5 * var(--space-unit));
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
/* z-index */
|
||||
--zindex-header: 3; /* e.g., main header */
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// import '../sass/main.scss';
|
||||
import '../css/mixins.postcss.css';
|
||||
import '../css/style.css';
|
||||
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
|
|
|
@ -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="
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1 +1,2 @@
|
|||
// TODO
|
||||
@import 'breakpoints';
|
||||
@import 'mixins';
|
||||
|
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<div class="component">
|
||||
<p><%= text %></p>
|
||||
<p>woot!</p>
|
||||
</div>
|
|
@ -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)
|
||||
],
|
||||
},
|
||||
});
|
Loading…
Reference in New Issue