Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-22 09:37:17 +00:00
Code Issues Projects Releases Wiki Activity

Move CSS inlining to Babel and generate babel output

Browse source
This commit is contained in:
Jordan Eldredge 2020-05-22 01:48:29 -07:00
parent 48b813ee64
commit cce5cb3ee5
15 changed files with 1314 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.gitignore vendored
View file

@ -1,2 +1,4 @@
node_modules
.vscode
.vscode
.parcel-cache/
.cache/

1
packages/babel-test/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
dist/

12
packages/babel-test/index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webamp Demo</title>
</head>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>

3
packages/babel-test/index.js Normal file
View file

@ -0,0 +1,3 @@
import Webamp from "webamp";
new Webamp({}).renderWhenReady(document.getElementById("app"));

18
packages/babel-test/package.json Normal file
View file

@ -0,0 +1,18 @@
{
"name": "babel-test",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"start": "parcel serve index.html --open",
"build": "parcel build index.html"
},
"devDependencies": {
"parcel": "^1.12.4"
},
"dependencies": {
"parcel": "^1.12.4",
"webamp": "^1.4.1-beta01"
},
"main": "index.html",
"source": "index.html"
}

7
packages/webamp/.babelrc
View file

@ -25,7 +25,9 @@
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties"
"@babel/plugin-proposal-class-properties",
"./scripts/babel-plugin-import-css.js",
["inline-json-import", {}]
],
"env": {
"test": {
@ -40,5 +42,6 @@
"production": {
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
}
},
"ignore": ["**/*.d.ts", "**/__mocks__", "**/__tests__"]
}

1
packages/webamp/.prettierignore
View file

@ -1,6 +1,7 @@
package.json
**/*.min.css
**/base-skin.css
**/base-skin-optimized.css
demo/js/googleAnalytics.min.js
built/*
demo/built/*

17
packages/webamp/config/webpack.library.js
View file

@ -9,23 +9,6 @@ module.exports = {
},
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
{ loader: "css-loader", options: { importLoaders: 1 } },
// We really only need this in prod. We could find a way to disable it in dev.
{
loader: "postcss-loader",
options: {
plugins: [
require("cssnano"),
require("../scripts/postcss-optimize-data-uri-pngs"),
],
},
},
],
},
{
test: /\.(js|ts|tsx)$/,
exclude: /(node_modules)/,

417
packages/webamp/css/base-skin-optimized.css Normal file
View file

File diff suppressed because one or more lines are too long

17
packages/webamp/demo/config/webpack.common.js
View file

@ -9,23 +9,6 @@ module.exports = {
},
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
{ loader: "css-loader", options: { importLoaders: 1 } },
// We really only need this in prod. We could find a way to disable it in dev.
{
loader: "postcss-loader",
options: {
plugins: [
require("cssnano"),
require("../../scripts/postcss-optimize-data-uri-pngs"),
],
},
},
],
},
{
test: /\.(js|ts|tsx)?$/,
exclude: /(node_modules)/,

2
packages/webamp/js/webampLazy.tsx
View file

@ -36,7 +36,7 @@ import {
} from "./actionTypes";
import Emitter from "./emitter";
import "../css/base-skin.css";
import "../css/base-skin-optimized.css";
import { SerializedStateV1 } from "./serializedStates/v1Types";
import Disposable from "./Disposable";

22
packages/webamp/package.json
View file

@ -2,22 +2,19 @@
"name": "webamp",
"version": "1.4.1-beta03",
"description": "Winamp 2 implemented in HTML5 and JavaScript",
"main": "built/webamp.bundle.js",
"main": "built/webamp.js",
"files": [
"built/webamp.bundle.js",
"built/webamp.bundle.min.js",
"built/webamp.bundle.min.js.map",
"built/webamp-lazy.bundle.js",
"built/webamp-lazy.bundle.min.js",
"built/webamp.lazy-bundle.min.js.map",
"built/**/*.js",
"built/**/*.js.map",
"index.d.ts"
],
"scripts": {
"babel-build": "babel js --out-dir built --extensions=\".js,.tsx,.ts\"",
"lint-fix": "eslint . --ext ts,tsx,js --fix",
"lint": "eslint . --ext ts,tsx,js --rulesdir=modern/eslint",
"type-check": "tsc",
"build": "webpack --config=demo/config/webpack.prod.js",
"build-library": "webpack --config=config/webpack.library.js",
"build": "webpack --config=demo/config/webpack.prod.js && yarn babel-build",
"build-library": "webpack --config=config/webpack.library.js && yarn babel-build",
"prepublishOnly": "npm run build-library",
"serve": "http-server ./demo/built",
"start": "webpack-dev-server --open --config=demo/config/webpack.dev.js",
@ -54,6 +51,7 @@
},
"homepage": "https://github.com/captbaritone/webamp/",
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.7.2",
"@babel/node": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
@ -88,12 +86,13 @@
"babel-eslint": "^9.0.0-beta.3",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.4",
"babel-plugin-inline-json-import": "^0.3.2",
"butterchurn": "^2.6.7",
"canvas-mock": "0.0.0",
"classnames": "^2.2.5",
"clean-css": "^4.2.3",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.1",
"cssnano": "^4.1.10",
"data-uri-to-buffer": "^2.0.0",
"eslint": "^6.5.1",
"eslint-plugin-import": "^2.18.2",
@ -116,7 +115,6 @@
"milkdrop-preset-converter-aws": "^0.1.6",
"music-metadata-browser": "^0.6.1",
"postcss": "^7.0.18",
"postcss-loader": "^3.0.0",
"prettier": "^2.0.4",
"puppeteer": "^1.15.0",
"rc-slider": "^8.7.1",
@ -129,7 +127,6 @@
"redux-thunk": "^2.3.0",
"reselect": "^3.0.1",
"screenfull": "^4.0.0",
"style-loader": "^0.23.1",
"tinyqueue": "^1.2.3",
"typescript": "^3.7.2",
"url-loader": "^1.1.2",
@ -153,6 +150,7 @@
"dependencies": {
"eslint-plugin-react-hooks": "^2.1.2",
"fscreen": "^1.0.2",
"load-styles": "^2.0.0",
"react-dropzone": "^10.1.7",
"redux-sentry-middleware": "^0.1.3",
"xml-js": "^1.6.11"

49
packages/webamp/scripts/babel-plugin-import-css.js Normal file
View file

@ -0,0 +1,49 @@
const path = require("path");
const fs = require("fs");
const CleanCSS = require("clean-css");
module.exports = function ({ types: t }) {
const cleanCss = new CleanCSS({});
return {
manipulateOptions(options) {
return options;
},
visitor: {
ImportDeclaration: {
exit: (babelInfo, { file }) => {
const { node } = babelInfo;
const importPath = node.source.value;
if (!importPath.endsWith(".css")) {
return;
}
if (!importPath.startsWith(".")) {
throw new Error(
"Cannot inline .css files that do not use relative paths"
);
}
const cssPath = require.resolve(importPath, {
paths: [path.dirname(file.opts.filename)],
});
const css = fs.readFileSync(cssPath, { encoding: "utf8" });
const { styles: minifiedCss, errors } = cleanCss.minify(css);
if (errors.length) {
throw new Error(errors);
}
const cssTemplateLiteral = t.stringLiteral(minifiedCss);
babelInfo.replaceWith(
t.callExpression(
t.callExpression(t.identifier("require"), [
t.stringLiteral("load-styles"),
]),
[cssTemplateLiteral]
)
);
},
},
},
};
};

15
packages/webamp/scripts/optimizeCompiledSkin.js Normal file
View file

@ -0,0 +1,15 @@
const postcss = require("postcss");
const optimize = require("./postcss-optimize-data-uri-pngs");
const fs = require("fs");
const path = require("path");
async function main() {
const from = path.join(__dirname, "../css/base-skin.css");
const to = path.join(__dirname, "../css/base-skin-optimized.css");
const css = fs.readFileSync(from);
const result = await postcss([optimize]).process(css, { from, to });
fs.writeFileSync(to, result.css);
}
main();

898
yarn.lock
View file

File diff suppressed because it is too large Load diff