Home Explore Help
Register Sign In
thallada
/
default-stylesheet
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 7 Releases 0 Wiki
Browse Source

Initial commit

Tyler Hallada 6 years ago
commit
8edd9f7ac0
16 changed files with 11563 additions and 0 deletions
Split View Show Diff Stats
  1. 1 0
      .gitignore
  2. 186 0
      README.md
  3. 935 0
      chrome-default.css
  4. 1 0
      dist/default.min.css
  5. 74 0
      dist/default.min.js
  6. 1 0
      dist/default.min.js.map
  7. 1 0
      dist/example.min.css
  8. 75 0
      dist/example.min.js
  9. 1 0
      dist/example.min.js.map
  10. 46 0
      example/example.scss
  11. 66 0
      example/index.html
  12. 2648 0
      firefox.css
  13. 1 0
      index.js
  14. 7411 0
      package-lock.json
  15. 49 0
      package.json
  16. 67 0
      webpack.config.js

+ 1 - 0
.gitignore
View File 

@@ -0,0 +1 @@
1 
+node_modules

+ 186 - 0
README.md
View File 

@@ -0,0 +1,186 @@
1 
+# Default Stylesheet
2 
+
3 
+Return styles to browser defaults.
4 
+
5 
+## Warning: Work in Progress!
6 
+
7 
+This technique is still a work in progress. Styles for all elements are not yet
8 
+completely isolated. Using the Firefox's browser default stylesheet means that
9 
+it doesn't quite work as expected in other browsers.
10 
+
11 
+To see the current progress for yourself:
12 
+
13 
+```bash
14 
+git clone https://github.com/thallada/default-stylesheet
15 
+cd default-stylesheet
16 
+npm install
17 
+npm run build
18 
+python -m SimpleHTTPServer 8888
19 
+```
20 
+
21 
+Then visit `http://localhost:8888/example/index.html` in your browser.
22 
+
23 
+That said, I've had success using only Bootstrap components on top of this reset
24 
+in another project.
25 
+
26 
+## Why this is needed
27 
+
28 
+If you have applied an [`all:
29 
+initial`](https://developer.mozilla.org/en-US/docs/Web/CSS/all) reset, the
30 
+affected elements will have absolutely no styling because they have been reset
31 
+to the element's initial values as defined in the CSS spec (e.g. all elements
32 
+will be inline). `all: initial` effectively undoes all styling on an element
33 
+including the browser default styling.
34 
+
35 
+Applying this stylesheet after applying an `all: initial` style will return
36 
+elements to some sane browser default. It "redoes" the browser default
37 
+stylesheet after undoing it.
38 
+
39 
+## Will this work in non-Firefox browsers?
40 
+
41 
+Theoretically yes, you will just end up with a styling that looks a lot like
42 
+Firefox. This stylesheet is based upon the [default Firefox
43 
+stylesheets](https://dxr.mozilla.org/mozilla-central/source/layout/style/res),
44 
+but with modifications to remove `-moz-` prefixes, `%if` blocks, and
45 
+Firefox-specific properties.
46 
+
47 
+You can use CSS resets, such as
48 
+[normalize.css](https://necolas.github.io/normalize.css/), to normalize the
49 
+Firefox styling to a cross-browser default standard.
50 
+
51 
+## Usage
52 
+
53 
+You have two options:
54 
+
55 
+### Import source and process with Webpack (recommended)
56 
+
57 
+Using [Webpack](https://webpack.js.org/) with [PostCSS](http://postcss.org/)
58 
+will give you the most control over how this stylesheet is applied.
59 
+Additionally, since `all: initial` is only supported by Firefox at the time of
60 
+writing, the [`postcss-initial`
61 
+plugin](https://github.com/maximkoretskiy/postcss-initial) is necessary to
62 
+polyfill it for other browsers.
63 
+
64 
+If you are using `all: initial` to isolate a specific element on the page from
65 
+the surrounding CSS cascade, you will likely want to scope it and this
66 
+stylesheet to that specific element. This can either be done by nesting
67 
+[Sass](https://sass-lang.com/) selectors or by using the
68 
+[`postcss-prepend-selector`
69 
+plugin](https://www.npmjs.com/package/postcss-prepend-selector).
70 
+
71 
+The advantage of using `postcss-prepend-selector` is that you won't have to wrap
72 
+every style in a selector to your embedded element. It will automatically
73 
+prepend every selector in your project with the selector at Webpack build-time.
74 
+
75 
+Here is an example of a Sass file that fully resets an embedded element:
76 
+
77 
+```scss
78 
+/* Note: Because postcss-prepend-selector is used in this project, all selectors defined in any CSS/SCSS file will have
79 
+ * "#embedded.embedded " prepended to them so that all styles here will be scoped to *only* the root div. */
80 
+
81 
+/* reset all element properties to initial values as defined in CSS spec (*not* browser defaults) */
82 
+* {
83 
+  all: initial;
84 
+  /* allow all elements to inherit these properties from the root "body" div */
85 
+  font-family: inherit;
86 
+  font-size: inherit;
87 
+  font-weight: inherit;
88 
+  line-height: inherit;
89 
+  color: inherit;
90 
+  text-align: left;
91 
+  background-color: inherit;
92 
+  cursor: inherit;
93 
+}
94 
+
95 
+/* apply Firefox's default stylesheet so that Bootstrap has some browser-like styling to work with */
96 
+@import '~default-stylesheet/default.css';
97 
+
98 
+/* apply the Bootstrap reboot (normalize.css) to convert Firefox default styling to some cross-browser baseline
99 
+ * then, apply the Bootstrap component styling */
100 
+@import '~bootstrap/scss/bootstrap';
101 
+
102 
+/* Since elements inside the embedded div can no longer inherit styles set on the <body>, we will apply the styles
103 
+ * that the Bootstrap reboot applies to the <body> on the wrapper div instead, which containing elements can inherit.
104 
+ *
105 
+ * <div id="embedded" class="embedded">
106 
+ *   <div class="embedded-wrapper">
107 
+ *     <!-- ... embedded component here ... -->
108 
+ *   </div>
109 
+ * </div>
110 
+ */
111 
+.embedded-wrapper {
112 
+  font-family: $font-family-base;
113 
+  font-size: $font-size-base;
114 
+  font-weight: $font-weight-base;
115 
+  line-height: $line-height-base;
116 
+  color: $body-color;
117 
+  text-align: left;
118 
+  background-color: rgb(255, 255, 255);
119 
+}
120 
+```
121 
+
122 
+And an example Webpack 3 SCSS/CSS rule to process it:
123 
+
124 
+```javascript
125 
+{
126 
+  test: /(.scss|.css)$/,
127 
+  use: [
128 
+    'style-loader',
129 
+    {
130 
+      loader: 'css-loader',
131 
+      options: {
132 
+        sourceMap: true,
133 
+        importLoaders: 1,
134 
+      },
135 
+    },
136 
+    {
137 
+      loader: 'postcss-loader',
138 
+      options: {
139 
+        sourceMap: true,
140 
+        ident: 'postcss',
141 
+        plugins: () => [
142 
+          /* eslint-disable global-require */
143 
+          require('autoprefixer'),
144 
+          require('postcss-initial')(),
145 
+          require('postcss-prepend-selector')({ selector: '#embedded.embedded ' }),
146 
+          /* eslint-enable global-require */
147 
+        ],
148 
+      },
149 
+    },
150 
+    {
151 
+      loader: 'sass-loader',
152 
+      options: {
153 
+        sourceMap: true,
154 
+        includePaths: [
155 
+          path.join(__dirname, '../node_modules'),
156 
+          path.join(__dirname, '../src'),
157 
+        ],
158 
+      },
159 
+    },
160 
+  ],
161 
+},
162 
+```
163 
+
164 
+### Include pre-built CSS
165 
+
166 
+This project includes built CSS files in-case you are not using Webpack or
167 
+PostCSS. However, all of the styles are scoped to the hard-coded selector
168 
+"#embedded.embedded". Make sure there is an element on the page that has the id
169 
+"embedded" and a class name of "embedded". The styles will be applied to that
170 
+div.
171 
+
172 
+```html
173 
+<html>
174 
+  <head>
175 
+    <!--- ... other stylesheets ... -->
176 
+    <link rel="stylesheet" type="text/css" href="default.min.css">
177 
+  </head>
178 
+  <body>
179 
+    <!-- ... other elements not affected ... -->
180 
+    <div id="embedded" class="embedded">
181 
+      <!--- ... embedded component here will be reset to default ... -->
182 
+    </div>
183 
+    <!-- ... other elements not affected ... -->
184 
+  </body>
185 
+</html
186 
+```

+ 935 - 0
chrome-default.css
View File 

@@ -0,0 +1,935 @@
1 
+/*
2 
+ * The default style sheet used to render HTML.
3 
+ *
4 
+ * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
5 
+ * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
6 
+ *
7 
+ * This library is free software; you can redistribute it and/or
8 
+ * modify it under the terms of the GNU Library General Public
9 
+ * License as published by the Free Software Foundation; either
10 
+ * version 2 of the License, or (at your option) any later version.
11 
+ *
12 
+ * This library is distributed in the hope that it will be useful,
13 
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
14 
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
15 
+ * Library General Public License for more details.
16 
+ *
17 
+ * You should have received a copy of the GNU Library General Public License
18 
+ * along with this library; see the file COPYING.LIB.  If not, write to
19 
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
20 
+ * Boston, MA 02110-1301, USA.
21 
+ *
22 
+ */
23 
+@namespace "http://www.w3.org/1999/xhtml";
24 
+html {
25 
+    display: block
26 
+}
27 
+/* children of the <head> element all have display:none */
28 
+head {
29 
+    display: none
30 
+}
31 
+meta {
32 
+    display: none
33 
+}
34 
+title {
35 
+    display: none
36 
+}
37 
+link {
38 
+    display: none
39 
+}
40 
+style {
41 
+    display: none
42 
+}
43 
+script {
44 
+    display: none
45 
+}
46 
+/* generic block-level elements */
47 
+body {
48 
+    display: block;
49 
+    margin: 8px
50 
+}
51 
+body:-webkit-full-page-media {
52 
+    background-color: rgb(0, 0, 0)
53 
+}
54 
+p {
55 
+    display: block;
56 
+    margin-before: 1em;
57 
+    margin-after: 1em;
58 
+    margin-start: 0;
59 
+    margin-end: 0;
60 
+}
61 
+div {
62 
+    display: block
63 
+}
64 
+layer {
65 
+    display: block
66 
+}
67 
+article, aside, footer, header, hgroup, main, nav, section {
68 
+    display: block
69 
+}
70 
+marquee {
71 
+    display: inline-block;
72 
+}
73 
+address {
74 
+    display: block
75 
+}
76 
+blockquote {
77 
+    display: block;
78 
+    margin-before: 1em;
79 
+    margin-after: 1em;
80 
+    margin-start: 40px;
81 
+    margin-end: 40px;
82 
+}
83 
+figcaption {
84 
+    display: block
85 
+}
86 
+figure {
87 
+    display: block;
88 
+    margin-before: 1em;
89 
+    margin-after: 1em;
90 
+    margin-start: 40px;
91 
+    margin-end: 40px;
92 
+}
93 
+q {
94 
+    display: inline
95 
+}
96 
+q:before {
97 
+    content: open-quote;
98 
+}
99 
+q:after {
100 
+    content: close-quote;
101 
+}
102 
+center {
103 
+    display: block;
104 
+    /* special centering to be able to emulate the html4/netscape behaviour */
105 
+    text-align: center
106 
+}
107 
+hr {
108 
+    display: block;
109 
+    margin-before: 0.5em;
110 
+    margin-after: 0.5em;
111 
+    margin-start: auto;
112 
+    margin-end: auto;
113 
+    border-style: inset;
114 
+    border-width: 1px
115 
+}
116 
+map {
117 
+    display: inline
118 
+}
119 
+video {
120 
+    object-fit: contain;
121 
+}
122 
+/* heading elements */
123 
+h1 {
124 
+    display: block;
125 
+    font-size: 2em;
126 
+    margin-before: 0.67em;
127 
+    margin-after: 0.67em;
128 
+    margin-start: 0;
129 
+    margin-end: 0;
130 
+    font-weight: bold
131 
+}
132 
+:any(article,aside,nav,section) h1 {
133 
+    font-size: 1.5em;
134 
+    margin-before: 0.83em;
135 
+    margin-after: 0.83em;
136 
+}
137 
+:any(article,aside,nav,section) :any(article,aside,nav,section) h1 {
138 
+    font-size: 1.17em;
139 
+    margin-before: 1em;
140 
+    margin-after: 1em;
141 
+}
142 
+:any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) h1 {
143 
+    font-size: 1.00em;
144 
+    margin-before: 1.33em;
145 
+    margin-after: 1.33em;
146 
+}
147 
+:any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) h1 {
148 
+    font-size: .83em;
149 
+    margin-before: 1.67em;
150 
+    margin-after: 1.67em;
151 
+}
152 
+:any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) :any(article,aside,nav,section) h1 {
153 
+    font-size: .67em;
154 
+    margin-before: 2.33em;
155 
+    margin-after: 2.33em;
156 
+}
157 
+h2 {
158 
+    display: block;
159 
+    font-size: 1.5em;
160 
+    margin-before: 0.83em;
161 
+    margin-after: 0.83em;
162 
+    margin-start: 0;
163 
+    margin-end: 0;
164 
+    font-weight: bold
165 
+}
166 
+h3 {
167 
+    display: block;
168 
+    font-size: 1.17em;
169 
+    margin-before: 1em;
170 
+    margin-after: 1em;
171 
+    margin-start: 0;
172 
+    margin-end: 0;
173 
+    font-weight: bold
174 
+}
175 
+h4 {
176 
+    display: block;
177 
+    margin-before: 1.33em;
178 
+    margin-after: 1.33em;
179 
+    margin-start: 0;
180 
+    margin-end: 0;
181 
+    font-weight: bold
182 
+}
183 
+h5 {
184 
+    display: block;
185 
+    font-size: .83em;
186 
+    margin-before: 1.67em;
187 
+    margin-after: 1.67em;
188 
+    margin-start: 0;
189 
+    margin-end: 0;
190 
+    font-weight: bold
191 
+}
192 
+h6 {
193 
+    display: block;
194 
+    font-size: .67em;
195 
+    margin-before: 2.33em;
196 
+    margin-after: 2.33em;
197 
+    margin-start: 0;
198 
+    margin-end: 0;
199 
+    font-weight: bold
200 
+}
201 
+/* tables */
202 
+table {
203 
+    display: table;
204 
+    border-collapse: separate;
205 
+    border-spacing: 2px;
206 
+    border-color: gray
207 
+}
208 
+thead {
209 
+    display: table-header-group;
210 
+    vertical-align: middle;
211 
+    border-color: inherit
212 
+}
213 
+tbody {
214 
+    display: table-row-group;
215 
+    vertical-align: middle;
216 
+    border-color: inherit
217 
+}
218 
+tfoot {
219 
+    display: table-footer-group;
220 
+    vertical-align: middle;
221 
+    border-color: inherit
222 
+}
223 
+/* for tables without table section elements (can happen with XHTML or dynamically created tables) */
224 
+table > tr {
225 
+    vertical-align: middle;
226 
+}
227 
+col {
228 
+    display: table-column
229 
+}
230 
+colgroup {
231 
+    display: table-column-group
232 
+}
233 
+tr {
234 
+    display: table-row;
235 
+    vertical-align: inherit;
236 
+    border-color: inherit
237 
+}
238 
+td, th {
239 
+    display: table-cell;
240 
+    vertical-align: inherit
241 
+}
242 
+th {
243 
+    font-weight: bold
244 
+}
245 
+caption {
246 
+    display: table-caption;
247 
+    text-align: center
248 
+}
249 
+/* lists */
250 
+ul, menu, dir {
251 
+    display: block;
252 
+    list-style-type: disc;
253 
+    margin-before: 1em;
254 
+    margin-after: 1em;
255 
+    margin-start: 0;
256 
+    margin-end: 0;
257 
+    padding-start: 40px
258 
+}
259 
+ol {
260 
+    display: block;
261 
+    list-style-type: decimal;
262 
+    margin-before: 1em;
263 
+    margin-after: 1em;
264 
+    margin-start: 0;
265 
+    margin-end: 0;
266 
+    padding-start: 40px
267 
+}
268 
+li {
269 
+    display: list-item;
270 
+    text-align: match-parent;
271 
+}
272 
+ul ul, ol ul {
273 
+    list-style-type: circle
274 
+}
275 
+ol ol ul, ol ul ul, ul ol ul, ul ul ul {
276 
+    list-style-type: square
277 
+}
278 
+dd {
279 
+    display: block;
280 
+    margin-start: 40px
281 
+}
282 
+dl {
283 
+    display: block;
284 
+    margin-before: 1em;
285 
+    margin-after: 1em;
286 
+    margin-start: 0;
287 
+    margin-end: 0;
288 
+}
289 
+dt {
290 
+    display: block
291 
+}
292 
+ol ul, ul ol, ul ul, ol ol {
293 
+    margin-before: 0;
294 
+    margin-after: 0
295 
+}
296 
+/* form elements */
297 
+form {
298 
+    display: block;
299 
+    margin-top: 0em;
300 
+}
301 
+label {
302 
+    cursor: default;
303 
+}
304 
+legend {
305 
+    display: block;
306 
+    padding-start: 2px;
307 
+    padding-end: 2px;
308 
+    border: none
309 
+}
310 
+fieldset {
311 
+    display: block;
312 
+    margin-start: 2px;
313 
+    margin-end: 2px;
314 
+    padding-before: 0.35em;
315 
+    padding-start: 0.75em;
316 
+    padding-end: 0.75em;
317 
+    padding-after: 0.625em;
318 
+    border: 2px groove ThreeDFace;
319 
+    min-width: min-content;
320 
+}
321 
+button {
322 
+    appearance: button;
323 
+}
324 
+/* Form controls don't go vertical. */
325 
+input, textarea, keygen, select, button, meter, progress {
326 
+    webkit-writing-mode: horizontal-tb !important;
327 
+}
328 
+input, textarea, keygen, select, button {
329 
+    margin: 0em;
330 
+    font: small-control;
331 
+    text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */
332 
+    color: initial;
333 
+    letter-spacing: normal;
334 
+    word-spacing: normal;
335 
+    line-height: normal;
336 
+    text-transform: none;
337 
+    text-indent: 0;
338 
+    text-shadow: none;
339 
+    display: inline-block;
340 
+    text-align: start;
341 
+}
342 
+input[type="hidden"] {
343 
+    display: none
344 
+}
345 
+input {
346 
+    appearance: textfield;
347 
+    padding: 1px;
348 
+    background-color: white;
349 
+    border: 2px inset;
350 
+    rtl-ordering: logical;
351 
+    user-select: text;
352 
+    cursor: auto;
353 
+}
354 
+input[type="search"] {
355 
+    appearance: searchfield;
356 
+    box-sizing: border-box;
357 
+}
358 
+input::-webkit-textfield-decoration-container {
359 
+    display: flex;
360 
+    align-items: center;
361 
+    -webkit-user-modify: read-only !important;
362 
+    content: none !important;
363 
+}
364 
+input[type="search"]::-webkit-textfield-decoration-container {
365 
+    direction: ltr;
366 
+}
367 
+input::-webkit-clear-button {
368 
+    -webkit-appearance: searchfield-cancel-button;
369 
+    display: inline-block;
370 
+    flex: none;
371 
+    -webkit-user-modify: read-only !important;
372 
+    -webkit-margin-start: 2px;
373 
+    opacity: 0;
374 
+    pointer-events: none;
375 
+}
376 
+input:enabled:read-write:any(:focus,:hover)::-webkit-clear-button {
377 
+    opacity: 1;
378 
+    pointer-events: auto;
379 
+}
380 
+input[type="search"]::-webkit-search-cancel-button {
381 
+    -webkit-appearance: searchfield-cancel-button;
382 
+    display: block;
383 
+    flex: none;
384 
+    -webkit-user-modify: read-only !important;
385 
+    -webkit-margin-start: 1px;
386 
+    opacity: 0;
387 
+    pointer-events: none;
388 
+}
389 
+input[type="search"]:enabled:read-write:any(:focus,:hover)::-webkit-search-cancel-button {
390 
+    opacity: 1;
391 
+    pointer-events: auto;
392 
+}
393 
+input[type="search"]::-webkit-search-decoration {
394 
+    -webkit-appearance: searchfield-decoration;
395 
+    display: block;
396 
+    flex: none;
397 
+    -webkit-user-modify: read-only !important;
398 
+    -webkit-align-self: flex-start;
399 
+    margin: auto 0;
400 
+}
401 
+input[type="search"]::-webkit-search-results-decoration {
402 
+    -webkit-appearance: searchfield-results-decoration;
403 
+    display: block;
404 
+    flex: none;
405 
+    -webkit-user-modify: read-only !important;
406 
+    -webkit-align-self: flex-start;
407 
+    margin: auto 0;
408 
+}
409 
+input::-webkit-inner-spin-button {
410 
+    -webkit-appearance: inner-spin-button;
411 
+    display: inline-block;
412 
+    cursor: default;
413 
+    flex: none;
414 
+    align-self: stretch;
415 
+    -webkit-user-select: none;
416 
+    -webkit-user-modify: read-only !important;
417 
+    opacity: 0;
418 
+    pointer-events: none;
419 
+}
420 
+input:enabled:read-write:any(:focus,:hover)::-webkit-inner-spin-button {
421 
+    opacity: 1;
422 
+    pointer-events: auto;
423 
+}
424 
+keygen, select {
425 
+    border-radius: 5px;
426 
+}
427 
+keygen::-webkit-keygen-select {
428 
+    margin: 0px;
429 
+}
430 
+textarea {
431 
+    -webkit-appearance: textarea;
432 
+    background-color: white;
433 
+    border: 1px solid;
434 
+    -webkit-rtl-ordering: logical;
435 
+    -webkit-user-select: text;
436 
+    flex-direction: column;
437 
+    resize: auto;
438 
+    cursor: auto;
439 
+    padding: 2px;
440 
+    white-space: pre-wrap;
441 
+    word-wrap: break-word;
442 
+}
443 
+::-webkit-input-placeholder {
444 
+    -webkit-text-security: none;
445 
+    color: darkGray;
446 
+    pointer-events: none !important;
447 
+}
448 
+input::-webkit-input-placeholder {
449 
+    white-space: pre;
450 
+    word-wrap: normal;
451 
+    overflow: hidden;
452 
+    -webkit-user-modify: read-only !important;
453 
+}
454 
+input[type="password"] {
455 
+    -webkit-text-security: disc !important;
456 
+}
457 
+input[type="hidden"], input[type="image"], input[type="file"] {
458 
+    appearance: initial;
459 
+    padding: initial;
460 
+    background-color: initial;
461 
+    border: initial;
462 
+}
463 
+input[type="file"] {
464 
+    align-items: baseline;
465 
+    color: inherit;
466 
+    text-align: start !important;
467 
+}
468 
+input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
469 
+    background-color: #FAFFBD !important;
470 
+    background-image:none !important;
471 
+    color: #000000 !important;
472 
+}
473 
+input[type="radio"], input[type="checkbox"] {
474 
+    margin: 3px 0.5ex;
475 
+    padding: initial;
476 
+    background-color: initial;
477 
+    border: initial;
478 
+}
479 
+input[type="button"], input[type="submit"], input[type="reset"] {
480 
+    appearance: push-button;
481 
+    user-select: none;
482 
+    white-space: pre
483 
+}
484 
+input[type="file"]::-webkit-file-upload-button {
485 
+    -webkit-appearance: push-button;
486 
+    -webkit-user-modify: read-only !important;
487 
+    white-space: nowrap;
488 
+    margin: 0;
489 
+    font-size: inherit;
490 
+}
491 
+input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
492 
+    align-items: flex-start;
493 
+    text-align: center;
494 
+    cursor: default;
495 
+    color: ButtonText;
496 
+    padding: 2px 6px 3px 6px;
497 
+    border: 2px outset ButtonFace;
498 
+    background-color: ButtonFace;
499 
+    box-sizing: border-box
500 
+}
501 
+input[type="range"] {
502 
+    appearance: slider-horizontal;
503 
+    padding: initial;
504 
+    border: initial;
505 
+    margin: 2px;
506 
+    color: #909090;
507 
+}
508 
+input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container {
509 
+    flex: 1;
510 
+    min-width: 0;
511 
+    box-sizing: border-box;
512 
+    -webkit-user-modify: read-only !important;
513 
+    display: flex;
514 
+}
515 
+input[type="range"]::-webkit-slider-runnable-track {
516 
+    flex: 1;
517 
+    min-width: 0;
518 
+    -webkit-align-self: center;
519 
+    box-sizing: border-box;
520 
+    -webkit-user-modify: read-only !important;
521 
+    display: block;
522 
+}
523 
+input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
524 
+    -webkit-appearance: sliderthumb-horizontal;
525 
+    box-sizing: border-box;
526 
+    -webkit-user-modify: read-only !important;
527 
+    display: block;
528 
+}
529 
+input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
530 
+input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
531 
+select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
532 
+select[disabled]>option {
533 
+    color: GrayText
534 
+}
535 
+input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
536 
+    border-style: inset
537 
+}
538 
+input[type="button"]:active:disabled, input[type="submit"]:active:disabled, input[type="reset"]:active:disabled, input[type="file"]:active:disabled::-webkit-file-upload-button, button:active:disabled {
539 
+    border-style: outset
540 
+}
541 
+option:-internal-spatial-navigation-focus {
542 
+    outline: black dashed 1px;
543 
+    outline-offset: -1px;
544 
+}
545 
+datalist {
546 
+    display: none
547 
+}
548 
+area {
549 
+    display: inline;
550 
+    cursor: pointer;
551 
+}
552 
+param {
553 
+    display: none
554 
+}
555 
+input[type="checkbox"] {
556 
+    appearance: checkbox;
557 
+    box-sizing: border-box;
558 
+}
559 
+input[type="radio"] {
560 
+    appearance: radio;
561 
+    box-sizing: border-box;
562 
+}
563 
+input[type="color"] {
564 
+    appearance: square-button;
565 
+    width: 44px;
566 
+    height: 23px;
567 
+    background-color: ButtonFace;
568 
+    /* Same as native_theme_base. */
569 
+    border: 1px #a9a9a9 solid;
570 
+    padding: 1px 2px;
571 
+}
572 
+input[type="color"]::-webkit-color-swatch-wrapper {
573 
+    display:flex;
574 
+    padding: 4px 2px;
575 
+    box-sizing: border-box;
576 
+    -webkit-user-modify: read-only !important;
577 
+    width: 100%;
578 
+    height: 100%
579 
+}
580 
+input[type="color"]::-webkit-color-swatch {
581 
+    background-color: #000000;
582 
+    border: 1px solid #777777;
583 
+    flex: 1;
584 
+    min-width: 0;
585 
+    -webkit-user-modify: read-only !important;
586 
+}
587 
+input[type="color"][list] {
588 
+    appearance: menulist;
589 
+    width: 88px;
590 
+    height: 23px
591 
+}
592 
+input[type="color"][list]::-webkit-color-swatch-wrapper {
593 
+    padding-left: 8px;
594 
+    padding-right: 24px;
595 
+}
596 
+input[type="color"][list]::-webkit-color-swatch {
597 
+    border-color: #000000;
598 
+}
599 
+input::-webkit-calendar-picker-indicator {
600 
+    display: inline-block;
601 
+    width: 0.66em;
602 
+    height: 0.66em;
603 
+    padding: 0.17em 0.34em;
604 
+    -webkit-user-modify: read-only !important;
605 
+    opacity: 0;
606 
+    pointer-events: none;
607 
+}
608 
+input::-webkit-calendar-picker-indicator:hover {
609 
+    background-color: #eee;
610 
+}
611 
+input:enabled:read-write:any(:focus,:hover)::-webkit-calendar-picker-indicator,
612 
+input::-webkit-calendar-picker-indicator:focus {
613 
+    opacity: 1;
614 
+    pointer-events: auto;
615 
+}
616 
+input[type="date"]:disabled::-webkit-clear-button,
617 
+input[type="date"]:disabled::-webkit-inner-spin-button,
618 
+input[type="datetime-local"]:disabled::-webkit-clear-button,
619 
+input[type="datetime-local"]:disabled::-webkit-inner-spin-button,
620 
+input[type="month"]:disabled::-webkit-clear-button,
621 
+input[type="month"]:disabled::-webkit-inner-spin-button,
622 
+input[type="week"]:disabled::-webkit-clear-button,
623 
+input[type="week"]:disabled::-webkit-inner-spin-button,
624 
+input:disabled::-webkit-calendar-picker-indicator,
625 
+input[type="date"][readonly]::-webkit-clear-button,
626 
+input[type="date"][readonly]::-webkit-inner-spin-button,
627 
+input[type="datetime-local"][readonly]::-webkit-clear-button,
628 
+input[type="datetime-local"][readonly]::-webkit-inner-spin-button,
629 
+input[type="month"][readonly]::-webkit-clear-button,
630 
+input[type="month"][readonly]::-webkit-inner-spin-button,
631 
+input[type="week"][readonly]::-webkit-clear-button,
632 
+input[type="week"][readonly]::-webkit-inner-spin-button,
633 
+input[readonly]::-webkit-calendar-picker-indicator {
634 
+    visibility: hidden;
635 
+}
636 
+select {
637 
+    appearance: menulist;
638 
+    box-sizing: border-box;
639 
+    align-items: center;
640 
+    border: 1px solid;
641 
+    white-space: pre;
642 
+    rtl-ordering: logical;
643 
+    color: black;
644 
+    background-color: white;
645 
+    cursor: default;
646 
+}
647 
+select:not(:-internal-list-box) {
648 
+    overflow: visible !important;
649 
+}
650 
+select:-internal-list-box {
651 
+    appearance: listbox;
652 
+    align-items: flex-start;
653 
+    border: 1px inset gray;
654 
+    border-radius: initial;
655 
+    overflow-x: hidden;
656 
+    overflow-y: scroll;
657 
+    vertical-align: text-bottom;
658 
+    user-select: none;
659 
+    white-space: nowrap;
660 
+}
661 
+optgroup {
662 
+    font-weight: bolder;
663 
+    display: block;
664 
+}
665 
+option {
666 
+    font-weight: normal;
667 
+    display: block;
668 
+    padding: 0 2px 1px 2px;
669 
+    white-space: pre;
670 
+    min-height: 1.2em;
671 
+}
672 
+select:-internal-list-box optgroup option:before {
673 
+    content: "\00a0\00a0\00a0\00a0";;
674 
+}
675 
+select:-internal-list-box option,
676 
+select:-internal-list-box optgroup {
677 
+    line-height: initial !important;
678 
+}
679 
+select:-internal-list-box:focus option:checked {
680 
+    background-color: -internal-active-list-box-selection !important;
681 
+    color: -internal-active-list-box-selection-text !important;
682 
+}
683 
+select:-internal-list-box option:checked {
684 
+    background-color: -internal-inactive-list-box-selection !important;
685 
+    color: -internal-inactive-list-box-selection-text !important;
686 
+}
687 
+select:-internal-list-box:disabled option:checked,
688 
+select:-internal-list-box option:checked:disabled {
689 
+    color: gray !important;
690 
+}
691 
+select:-internal-list-box hr {
692 
+    border-style: none;
693 
+}
694 
+output {
695 
+    display: inline;
696 
+}
697 
+/* meter */
698 
+meter {
699 
+    appearance: meter;
700 
+    box-sizing: border-box;
701 
+    display: inline-block;
702 
+    height: 1em;
703 
+    width: 5em;
704 
+    vertical-align: -0.2em;
705 
+}
706 
+meter::-webkit-meter-inner-element {
707 
+    -webkit-appearance: inherit;
708 
+    box-sizing: inherit;
709 
+    -webkit-user-modify: read-only !important;
710 
+    height: 100%;
711 
+    width: 100%;
712 
+}
713 
+meter::-webkit-meter-bar {
714 
+    background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
715 
+    height: 100%;
716 
+    width: 100%;
717 
+    -webkit-user-modify: read-only !important;
718 
+    box-sizing: border-box;
719 
+}
720 
+meter::-webkit-meter-optimum-value {
721 
+    background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
722 
+    height: 100%;
723 
+    -webkit-user-modify: read-only !important;
724 
+    box-sizing: border-box;
725 
+}
726 
+meter::-webkit-meter-suboptimum-value {
727 
+    background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7);
728 
+    height: 100%;
729 
+    -webkit-user-modify: read-only !important;
730 
+    box-sizing: border-box;
731 
+}
732 
+meter::-webkit-meter-even-less-good-value {
733 
+    background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
734 
+    height: 100%;
735 
+    -webkit-user-modify: read-only !important;
736 
+    box-sizing: border-box;
737 
+}
738 
+/* progress */
739 
+progress {
740 
+    appearance: progress-bar;
741 
+    box-sizing: border-box;
742 
+    display: inline-block;
743 
+    height: 1em;
744 
+    width: 10em;
745 
+    vertical-align: -0.2em;
746 
+}
747 
+progress::-webkit-progress-inner-element {
748 
+    -webkit-appearance: inherit;
749 
+    box-sizing: inherit;
750 
+    -webkit-user-modify: read-only;
751 
+    height: 100%;
752 
+    width: 100%;
753 
+}
754 
+progress::-webkit-progress-bar {
755 
+    background-color: gray;
756 
+    height: 100%;
757 
+    width: 100%;
758 
+    -webkit-user-modify: read-only !important;
759 
+    box-sizing: border-box;
760 
+}
761 
+progress::-webkit-progress-value {
762 
+    background-color: green;
763 
+    height: 100%;
764 
+    width: 50%; /* should be removed later */
765 
+    -webkit-user-modify: read-only !important;
766 
+    box-sizing: border-box;
767 
+}
768 
+/* inline elements */
769 
+u, ins {
770 
+    text-decoration: underline
771 
+}
772 
+strong, b {
773 
+    font-weight: bold
774 
+}
775 
+i, cite, em, var, address, dfn {
776 
+    font-style: italic
777 
+}
778 
+tt, code, kbd, samp {
779 
+    font-family: monospace
780 
+}
781 
+pre, xmp, plaintext, listing {
782 
+    display: block;
783 
+    font-family: monospace;
784 
+    white-space: pre;
785 
+    margin: 1em 0
786 
+}
787 
+mark {
788 
+    background-color: yellow;
789 
+    color: black
790 
+}
791 
+big {
792 
+    font-size: larger
793 
+}
794 
+small {
795 
+    font-size: smaller
796 
+}
797 
+s, strike, del {
798 
+    text-decoration: line-through
799 
+}
800 
+sub {
801 
+    vertical-align: sub;
802 
+    font-size: smaller
803 
+}
804 
+sup {
805 
+    vertical-align: super;
806 
+    font-size: smaller
807 
+}
808 
+nobr {
809 
+    white-space: nowrap
810 
+}
811 
+/* states */
812 
+:focus {
813 
+    outline: auto 5px Highlight
814 
+}
815 
+/* Read-only text fields do not show a focus ring but do still receive focus */
816 
+html:focus, body:focus, input[readonly]:focus {
817 
+    outline: none
818 
+}
819 
+embed:focus, iframe:focus, object:focus {
820 
+    outline: none
821 
+}
822 
+
823 
+input:focus, textarea:focus, keygen:focus, select:focus {
824 
+    outline-offset: -2px
825 
+}
826 
+input[type="button"]:focus,
827 
+input[type="checkbox"]:focus,
828 
+input[type="file"]:focus,
829 
+input[type="hidden"]:focus,
830 
+input[type="image"]:focus,
831 
+input[type="radio"]:focus,
832 
+input[type="reset"]:focus,
833 
+input[type="search"]:focus,
834 
+input[type="submit"]:focus,
835 
+input[type="file"]:focus::-webkit-file-upload-button {
836 
+    outline-offset: 0
837 
+}
838 
+
839 
+a:any-link {
840 
+    color: -webkit-link;
841 
+    text-decoration: underline;
842 
+    cursor: auto;
843 
+}
844 
+a:any-link:active {
845 
+    color: -webkit-activelink
846 
+}
847 
+/* HTML5 ruby elements */
848 
+ruby, rt {
849 
+    text-indent: 0; /* blocks used for ruby rendering should not trigger this */
850 
+}
851 
+rt {
852 
+    line-height: normal;
853 
+    text-emphasis: none;
854 
+}
855 
+ruby > rt {
856 
+    display: block;
857 
+    font-size: 50%;
858 
+    text-align: start;
859 
+}
860 
+ruby > rp {
861 
+    display: none;
862 
+}
863 
+/* other elements */
864 
+noframes {
865 
+    display: none
866 
+}
867 
+frameset, frame {
868 
+    display: block
869 
+}
870 
+frameset {
871 
+    border-color: inherit
872 
+}
873 
+iframe {
874 
+    border: 2px inset
875 
+}
876 
+details {
877 
+    display: block
878 
+}
879 
+summary {
880 
+    display: block
881 
+}
882 
+summary::-webkit-details-marker {
883 
+    display: inline-block;
884 
+    width: 0.66em;
885 
+    height: 0.66em;
886 
+    -webkit-margin-end: 0.4em;
887 
+}
888 
+template {
889 
+    display: none
890 
+}
891 
+bdi, output {
892 
+    unicode-bidi: isolate;
893 
+}
894 
+bdo {
895 
+    unicode-bidi: bidi-override;
896 
+}
897 
+textarea[dir=auto] {
898 
+    unicode-bidi: plaintext;
899 
+}
900 
+dialog:not([open]) {
901 
+    display: none
902 
+}
903 
+dialog {
904 
+    position: absolute;
905 
+    left: 0;
906 
+    right: 0;
907 
+    width: fit-content;
908 
+    height: fit-content;
909 
+    margin: auto;
910 
+    border: solid;
911 
+    padding: 1em;
912 
+    background: white;
913 
+    color: black
914 
+}
915 
+dialog::backdrop {
916 
+    position: fixed;
917 
+    top: 0;
918 
+    right: 0;
919 
+    bottom: 0;
920 
+    left: 0;
921 
+    background: rgba(0,0,0,0.1)
922 
+}
923 
+/* page */
924 
+@page {
925 
+    /* FIXME: Define the right default values for page properties. */
926 
+    size: auto;
927 
+    margin: auto;
928 
+    padding: 0px;
929 
+    border-width: 0px;
930 
+}
931 
+/* Disable multicol in printing, since it's not implemented properly. See crbug.com/99358 */
932 
+@media print {
933 
+    * { columns: auto !important; }
934 
+}
935 
+/* noscript is handled internally, as it depends on settings. */

File diff suppressed because it is too large
+ 1 - 0
dist/default.min.css


+ 74 - 0
dist/default.min.js
View File 

@@ -0,0 +1,74 @@
1 
+/******/ (function(modules) { // webpackBootstrap
2 
+/******/ 	// The module cache
3 
+/******/ 	var installedModules = {};
4 
+/******/
5 
+/******/ 	// The require function
6 
+/******/ 	function __webpack_require__(moduleId) {
7 
+/******/
8 
+/******/ 		// Check if module is in cache
9 
+/******/ 		if(installedModules[moduleId]) {
10 
+/******/ 			return installedModules[moduleId].exports;
11 
+/******/ 		}
12 
+/******/ 		// Create a new module (and put it into the cache)
13 
+/******/ 		var module = installedModules[moduleId] = {
14 
+/******/ 			i: moduleId,
15 
+/******/ 			l: false,
16 
+/******/ 			exports: {}
17 
+/******/ 		};
18 
+/******/
19 
+/******/ 		// Execute the module function
20 
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 
+/******/
22 
+/******/ 		// Flag the module as loaded
23 
+/******/ 		module.l = true;
24 
+/******/
25 
+/******/ 		// Return the exports of the module
26 
+/******/ 		return module.exports;
27 
+/******/ 	}
28 
+/******/
29 
+/******/
30 
+/******/ 	// expose the modules object (__webpack_modules__)
31 
+/******/ 	__webpack_require__.m = modules;
32 
+/******/
33 
+/******/ 	// expose the module cache
34 
+/******/ 	__webpack_require__.c = installedModules;
35 
+/******/
36 
+/******/ 	// define getter function for harmony exports
37 
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
38 
+/******/ 		if(!__webpack_require__.o(exports, name)) {
39 
+/******/ 			Object.defineProperty(exports, name, {
40 
+/******/ 				configurable: false,
41 
+/******/ 				enumerable: true,
42 
+/******/ 				get: getter
43 
+/******/ 			});
44 
+/******/ 		}
45 
+/******/ 	};
46 
+/******/
47 
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
48 
+/******/ 	__webpack_require__.n = function(module) {
49 
+/******/ 		var getter = module && module.__esModule ?
50 
+/******/ 			function getDefault() { return module['default']; } :
51 
+/******/ 			function getModuleExports() { return module; };
52 
+/******/ 		__webpack_require__.d(getter, 'a', getter);
53 
+/******/ 		return getter;
54 
+/******/ 	};
55 
+/******/
56 
+/******/ 	// Object.prototype.hasOwnProperty.call
57 
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
58 
+/******/
59 
+/******/ 	// __webpack_public_path__
60 
+/******/ 	__webpack_require__.p = "";
61 
+/******/
62 
+/******/ 	// Load entry module and return exports
63 
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
64 
+/******/ })
65 
+/************************************************************************/
66 
+/******/ ([
67 
+/* 0 */
68 
+/***/ (function(module, exports) {
69 
+
70 
+// removed by extract-text-webpack-plugin
71 
+
72 
+/***/ })
73 
+/******/ ]);
74 
+//# sourceMappingURL=default.min.js.map

File diff suppressed because it is too large
+ 1 - 0
dist/default.min.js.map


File diff suppressed because it is too large
+ 1 - 0
dist/example.min.css


+ 75 - 0
dist/example.min.js
View File 

@@ -0,0 +1,75 @@
1 
+/******/ (function(modules) { // webpackBootstrap
2 
+/******/ 	// The module cache
3 
+/******/ 	var installedModules = {};
4 
+/******/
5 
+/******/ 	// The require function
6 
+/******/ 	function __webpack_require__(moduleId) {
7 
+/******/
8 
+/******/ 		// Check if module is in cache
9 
+/******/ 		if(installedModules[moduleId]) {
10 
+/******/ 			return installedModules[moduleId].exports;
11 
+/******/ 		}
12 
+/******/ 		// Create a new module (and put it into the cache)
13 
+/******/ 		var module = installedModules[moduleId] = {
14 
+/******/ 			i: moduleId,
15 
+/******/ 			l: false,
16 
+/******/ 			exports: {}
17 
+/******/ 		};
18 
+/******/
19 
+/******/ 		// Execute the module function
20 
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 
+/******/
22 
+/******/ 		// Flag the module as loaded
23 
+/******/ 		module.l = true;
24 
+/******/
25 
+/******/ 		// Return the exports of the module
26 
+/******/ 		return module.exports;
27 
+/******/ 	}
28 
+/******/
29 
+/******/
30 
+/******/ 	// expose the modules object (__webpack_modules__)
31 
+/******/ 	__webpack_require__.m = modules;
32 
+/******/
33 
+/******/ 	// expose the module cache
34 
+/******/ 	__webpack_require__.c = installedModules;
35 
+/******/
36 
+/******/ 	// define getter function for harmony exports
37 
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
38 
+/******/ 		if(!__webpack_require__.o(exports, name)) {
39 
+/******/ 			Object.defineProperty(exports, name, {
40 
+/******/ 				configurable: false,
41 
+/******/ 				enumerable: true,
42 
+/******/ 				get: getter
43 
+/******/ 			});
44 
+/******/ 		}
45 
+/******/ 	};
46 
+/******/
47 
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
48 
+/******/ 	__webpack_require__.n = function(module) {
49 
+/******/ 		var getter = module && module.__esModule ?
50 
+/******/ 			function getDefault() { return module['default']; } :
51 
+/******/ 			function getModuleExports() { return module; };
52 
+/******/ 		__webpack_require__.d(getter, 'a', getter);
53 
+/******/ 		return getter;
54 
+/******/ 	};
55 
+/******/
56 
+/******/ 	// Object.prototype.hasOwnProperty.call
57 
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
58 
+/******/
59 
+/******/ 	// __webpack_public_path__
60 
+/******/ 	__webpack_require__.p = "";
61 
+/******/
62 
+/******/ 	// Load entry module and return exports
63 
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
64 
+/******/ })
65 
+/************************************************************************/
66 
+/******/ ([
67 
+/* 0 */,
68 
+/* 1 */
69 
+/***/ (function(module, exports) {
70 
+
71 
+// removed by extract-text-webpack-plugin
72 
+
73 
+/***/ })
74 
+/******/ ]);
75 
+//# sourceMappingURL=example.min.js.map

File diff suppressed because it is too large
+ 1 - 0
dist/example.min.js.map


+ 46 - 0
example/example.scss
View File 

@@ -0,0 +1,46 @@
1 
+/* Note: Because postcss-prepend-selector is used in this project, all selectors defined in any CSS/SCSS file will have
2 
+ * "#embedded.embedded " prepended to them so that all styles here will be scoped to *only* the root div. */
3 
+
4 
+/* reset all element properties to initial values as defined in CSS spec (*not* browser defaults) */
5 
+* {
6 
+  all: initial;
7 
+  /* allow all elements to inherit these properties from the root "body" div */
8 
+  font-family: inherit;
9 
+  font-size: inherit;
10 
+  font-weight: inherit;
11 
+  line-height: inherit;
12 
+  color: inherit;
13 
+  text-align: left;
14 
+  background-color: inherit;
15 
+  cursor: inherit;
16 
+}
17 
+
18 
+/* apply Firefox's default stylesheet so that Bootstrap has some browser-like styling to work with */
19 
+// @import '../default.css';
20 
+@import '../firefox.css';
21 
+
22 
+/* apply the Bootstrap reboot (normalize.css) to convert Firefox default styling to some cross-browser baseline
23 
+ * then, apply the Bootstrap component styling */
24 
+// @import '~bootstrap/scss/bootstrap';
25 
+
26 
+/* Since elements inside the embedded div can no longer inherit styles set on the <body>, we will apply the styles
27 
+ * that the Bootstrap reboot applies to the <body> on the wrapper div instead, which containing elements can inherit.
28 
+ *
29 
+ * <div id="embedded" class="embedded">
30 
+ *   <div class="embedded-wrapper">
31 
+ *     <!-- ... embedded component here ... -->
32 
+ *   </div>
33 
+ * </div>
34 
+ */
35 
+.embedded-wrapper {
36 
+  font-family: sans-serif;
37 
+  font-size: 16px;
38 
+  font-weight: normal;
39 
+  line-height: 16px;
40 
+  color: black;
41 
+  text-align: left;
42 
+  background-color: rgb(255, 255, 255);
43 
+  border: 2px solid red;
44 
+  margin: 10px;
45 
+  padding: 10px;
46 
+}

+ 66 - 0
example/index.html
View File 

@@ -0,0 +1,66 @@
1 
+<html>
2 
+  <head>
3 
+    <style>
4 
+      body {
5 
+        background-color: cornsilk;
6 
+      }
7 
+      p, input, label, select, ul, ol, code, pre, blockquote, button {
8 
+        background-color: pink;
9 
+        color: black;
10 
+        font-family: monospace;
11 
+        margin: 10px;
12 
+      }
13 
+    </style>
14 
+    <link rel="stylesheet" type="text/css" href="../dist/example.min.css">
15 
+  </head>
16 
+  <body>
17 
+    <div>
18 
+      <p>These are elements affected by the global styling on this page.</p>
19 
+      <label><input type="checkbox"> A checkbox</label><br>
20 
+      <input type="button" value="A button"><br>
21 
+      <input type="textarea" value="Example text"><br>
22 
+      <select>
23 
+        <option value="1">Option 1</option>
24 
+        <option value="2">Option 2</option>
25 
+        <option value="3">Option 3</option>
26 
+      </select>
27 
+      <ul>
28 
+        <li>One</li>
29 
+        <li>Two</li>
30 
+      </ul>
31 
+      <ol>
32 
+        <li>One</li>
33 
+        <li>Two</li>
34 
+      </ol>
35 
+      <code>function () { console.log('Hello, world!'); }</code><br>
36 
+      <pre>preformatted</pre><br>
37 
+      <blockquote>"This is a blockquote!"</blockquote>
38 
+      <button>Button!</button>
39 
+    </div>
40 
+    <div id="embedded" class="embedded">
41 
+      <div class="embedded-wrapper">
42 
+        <p>This is an embedded component isolated from the surrounding CSS cascade.</p>
43 
+        <label><input type="checkbox"> A checkbox</label><br>
44 
+        <input type="button" value="A button"><br>
45 
+        <input type="textarea" value="Example text"><br>
46 
+        <select>
47 
+          <option value="1">Option 1</option>
48 
+          <option value="2">Option 2</option>
49 
+          <option value="3">Option 3</option>
50 
+        </select>
51 
+        <ul>
52 
+          <li>One</li>
53 
+          <li>Two</li>
54 
+        </ul>
55 
+        <ol>
56 
+          <li>One</li>
57 
+          <li>Two</li>
58 
+        </ol>
59 
+        <code>function () { console.log('Hello, world!'); }</code><br>
60 
+        <pre>preformatted</pre><br>
61 
+        <blockquote>"This is a blockquote!"</blockquote>
62 
+        <button>Button!</button>
63 
+      </div>
64 
+    </div>
65 
+  </body>
66 
+</html>

File diff suppressed because it is too large
+ 2648 - 0
firefox.css


+ 1 - 0
index.js
View File 

@@ -0,0 +1 @@
1 
+import defaultStyle from './default.css';

File diff suppressed because it is too large
+ 7411 - 0
package-lock.json


+ 49 - 0
package.json
View File 

@@ -0,0 +1,49 @@
1 
+{
2 
+  "name": "default-stylesheet",
3 
+  "version": "0.1.0",
4 
+  "description": "Return styles to browser defaults.",
5 
+  "main": "index.js",
6 
+  "scripts": {
7 
+    "test": "echo \"Error: no test specified\" && exit 1",
8 
+    "build": "./node_modules/.bin/webpack"
9 
+  },
10 
+  "repository": {
11 
+    "type": "git",
12 
+    "url": "git+https://github.com/thallada/default-stylesheet.git"
13 
+  },
14 
+  "keywords": [
15 
+    "css",
16 
+    "unreset",
17 
+    "all:initial",
18 
+    "reset",
19 
+    "postcss",
20 
+    "browser",
21 
+    "default",
22 
+    "stylesheet"
23 
+  ],
24 
+  "author": {
25 
+    "name": "Tyler Hallada",
26 
+    "email": "tyler@hallada.net",
27 
+    "url": "https://www.hallada.net"
28 
+  },
29 
+  "license": "MIT",
30 
+  "bugs": {
31 
+    "url": "https://github.com/thallada/default-stylesheet/issues"
32 
+  },
33 
+  "homepage": "https://github.com/thallada/default-stylesheet#readme",
34 
+  "devDependencies": {
35 
+    "autoprefixer": "^8.0.0",
36 
+    "bootstrap": "^4.0.0",
37 
+    "css-loader": "^0.28.9",
38 
+    "extract-text-webpack-plugin": "^3.0.2",
39 
+    "node-sass": "^4.7.2",
40 
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
41 
+    "postcss-initial": "^2.0.0",
42 
+    "postcss-loader": "^2.1.0",
43 
+    "postcss-prepend-selector": "^0.3.1",
44 
+    "sass-loader": "^6.0.6",
45 
+    "style-loader": "^0.20.2",
46 
+    "webpack": "^3.11.0"
47 
+  },
48 
+  "dependencies": {}
49 
+}

+ 67 - 0
webpack.config.js
View File 

@@ -0,0 +1,67 @@
1 
+const path = require('path');
2 
+const webpack = require('webpack');
3 
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
4 
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
5 
+
6 
+module.exports = {
7 
+  entry: {
8 
+    default: path.resolve(__dirname, 'firefox.css'),
9 
+    example: path.resolve(__dirname, 'example/example.scss')
10 
+  },
11 
+  output: {
12 
+    filename: '[name].min.js',
13 
+    path: path.resolve(__dirname, 'dist'),
14 
+  },
15 
+  devtool: 'source-map',
16 
+  module: {
17 
+    rules: [
18 
+      {
19 
+        test: /(.scss|.css)$/,
20 
+        use: ExtractTextPlugin.extract({
21 
+          fallback: 'style-loader',
22 
+          use: [
23 
+            {
24 
+              loader: 'css-loader',
25 
+              options: {
26 
+                sourceMap: true,
27 
+                minimize: true,
28 
+                importLoaders: 1,
29 
+              },
30 
+            },
31 
+            {
32 
+              loader: 'postcss-loader',
33 
+              options: {
34 
+                sourceMap: true,
35 
+                ident: 'postcss',
36 
+                plugins: () => [
37 
+                  /* eslint-disable global-require */
38 
+                  require('autoprefixer'),
39 
+                  require('postcss-initial')(),
40 
+                  require('postcss-prepend-selector')({ selector: '#embedded.embedded ' }),
41 
+                  /* eslint-enable global-require */
42 
+                ],
43 
+              },
44 
+            },
45 
+            {
46 
+              loader: 'sass-loader',
47 
+              options: {
48 
+                sourceMap: true,
49 
+                includePaths: [
50 
+                  path.join(__dirname),
51 
+                  path.join(__dirname, 'node_modules'),
52 
+                ],
53 
+              },
54 
+            },
55 
+          ],
56 
+        }),
57 
+      },
58 
+    ],
59 
+  },
60 
+  plugins: [
61 
+    new ExtractTextPlugin({
62 
+      filename: '[name].min.css',
63 
+      allChunks: true,
64 
+    }),
65 
+    new OptimizeCssAssetsPlugin(),
66 
+  ],
67 
+};