From 2821f189cbe49370f350bcfea54ce837608002a9 Mon Sep 17 00:00:00 2001 From: Nestor Vera Date: Fri, 6 Sep 2019 13:58:55 +0200 Subject: [PATCH 1/2] Fix `box-sizing` for shadow-dom elements --- src/plugins/css/preflight.css | 63 +++++++++++++++++------------------ 1 file changed, 30 insertions(+), 33 deletions(-) diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index 8366c4eb4c5e..ec14c37622b6 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -4,23 +4,6 @@ * suitable for web applications. */ -/** - * 1. Prevent padding and border from affecting element width - * https://goo.gl/pYtbK7 - * 2. Change the default font family in all browsers (opinionated) - */ - -html { - box-sizing: border-box; /* 1 */ - font-family: sans-serif; /* 2 */ -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - /** * Removes the default spacing and border for appropriate elements. */ @@ -75,7 +58,7 @@ ul { /** * 1. Use the system font stack 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. + * to override it to ensure consistency even when using the default theme. */ html { @@ -84,31 +67,44 @@ html { } /** - * Allow adding a border to an element by just adding a border-width. + * 1. Prevent padding and border from affecting element 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. + * 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`. * - * 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/mozdevs/cssremedy/issues/4 * - * https://github.com/tailwindcss/tailwindcss/pull/116 + * + * 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 { - border-width: 0; - border-style: solid; - border-color: theme('borderColor.default', currentColor); +::before, +::after { + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: theme('borderColor.default', currentColor); /* 2 */ } /* * Ensure horizontal rules are visible by default */ + hr { border-top-width: 1px; } @@ -122,6 +118,7 @@ hr { * * https://github.com/tailwindcss/tailwindcss/issues/362 */ + img { border-style: solid; } From 01a660a86b34545414e940f70a05c47b9c7fb772 Mon Sep 17 00:00:00 2001 From: Nestor Vera Date: Fri, 6 Sep 2019 14:10:24 +0200 Subject: [PATCH 2/2] Update tests with new base styles --- .../fixtures/tailwind-output-important.css | 60 +++++++++---------- __tests__/fixtures/tailwind-output.css | 60 +++++++++---------- 2 files changed, 54 insertions(+), 66 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 539264569d59..8349ad17bd2e 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -354,23 +354,6 @@ template { * suitable for web applications. */ -/** - * 1. Prevent padding and border from affecting element width - * https://goo.gl/pYtbK7 - * 2. Change the default font family in all browsers (opinionated) - */ - -html { - box-sizing: border-box; /* 1 */ - font-family: sans-serif; /* 2 */ -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - /** * Removes the default spacing and border for appropriate elements. */ @@ -425,7 +408,7 @@ ul { /** * 1. Use the system font stack 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. + * to override it to ensure consistency even when using the default theme. */ html { @@ -434,27 +417,38 @@ html { } /** - * Allow adding a border to an element by just adding a border-width. + * 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 * - * 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. + * 2. Allow adding a border to an element by just adding a border-width. * - * https://github.com/tailwindcss/tailwindcss/pull/116 + * 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 { - border-width: 0; - border-style: solid; - border-color: #e2e8f0; +::before, +::after { + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: #e2e8f0; /* 2 */ } /* diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 498b3c05df70..381273116886 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -354,23 +354,6 @@ template { * suitable for web applications. */ -/** - * 1. Prevent padding and border from affecting element width - * https://goo.gl/pYtbK7 - * 2. Change the default font family in all browsers (opinionated) - */ - -html { - box-sizing: border-box; /* 1 */ - font-family: sans-serif; /* 2 */ -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - /** * Removes the default spacing and border for appropriate elements. */ @@ -425,7 +408,7 @@ ul { /** * 1. Use the system font stack 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. + * to override it to ensure consistency even when using the default theme. */ html { @@ -434,27 +417,38 @@ html { } /** - * Allow adding a border to an element by just adding a border-width. + * 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. + * 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. + * 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 + * https://github.com/tailwindcss/tailwindcss/pull/116 */ *, -*::before, -*::after { - border-width: 0; - border-style: solid; - border-color: #e2e8f0; +::before, +::after { + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: #e2e8f0; /* 2 */ } /*