diff --git a/package-lock.json b/package-lock.json index dc61165..f4add74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,12 @@ "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz", "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==" }, + "@csstools/normalize.css": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", + "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==", + "dev": true + }, "@fortawesome/fontawesome-common-types": { "version": "0.2.25", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz", @@ -4885,6 +4891,15 @@ } } }, + "postcss-browser-comments": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-3.0.0.tgz", + "integrity": "sha512-qfVjLfq7HFd2e0HW4s1dvU8X080OZdG46fFbIBFjW7US7YPDcWfRvdElvwMJr2LI6hMmD+7LnH2HcmXTs+uOig==", + "dev": true, + "requires": { + "postcss": "^7" + } + }, "postcss-color-functional-notation": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz", @@ -5189,6 +5204,19 @@ "postcss": "^7.0.2" } }, + "postcss-normalize": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/postcss-normalize/-/postcss-normalize-8.0.1.tgz", + "integrity": "sha512-rt9JMS/m9FHIRroDDBGSMsyW1c0fkvOJPy62ggxSHUldJO7B195TqFMqIf+lY5ezpDcYOV4j86aUp3/XbxzCCQ==", + "dev": true, + "requires": { + "@csstools/normalize.css": "^10.1.0", + "browserslist": "^4.6.2", + "postcss": "^7.0.17", + "postcss-browser-comments": "^3.0.0", + "sanitize.css": "^10.0.0" + } + }, "postcss-overflow-shorthand": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz", @@ -5803,6 +5831,12 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "sanitize.css": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-10.0.0.tgz", + "integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==", + "dev": true + }, "scheduler": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz", diff --git a/package.json b/package.json index f921a15..bee1ede 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "description": "Default set of Flexor Apps.", "version": "1.0.0", "private": true, + "browserslist": [ + "defaults" + ], "scripts": { "start": "node dist/server/index.js", "build:server": "tsc", @@ -23,6 +26,7 @@ "mini-css-extract-plugin": "^0.8.0", "npm-run-all": "^4.1.5", "pino-pretty": "^3.3.0", + "postcss-normalize": "^8.0.1", "style-loader": "^1.0.0", "ts-loader": "^6.2.1", "ts-node": "^8.5.0", diff --git a/postcss-normalize.d.ts b/postcss-normalize.d.ts new file mode 100644 index 0000000..ac414a2 --- /dev/null +++ b/postcss-normalize.d.ts @@ -0,0 +1,15 @@ +declare module 'postcss-normalize' { + import { + plugin, Plugin, ParserInput, + Result, LazyResult, Root, ProcessOptions + } from 'postcss' + + interface PluginOptions { + allowDuplicates?: boolean + forceImport?: string | boolean + browsers?: string + } + + const PostcssNormalize: Plugin + export default PostcssNormalize +} diff --git a/postcss-preset-env.d.ts b/postcss-preset-env.d.ts index bbbf7ed..3aceab5 100644 --- a/postcss-preset-env.d.ts +++ b/postcss-preset-env.d.ts @@ -2,20 +2,20 @@ declare module 'postcss-preset-env' { import { plugin, Plugin, ParserInput, Result, LazyResult, Root, ProcessOptions - } from 'postcss'; + } from 'postcss' interface PluginOptions { - stage?: number; - features?: any; - browsers?: string; - insertBefore?: any; - insertAfter?: any; - autoprefixer?: any; - preserve?: boolean; - importFrom?: string; - exportTo?: string; + stage?: number + features?: any + browsers?: string + insertBefore?: any + insertAfter?: any + autoprefixer?: any + preserve?: boolean + importFrom?: string + exportTo?: string } - const PostcssPresetEnv: Plugin; - export default PostcssPresetEnv; + const PostcssPresetEnv: Plugin + export default PostcssPresetEnv } diff --git a/src/apps/gif-app/composer/webpack.config.ts b/src/apps/gif-app/composer/webpack.config.ts index db6acae..d23cfcf 100644 --- a/src/apps/gif-app/composer/webpack.config.ts +++ b/src/apps/gif-app/composer/webpack.config.ts @@ -2,6 +2,7 @@ import { resolve } from 'path' import { Configuration } from 'webpack' import HtmlWebpackPlugin from 'html-webpack-plugin' import MiniCssExtractPlugin from 'mini-css-extract-plugin' +import postcssNormalize from 'postcss-normalize' import postcssPresetEnv from 'postcss-preset-env' const config: Configuration = { @@ -43,6 +44,7 @@ const config: Configuration = { loader: 'postcss-loader', options: { plugins: [ + postcssNormalize(), postcssPresetEnv({ stage: 2, }), diff --git a/src/apps/text-app/composer/webpack.config.ts b/src/apps/text-app/composer/webpack.config.ts index b82c39e..8f1d12a 100644 --- a/src/apps/text-app/composer/webpack.config.ts +++ b/src/apps/text-app/composer/webpack.config.ts @@ -2,6 +2,7 @@ import { resolve } from 'path' import { Configuration } from 'webpack' import HtmlWebpackPlugin from 'html-webpack-plugin' import MiniCssExtractPlugin from 'mini-css-extract-plugin' +import postcssNormalize from 'postcss-normalize' import postcssPresetEnv from 'postcss-preset-env' const config: Configuration = { @@ -43,6 +44,7 @@ const config: Configuration = { loader: 'postcss-loader', options: { plugins: [ + postcssNormalize(), postcssPresetEnv({ stage: 2, }), diff --git a/src/styles/default.css b/src/styles/default.css index 15b7e2d..a4a9a87 100644 --- a/src/styles/default.css +++ b/src/styles/default.css @@ -1,4 +1,5 @@ @charset "utf-8"; +@import "normalize.css"; @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap'); :root { @@ -21,6 +22,7 @@ input, textarea, select { box-sizing: border-box; font-family: var(--default-font); font-size: 1rem; + margin: 0px; padding: var(--input-padding); width: 100%; }