From cea89f92da6135e72f8d60fc28f59515b47765b3 Mon Sep 17 00:00:00 2001 From: Zaydek Michels-Gualtieri Date: Tue, 17 Nov 2020 18:56:31 +0900 Subject: [PATCH] modern-normalize is loaded / intergrated as an external dependency now --- package.json | 9 +- src/duomo/builder.scss | 35 ++-- src/duomo/preflight/base.scss | 242 ------------------------ src/duomo/preflight/index.scss | 2 +- src/duomo/preflight/tailwind-base.scss | 246 +++++++++++++++++++++++++ src/duomo/reset.scss | 8 +- yarn.lock | 5 + 7 files changed, 285 insertions(+), 262 deletions(-) delete mode 100644 src/duomo/preflight/base.scss create mode 100644 src/duomo/preflight/tailwind-base.scss diff --git a/package.json b/package.json index 5d409b4..7567c41 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,10 @@ "dist/" ], "scripts": { - "watch-consumer": "watch --interval 0.1 'yarn -s sass --no-charset src/consumer.scss dist/index.css' src", - "watch-duomo": "watch --interval 0.1 'yarn -s sass --no-charset src/duomo/index.scss dist/index.css' src", - "build-duomo": "sass --no-charset src/duomo/index.scss dist/index.css", - "build-reset": "sass --no-charset src/duomo/reset.scss dist/reset.css", + "watch-consumer": "watch --interval 0.1 'yarn -s sass --load-path=node_modules/modern-normalize --no-charset src/consumer.scss dist/index.css' src", + "watch-duomo": "watch --interval 0.1 'yarn -s sass --load-path=node_modules/modern-normalize --no-charset src/duomo/index.scss dist/index.css' src", + "build-duomo": "sass --load-path=node_modules/modern-normalize --no-charset src/duomo/index.scss dist/index.css", + "build-reset": "sass --load-path=node_modules/modern-normalize --no-charset src/duomo/reset.scss dist/reset.css", "test": "jest", "build": "rm -rf dist && yarn test && yarn tsc && yarn build-duomo && yarn build-reset", "publish-dist-dry-run": "yarn build && npm publish --dry-run" @@ -22,6 +22,7 @@ "@types/react": "^16.9.55", "@types/sass": "^1.16.0", "jest": "^26.6.3", + "modern-normalize": "^1.0.0", "prettier": "^2.1.2", "react": "^17.0.1", "react-dom": "^17.0.1", diff --git a/src/duomo/builder.scss b/src/duomo/builder.scss index e13b746..3fdd8d1 100644 --- a/src/duomo/builder.scss +++ b/src/duomo/builder.scss @@ -1,14 +1,23 @@ @use "sass:list"; +@use "sass:meta"; @use "configuration"; @use "core"; @use "helpers"; @use "preflight"; +@mixin reset { + @include meta.load-css("modern-normalize"); + @include preflight.tailwind-base; + @include preflight.vendored-font-smoothing; +} + @mixin preflight { /* purgecss start ignore */ - @include preflight.base; - @include preflight.vendored-font-smoothing; + @include reset; + // prettier-ignore + @include preflight.debugger; + @include preflight.stagger; // prettier-ignore @include preflight.custom-props-from-maps( (map: configuration.$font-family-map), @@ -16,8 +25,6 @@ (shorthand: "shadow", map: configuration.$shadow-map), (map: configuration.$timing-function-map), ); - @include preflight.stagger; - @include preflight.debugger; /* purgecss end ignore */ } @@ -63,15 +70,15 @@ $__full-range: list.join(configuration.$negative-range, configuration.$standard- @if not configuration.$headless { /*! @zaydek/duomo | MIT License | https://github.com/zaydek/duomo */ @include preflight; - @include props; - @each $key, $value in configuration.$breakpoint-map { - @media (min-width: #{helpers.px($value)}) { - .#{helpers.escape-breakpoint($key)} { - @at-root { - @include props; - } - } - } - } + // @include props; + // @each $key, $value in configuration.$breakpoint-map { + // @media (min-width: #{helpers.px($value)}) { + // .#{helpers.escape-breakpoint($key)} { + // @at-root { + // @include props; + // } + // } + // } + // } } } diff --git a/src/duomo/preflight/base.scss b/src/duomo/preflight/base.scss deleted file mode 100644 index f11a0ae..0000000 --- a/src/duomo/preflight/base.scss +++ /dev/null @@ -1,242 +0,0 @@ -@use "../helpers/getters" as *; - -@mixin base { - /** - * Manually forked from SUIT CSS Base: https://github.com/suitcss/base - * A thin layer on top of normalize.css that provides a starting point more - * suitable for web applications. - */ - - /** - * Removes the default spacing and border for appropriate elements. - */ - - blockquote, - dl, - dd, - h1, - h2, - h3, - h4, - h5, - h6, - hr, - figure, - p, - pre { - margin: 0; - } - - button { - background-color: transparent; - background-image: none; - } - - /** - * Work around a Firefox/IE bug where the transparent `button` background - * results in a loss of the default `button` focus styles. - */ - - button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; - } - - fieldset { - margin: 0; - padding: 0; - } - - ol, - ul { - list-style: none; - margin: 0; - padding: 0; - } - - /** - * Tailwind custom reset styles - */ - - /** - * 1. Use the user's configured `sans` font-family (with Tailwind's default - * sans-serif font stack as a fallback) as a sane default. - * 2. Use Tailwind's default "normal" line-height so the user isn't forced - * to override it to ensure consistency even when using the default theme. - */ - - html { - font-family: font-family(sans-serif); /* 1 */ - line-height: 1.5; /* 2 */ - } - - /** - * Inherit font-family and line-height from `html` so users can set them as - * a class directly on the `html` element. - */ - - body { - font-family: inherit; - line-height: inherit; - } - - /** - * 1. Prevent padding and border from affecting element width. - * - * We used to set this in the html element and inherit from - * the parent element for everything else. This caused issues - * in shadow-dom-enhanced elements like
where the content - * is wrapped by a div with box-sizing set to `content-box`. - * - * https://github.com/mozdevs/cssremedy/issues/4 - * - * - * 2. Allow adding a border to an element by just adding a border-width. - * - * By default, the way the browser specifies that an element should have no - * border is by setting it's border-style to `none` in the user-agent - * stylesheet. - * - * In order to easily add borders to elements by just setting the `border-width` - * property, we change the default border-style for all elements to `solid`, and - * use border-width to hide them instead. This way our `border` utilities only - * need to set the `border-width` property instead of the entire `border` - * shorthand, making our border utilities much more straightforward to compose. - * - * https://github.com/tailwindcss/tailwindcss/pull/116 - */ - - *, - ::before, - ::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: color(cool-gray-200); /* 2 */ - } - - /* - * Ensure horizontal rules are visible by default - */ - - hr { - border-top-width: 1px; - } - - /** - * Undo the `border-style: none` reset that Normalize applies to images so that - * our `border-{width}` utilities have the expected effect. - * - * The Normalize reset is unnecessary for us since we default the border-width - * to 0 on all elements. - * - * https://github.com/tailwindcss/tailwindcss/issues/362 - */ - - img { - border-style: solid; - } - - textarea { - resize: vertical; - } - - input::placeholder, - textarea::placeholder { - color: color(cool-gray-400); - } - - button, - [role="button"] { - cursor: pointer; - } - - table { - border-collapse: collapse; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-size: inherit; - font-weight: inherit; - } - - /** - * Reset links to optimize for opt-in styling instead of - * opt-out. - */ - - a { - color: inherit; - text-decoration: inherit; - } - - /** - * Reset form element properties that are easy to forget to - * style explicitly so you don't inadvertently introduce - * styles that deviate from your design system. These styles - * supplement a partial reset that is already applied by - * normalize.css. - */ - - button, - input, - optgroup, - select, - textarea { - padding: 0; - line-height: inherit; - color: inherit; - } - - /** - * Use the configured 'mono' font family for elements that - * are expected to be rendered with a monospace font, falling - * back to the system monospace stack if there is no configured - * 'mono' font family. - */ - - pre, - code, - kbd, - samp { - font-family: font-family(monospace); - } - - /** - * Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - - img, - svg, - video, - canvas, - audio, - iframe, - embed, - object { - display: block; - vertical-align: middle; - } - - /** - * Constrain images and videos to the parent width and preserve - * their instrinsic aspect ratio. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - - img, - video { - max-width: 100%; - height: auto; - } -} diff --git a/src/duomo/preflight/index.scss b/src/duomo/preflight/index.scss index d4b1f0c..306971b 100644 --- a/src/duomo/preflight/index.scss +++ b/src/duomo/preflight/index.scss @@ -1,5 +1,5 @@ -@forward "base"; @forward "custom-props-from-maps"; @forward "debugger"; @forward "stagger"; +@forward "tailwind-base"; @forward "vendored-font-smoothing"; diff --git a/src/duomo/preflight/tailwind-base.scss b/src/duomo/preflight/tailwind-base.scss new file mode 100644 index 0000000..74a08f5 --- /dev/null +++ b/src/duomo/preflight/tailwind-base.scss @@ -0,0 +1,246 @@ +@use "../helpers/getters" as *; + +// https://github.com/tailwindlabs/tailwindcss/blob/master/src/plugins/css/preflight.css +// +// prettier-ignore +@mixin tailwind-base { +/** + * Manually forked from SUIT CSS Base: https://github.com/suitcss/base + * A thin layer on top of normalize.css that provides a starting point more + * suitable for web applications. + */ + +/** + * Removes the default spacing and border for appropriate elements. + */ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +button { + background-color: transparent; + background-image: none; +} + +/** + * Work around a Firefox/IE bug where the transparent `button` background + * results in a loss of the default `button` focus styles. + */ + +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} + +fieldset { + margin: 0; + padding: 0; +} + +ol, +ul { + list-style: none; + margin: 0; + padding: 0; +} + +/** + * Tailwind custom reset styles + */ + +/** + * 1. Use the user's configured `sans` font-family (with Tailwind's default + * sans-serif font stack as a fallback) as a sane default. + * 2. Use Tailwind's default "normal" line-height so the user isn't forced + * to override it to ensure consistency even when using the default theme. + */ + +html { + font-family: font-family(sans-serif); /* 1 */ // NOTE: Changed for Duomo CSS. + line-height: 1.5; /* 2 */ +} + + +/** + * Inherit font-family and line-height from `html` so users can set them as + * a class directly on the `html` element. + */ + +body { + font-family: inherit; + line-height: inherit; +} + +/** + * 1. Prevent padding and border from affecting element width. + * + * We used to set this in the html element and inherit from + * the parent element for everything else. This caused issues + * in shadow-dom-enhanced elements like
where the content + * is wrapped by a div with box-sizing set to `content-box`. + * + * https://github.com/mozdevs/cssremedy/issues/4 + * + * + * 2. Allow adding a border to an element by just adding a border-width. + * + * By default, the way the browser specifies that an element should have no + * border is by setting it's border-style to `none` in the user-agent + * stylesheet. + * + * In order to easily add borders to elements by just setting the `border-width` + * property, we change the default border-style for all elements to `solid`, and + * use border-width to hide them instead. This way our `border` utilities only + * need to set the `border-width` property instead of the entire `border` + * shorthand, making our border utilities much more straightforward to compose. + * + * https://github.com/tailwindcss/tailwindcss/pull/116 + */ + +*, +::before, +::after { + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: color(gray-200); /* 2 */ // NOTE: Changed for Duomo CSS. +} + +/* + * Ensure horizontal rules are visible by default + */ + +hr { + border-top-width: 1px; +} + +/** + * Undo the `border-style: none` reset that Normalize applies to images so that + * our `border-{width}` utilities have the expected effect. + * + * The Normalize reset is unnecessary for us since we default the border-width + * to 0 on all elements. + * + * https://github.com/tailwindcss/tailwindcss/issues/362 + */ + +img { + border-style: solid; +} + +textarea { + resize: vertical; +} + +input::placeholder, +textarea::placeholder { + color: color(gray-400); // NOTE: Changed for Duomo CSS. +} + +button, +[role="button"] { + cursor: pointer; +} + +table { + border-collapse: collapse; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/** + * Reset links to optimize for opt-in styling instead of + * opt-out. + */ + +a { + color: inherit; + text-decoration: inherit; +} + +/** + * Reset form element properties that are easy to forget to + * style explicitly so you don't inadvertently introduce + * styles that deviate from your design system. These styles + * supplement a partial reset that is already applied by + * normalize.css. + */ + +button, +input, +optgroup, +select, +textarea { + padding: 0; + line-height: inherit; + color: inherit; +} + +/** + * Use the configured 'mono' font family for elements that + * are expected to be rendered with a monospace font, falling + * back to the system monospace stack if there is no configured + * 'mono' font family. + */ + +pre, +code, +kbd, +samp { + font-family: font-family(monospace); // NOTE: Changed for Duomo CSS. +} + +/** + * Make replaced elements `display: block` by default as that's + * the behavior you want almost all of the time. Inspired by + * CSS Remedy, with `svg` added as well. + * + * https://github.com/mozdevs/cssremedy/issues/14 + */ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + vertical-align: middle; +} + +/** + * Constrain images and videos to the parent width and preserve + * their instrinsic aspect ratio. + * + * https://github.com/mozdevs/cssremedy/issues/14 + */ + +img, +video { + max-width: 100%; + height: auto; +} +} diff --git a/src/duomo/reset.scss b/src/duomo/reset.scss index 5f39457..1e0b6e0 100644 --- a/src/duomo/reset.scss +++ b/src/duomo/reset.scss @@ -1,7 +1,13 @@ @use "preflight"; +@mixin reset { + @include meta.load-css("modern-normalize"); + @include preflight.tailwind-base; + @include preflight.vendored-font-smoothing; +} + @at-root { /* purgecss start ignore */ - @include preflight.base; + @include reset; /* purgecss end ignore */ } diff --git a/yarn.lock b/yarn.lock index eb87ed7..18ed303 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3244,6 +3244,11 @@ mixin-deep@^1.2.0: for-in "^1.0.2" is-extendable "^1.0.1" +modern-normalize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.0.0.tgz#539d84a1e141338b01b346f3e27396d0ed17601e" + integrity sha512-1lM+BMLGuDfsdwf3rsgBSrxJwAZHFIrQ8YR61xIqdHo0uNKI9M52wNpHSrliZATJp51On6JD0AfRxd4YGSU0lw== + ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"