Add more elements to example, matches-prefixer.js

Esse commit está contido em:
Tyler Hallada 2018-02-18 20:25:59 -05:00
commit b9495246c5
10 arquivos alterados com 131 adições e 34 exclusões

Ver arquivo

@ -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

Diff do arquivo suprimido porque uma ou mais linhas são muito longas

Diff do arquivo suprimido porque uma ou mais linhas são muito longas

Ver arquivo

@ -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":""}

Diff do arquivo suprimido porque uma ou mais linhas são muito longas

Diff do arquivo suprimido porque uma ou mais linhas são muito longas

Ver arquivo

@ -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":""}

Ver arquivo

@ -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 Arquivo normal
Ver arquivo

@ -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);
}
})
}
});

Ver arquivo

@ -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 */