Add more elements to example, matches-prefixer.js

This commit is contained in:
Tyler Hallada 2018-02-18 20:25:59 -05:00
parent 55892661d8
commit b9495246c5
10 changed files with 131 additions and 34 deletions

View File

@ -182,7 +182,7 @@ h1 {
}
h2,
:any(article, aside, nav, section)
:matches(article, aside, nav, section)
h1 {
display: block;
font-size: 1.5em;
@ -192,8 +192,8 @@ h1 {
}
h3,
:any(article, aside, nav, section)
:any(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
h1 {
display: block;
font-size: 1.17em;
@ -203,9 +203,9 @@ h1 {
}
h4,
:any(article, aside, nav, section)
:any(article, aside, nav, section)
:any(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
h1 {
display: block;
font-size: 1.00em;
@ -215,10 +215,10 @@ h1 {
}
h5,
:any(article, aside, nav, section)
:any(article, aside, nav, section)
:any(article, aside, nav, section)
:any(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
h1 {
display: block;
font-size: 0.83em;
@ -228,11 +228,11 @@ h1 {
}
h6,
: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)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
h1 {
display: block;
font-size: 0.67em;
@ -595,26 +595,26 @@ li {
}
/* nested lists have no top/bottom margins */
:any(ul, ol, dir, menu, dl) ul,
:any(ul, ol, dir, menu, dl) ol,
:any(ul, ol, dir, menu, dl) dir,
:any(ul, ol, dir, menu, dl) menu,
:any(ul, ol, dir, menu, dl) dl {
:matches(ul, ol, dir, menu, dl) ul,
:matches(ul, ol, dir, menu, dl) ol,
:matches(ul, ol, dir, menu, dl) dir,
:matches(ul, ol, dir, menu, dl) menu,
:matches(ul, ol, dir, menu, dl) dl {
margin-block-start: 0;
margin-block-end: 0;
}
/* 2 deep unordered lists use a circle */
:any(ol, ul, menu, dir) ul,
:any(ol, ul, menu, dir) menu,
:any(ol, ul, menu, dir) dir {
:matches(ol, ul, menu, dir) ul,
:matches(ol, ul, menu, dir) menu,
:matches(ol, ul, menu, dir) dir {
list-style-type: circle;
}
/* 3 deep (or more) unordered lists use a square */
:any(ol, ul, menu, dir) :any(ol, ul, menu, dir) ul,
:any(ol, ul, menu, dir) :any(ol, ul, menu, dir) menu,
:any(ol, ul, menu, dir) :any(ol, ul, menu, dir) dir {
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
list-style-type: square;
}
@ -647,7 +647,7 @@ img:loading::before, input:loading::before {
unicode-bidi: isolate;
}
object:any(:broken,:user-disabled) > *|* {
object:matches(:broken,:user-disabled) > *|* {
/*
Inherit in the object's alignment so that if we aren't aligned explicitly
we'll end up in the right place vertically. See bug 36997. Note that this

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
{"version":3,"sources":["webpack:///webpack/bootstrap add6754c5e43901b19c8","webpack:///./default.css?6b83"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;AC7DA,yC","file":"default.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap add6754c5e43901b19c8","// removed by extract-text-webpack-plugin\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./default.css\n// module id = 0\n// module chunks = 1"],"sourceRoot":""}
{"version":3,"sources":["webpack:///webpack/bootstrap b0a4e0b87931c2419fb0","webpack:///./default.css?6b83"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;AC7DA,yC","file":"default.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap b0a4e0b87931c2419fb0","// removed by extract-text-webpack-plugin\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./default.css\n// module id = 0\n// module chunks = 1"],"sourceRoot":""}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
{"version":3,"sources":["webpack:///webpack/bootstrap add6754c5e43901b19c8","webpack:///./example/example.scss?4e7f"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;AC7DA,yC","file":"example.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 1);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap add6754c5e43901b19c8","// removed by extract-text-webpack-plugin\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./example/example.scss\n// module id = 1\n// module chunks = 0"],"sourceRoot":""}
{"version":3,"sources":["webpack:///webpack/bootstrap b0a4e0b87931c2419fb0","webpack:///./example/example.scss?4e7f"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;AC7DA,yC","file":"example.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 1);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap b0a4e0b87931c2419fb0","// removed by extract-text-webpack-plugin\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./example/example.scss\n// module id = 1\n// module chunks = 0"],"sourceRoot":""}

View File

@ -4,7 +4,8 @@
body {
background-color: cornsilk;
}
p, input, label, select, ul, ol, code, pre, blockquote, button {
p, input, label, select, ul, ol, code, pre, blockquote, button, table, hr, details, summary, em, strong, i, b, q,
s, small, span, a, h1, h2, h3, h4, h5, h6 {
background-color: pink;
color: black;
font-family: monospace;
@ -16,6 +17,18 @@
<body>
<div>
<p>These are elements affected by the global styling on this page.</p>
<p>
<em>Emphasized</em> <strong>strong</strong> <i>italic</i> <b>bold</b> <q>quoted</q> <s>strikethrough</s>
<small>small</small>
</p>
<span>Span</span><br>
<a href="https://github.com/thallada/default-stylesheet">Link</a><br>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<label><input type="checkbox"> A checkbox</label><br>
<input type="button" value="A button"><br>
<input type="textarea" value="Example text"><br>
@ -35,11 +48,42 @@
<code>function () { console.log('Hello, world!'); }</code><br>
<pre>preformatted</pre><br>
<blockquote>"This is a blockquote!"</blockquote>
<table>
<tr>
<th>Category 1</th>
<th>Category 2</th>
</tr>
<tr>
<td>0.34</td>
<td>1.12</td>
</tr>
</table>
<hr>
<details open>
<summary>Summary</summary>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</details>
<button>Button!</button>
</div>
<div id="embedded" class="embedded">
<div class="embedded-wrapper">
<p>This is an embedded component isolated from the surrounding CSS cascade.</p>
<p>
<em>Emphasized</em> <strong>strong</strong> <i>italic</i> <b>bold</b> <q>quoted</q> <s>strikethrough</s>
<small>small</small>
</p>
<span>Span</span><br>
<a href="https://github.com/thallada/default-stylesheet">Link</a><br>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<label><input type="checkbox"> A checkbox</label><br>
<input type="button" value="A button"><br>
<input type="textarea" value="Example text"><br>
@ -59,6 +103,25 @@
<code>function () { console.log('Hello, world!'); }</code><br>
<pre>preformatted</pre><br>
<blockquote>"This is a blockquote!"</blockquote>
<table>
<tr>
<th>Category 1</th>
<th>Category 2</th>
</tr>
<tr>
<td>0.34</td>
<td>1.12</td>
</tr>
</table>
<hr>
<details open>
<summary>Summary</summary>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</details>
<button>Button!</button>
</div>
</div>

33
matches-prefixer.js Normal file
View File

@ -0,0 +1,33 @@
// From: https://gist.github.com/dennisgaebel/4290fd6e5dbba5e9b35e2587dcc20849
const postcss = require('postcss');
module.exports = postcss.plugin('postcss-matches', () => {
return root => {
root.walkRules(rule => {
if (rule.selector.indexOf(':matches(') !== -1) {
mozRule = rule.clone();
webkitRule = rule.clone();
mozRule.selectors = rule.selectors.reduce((all, i) => {
if (i.indexOf(':matches(') !== -1) {
return all.concat([
i.replace(/:matches\(/gi, ':-moz-any(')
])
} else {
return all.concat([i])
}
}, []);
webkitRule.selectors = rule.selectors.reduce((all, i) => {
if (i.indexOf(':matches(') !== -1) {
return all.concat([
i.replace(/:matches\(/gi, ':-webkit-any('),
])
} else {
return all.concat([i])
}
}, []);
root.append(mozRule);
root.append(webkitRule);
}
})
}
});

View File

@ -35,6 +35,7 @@ module.exports = {
plugins: () => [
/* eslint-disable global-require */
require('autoprefixer'),
require('./matches-prefixer.js'),
require('postcss-initial')(),
require('postcss-prepend-selector')({ selector: '#embedded.embedded ' }),
/* eslint-enable global-require */