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

Add more elements to example, matches-prefixer.js

Tyler Hallada 6 years ago
parent
55892661d8
commit
b9495246c5
10 changed files with 131 additions and 34 deletions
Split View Show Diff Stats
  1. 27 27
      default.css
  2. 1 1
      dist/default.min.css
  3. 1 1
      dist/default.min.css.map
  4. 1 1
      dist/default.min.js.map
  5. 1 1
      dist/example.min.css
  6. 1 1
      dist/example.min.css.map
  7. 1 1
      dist/example.min.js.map
  8. 64 1
      example/index.html
  9. 33 0
      matches-prefixer.js
  10. 1 0
      webpack.config.js

+ 27 - 27
default.css
View File 

@@ -182,7 +182,7 @@ h1 {
182 182 
 }
183 183
184 184 
 h2,
185 
-:any(article, aside, nav, section)
185 
+:matches(article, aside, nav, section)
186 186 
 h1 {
187 187 
   display: block;
188 188 
   font-size: 1.5em;
 
@@ -192,8 +192,8 @@ h1 {
192 192 
 }
193 193
194 194 
 h3,
195 
-:any(article, aside, nav, section)
196 
-:any(article, aside, nav, section)
195 
+:matches(article, aside, nav, section)
196 
+:matches(article, aside, nav, section)
197 197 
 h1 {
198 198 
   display: block;
199 199 
   font-size: 1.17em;
 
@@ -203,9 +203,9 @@ h1 {
203 203 
 }
204 204
205 205 
 h4,
206 
-:any(article, aside, nav, section)
207 
-:any(article, aside, nav, section)
208 
-:any(article, aside, nav, section)
206 
+:matches(article, aside, nav, section)
207 
+:matches(article, aside, nav, section)
208 
+:matches(article, aside, nav, section)
209 209 
 h1 {
210 210 
   display: block;
211 211 
   font-size: 1.00em;
 
@@ -215,10 +215,10 @@ h1 {
215 215 
 }
216 216
217 217 
 h5,
218 
-:any(article, aside, nav, section)
219 
-:any(article, aside, nav, section)
220 
-:any(article, aside, nav, section)
221 
-:any(article, aside, nav, section)
218 
+:matches(article, aside, nav, section)
219 
+:matches(article, aside, nav, section)
220 
+:matches(article, aside, nav, section)
221 
+:matches(article, aside, nav, section)
222 222 
 h1 {
223 223 
   display: block;
224 224 
   font-size: 0.83em;
 
@@ -228,11 +228,11 @@ h1 {
228 228 
 }
229 229
230 230 
 h6,
231 
-:any(article, aside, nav, section)
232 
-:any(article, aside, nav, section)
233 
-:any(article, aside, nav, section)
234 
-:any(article, aside, nav, section)
235 
-:any(article, aside, nav, section)
231 
+:matches(article, aside, nav, section)
232 
+:matches(article, aside, nav, section)
233 
+:matches(article, aside, nav, section)
234 
+:matches(article, aside, nav, section)
235 
+:matches(article, aside, nav, section)
236 236 
 h1 {
237 237 
   display: block;
238 238 
   font-size: 0.67em;
 
@@ -595,26 +595,26 @@ li {
595 595 
 }
596 596
597 597 
 /* nested lists have no top/bottom margins */
598 
-:any(ul, ol, dir, menu, dl) ul,
599 
-:any(ul, ol, dir, menu, dl) ol,
600 
-:any(ul, ol, dir, menu, dl) dir,
601 
-:any(ul, ol, dir, menu, dl) menu,
602 
-:any(ul, ol, dir, menu, dl) dl {
598 
+:matches(ul, ol, dir, menu, dl) ul,
599 
+:matches(ul, ol, dir, menu, dl) ol,
600 
+:matches(ul, ol, dir, menu, dl) dir,
601 
+:matches(ul, ol, dir, menu, dl) menu,
602 
+:matches(ul, ol, dir, menu, dl) dl {
603 603 
   margin-block-start: 0;
604 604 
   margin-block-end: 0;
605 605 
 }
606 606
607 607 
 /* 2 deep unordered lists use a circle */
608 
-:any(ol, ul, menu, dir) ul,
609 
-:any(ol, ul, menu, dir) menu,
610 
-:any(ol, ul, menu, dir) dir {
608 
+:matches(ol, ul, menu, dir) ul,
609 
+:matches(ol, ul, menu, dir) menu,
610 
+:matches(ol, ul, menu, dir) dir {
611 611 
   list-style-type: circle;
612 612 
 }
613 613
614 614 
 /* 3 deep (or more) unordered lists use a square */
615 
-:any(ol, ul, menu, dir) :any(ol, ul, menu, dir) ul,
616 
-:any(ol, ul, menu, dir) :any(ol, ul, menu, dir) menu,
617 
-:any(ol, ul, menu, dir) :any(ol, ul, menu, dir) dir {
615 
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
616 
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
617 
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
618 618 
   list-style-type: square;
619 619 
 }
620 620 
 
@@ -647,7 +647,7 @@ img:loading::before, input:loading::before {
647 647 
   unicode-bidi: isolate;
648 648 
 }
649 649
650 
-object:any(:broken,:user-disabled) > *|* {
650 
+object:matches(:broken,:user-disabled) > *|* {
651 651 
   /*
652 652 
     Inherit in the object's alignment so that if we aren't aligned explicitly
653 653 
     we'll end up in the right place vertically.  See bug 36997.  Note that this

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


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


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


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


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


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


+ 64 - 1
example/index.html
View File 

@@ -4,7 +4,8 @@
4 4 
       body {
5 5 
         background-color: cornsilk;
6 6 
       }
7 
-      p, input, label, select, ul, ol, code, pre, blockquote, button {
7 
+      p, input, label, select, ul, ol, code, pre, blockquote, button, table, hr, details, summary, em, strong, i, b, q,
8 
+      s, small, span, a, h1, h2, h3, h4, h5, h6 {
8 9 
         background-color: pink;
9 10 
         color: black;
10 11 
         font-family: monospace;
 
@@ -16,6 +17,18 @@
16 17 
   <body>
17 18 
     <div>
18 19 
       <p>These are elements affected by the global styling on this page.</p>
20 
+      <p>
21 
+        <em>Emphasized</em> <strong>strong</strong> <i>italic</i> <b>bold</b> <q>quoted</q> <s>strikethrough</s>
22 
+        <small>small</small>
23 
+      </p>
24 
+      <span>Span</span><br>
25 
+      <a href="https://github.com/thallada/default-stylesheet">Link</a><br>
26 
+      <h1>Heading 1</h1>
27 
+      <h2>Heading 2</h2>
28 
+      <h3>Heading 3</h3>
29 
+      <h4>Heading 4</h4>
30 
+      <h5>Heading 5</h5>
31 
+      <h6>Heading 6</h6>
19 32 
       <label><input type="checkbox"> A checkbox</label><br>
20 33 
       <input type="button" value="A button"><br>
21 34 
       <input type="textarea" value="Example text"><br>
 
@@ -35,11 +48,42 @@
35 48 
       <code>function () { console.log('Hello, world!'); }</code><br>
36 49 
       <pre>preformatted</pre><br>
37 50 
       <blockquote>"This is a blockquote!"</blockquote>
51 
+      <table>
52 
+        <tr>
53 
+          <th>Category 1</th>
54 
+          <th>Category 2</th>
55 
+        </tr>
56 
+        <tr>
57 
+          <td>0.34</td>
58 
+          <td>1.12</td>
59 
+        </tr>
60 
+      </table>
61 
+      <hr>
62 
+      <details open>
63 
+        <summary>Summary</summary>
64 
+        <ol>
65 
+          <li>Item 1</li>
66 
+          <li>Item 2</li>
67 
+          <li>Item 3</li>
68 
+        </ol>
69 
+      </details>
38 70 
       <button>Button!</button>
39 71 
     </div>
40 72 
     <div id="embedded" class="embedded">
41 73 
       <div class="embedded-wrapper">
42 74 
         <p>This is an embedded component isolated from the surrounding CSS cascade.</p>
75 
+        <p>
76 
+          <em>Emphasized</em> <strong>strong</strong> <i>italic</i> <b>bold</b> <q>quoted</q> <s>strikethrough</s>
77 
+          <small>small</small>
78 
+        </p>
79 
+        <span>Span</span><br>
80 
+        <a href="https://github.com/thallada/default-stylesheet">Link</a><br>
81 
+        <h1>Heading 1</h1>
82 
+        <h2>Heading 2</h2>
83 
+        <h3>Heading 3</h3>
84 
+        <h4>Heading 4</h4>
85 
+        <h5>Heading 5</h5>
86 
+        <h6>Heading 6</h6>
43 87 
         <label><input type="checkbox"> A checkbox</label><br>
44 88 
         <input type="button" value="A button"><br>
45 89 
         <input type="textarea" value="Example text"><br>
 
@@ -59,6 +103,25 @@
59 103 
         <code>function () { console.log('Hello, world!'); }</code><br>
60 104 
         <pre>preformatted</pre><br>
61 105 
         <blockquote>"This is a blockquote!"</blockquote>
106 
+        <table>
107 
+          <tr>
108 
+            <th>Category 1</th>
109 
+            <th>Category 2</th>
110 
+          </tr>
111 
+          <tr>
112 
+            <td>0.34</td>
113 
+            <td>1.12</td>
114 
+          </tr>
115 
+        </table>
116 
+        <hr>
117 
+        <details open>
118 
+          <summary>Summary</summary>
119 
+          <ol>
120 
+            <li>Item 1</li>
121 
+            <li>Item 2</li>
122 
+            <li>Item 3</li>
123 
+          </ol>
124 
+        </details>
62 125 
         <button>Button!</button>
63 126 
       </div>
64 127 
     </div>

+ 33 - 0
matches-prefixer.js
View File 

@@ -0,0 +1,33 @@
1 
+// From: https://gist.github.com/dennisgaebel/4290fd6e5dbba5e9b35e2587dcc20849
2 
+const postcss = require('postcss');
3 
+
4 
+module.exports = postcss.plugin('postcss-matches', () => {
5 
+  return root => {
6 
+    root.walkRules(rule => {
7 
+      if (rule.selector.indexOf(':matches(') !== -1) {
8 
+        mozRule = rule.clone();
9 
+        webkitRule = rule.clone();
10 
+        mozRule.selectors = rule.selectors.reduce((all, i) => {
11 
+          if (i.indexOf(':matches(') !== -1) {
12 
+            return all.concat([
13 
+              i.replace(/:matches\(/gi, ':-moz-any(')
14 
+            ])
15 
+          } else {
16 
+            return all.concat([i])
17 
+          }
18 
+        }, []);
19 
+        webkitRule.selectors = rule.selectors.reduce((all, i) => {
20 
+          if (i.indexOf(':matches(') !== -1) {
21 
+            return all.concat([
22 
+              i.replace(/:matches\(/gi, ':-webkit-any('),
23 
+            ])
24 
+          } else {
25 
+            return all.concat([i])
26 
+          }
27 
+        }, []);
28 
+        root.append(mozRule);
29 
+        root.append(webkitRule);
30 
+      }
31 
+    })
32 
+  }
33 
+});

+ 1 - 0
webpack.config.js
View File 

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