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
Unified 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 
 }
 182 
 }
183
183
184 
 h2,
 184 
 h2,
185 
-:any(article, aside, nav, section)
185 
+:matches(article, aside, nav, section)
186 
 h1 {
 186 
 h1 {
187 
   display: block;
 187 
   display: block;
188 
   font-size: 1.5em;
 188 
   font-size: 1.5em;
192 
 }
 192 
 }
193
193
194 
 h3,
 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 
 h1 {
 197 
 h1 {
198 
   display: block;
 198 
   display: block;
199 
   font-size: 1.17em;
 199 
   font-size: 1.17em;
203 
 }
 203 
 }
204
204
205 
 h4,
 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 
 h1 {
 209 
 h1 {
210 
   display: block;
 210 
   display: block;
211 
   font-size: 1.00em;
 211 
   font-size: 1.00em;
215 
 }
 215 
 }
216
216
217 
 h5,
 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 
 h1 {
 222 
 h1 {
223 
   display: block;
 223 
   display: block;
224 
   font-size: 0.83em;
 224 
   font-size: 0.83em;
228 
 }
 228 
 }
229
229
230 
 h6,
 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 
 h1 {
 236 
 h1 {
237 
   display: block;
 237 
   display: block;
238 
   font-size: 0.67em;
 238 
   font-size: 0.67em;
595 
 }
 595 
 }
596
596
597 
 /* nested lists have no top/bottom margins */
 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 
   margin-block-start: 0;
 603 
   margin-block-start: 0;
604 
   margin-block-end: 0;
 604 
   margin-block-end: 0;
605 
 }
 605 
 }
606
606
607 
 /* 2 deep unordered lists use a circle */
 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 
   list-style-type: circle;
 611 
   list-style-type: circle;
612 
 }
 612 
 }
613
613
614 
 /* 3 deep (or more) unordered lists use a square */
 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 
   list-style-type: square;
 618 
   list-style-type: square;
619 
 }
 619 
 }
620
620
647 
   unicode-bidi: isolate;
 647 
   unicode-bidi: isolate;
648 
 }
 648 
 }
649
649
650 
-object:any(:broken,:user-disabled) > *|* {
650 
+object:matches(:broken,:user-disabled) > *|* {
651 
   /*
 651 
   /*
652 
     Inherit in the object's alignment so that if we aren't aligned explicitly
 652 
     Inherit in the object's alignment so that if we aren't aligned explicitly
653 
     we'll end up in the right place vertically.  See bug 36997.  Note that this
 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 
       body {
 4 
       body {
5 
         background-color: cornsilk;
 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 
         background-color: pink;
 9 
         background-color: pink;
9 
         color: black;
 10 
         color: black;
10 
         font-family: monospace;
 11 
         font-family: monospace;
16 
   <body>
 17 
   <body>
17 
     <div>
 18 
     <div>
18 
       <p>These are elements affected by the global styling on this page.</p>
 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 
       <label><input type="checkbox"> A checkbox</label><br>
 32 
       <label><input type="checkbox"> A checkbox</label><br>
20 
       <input type="button" value="A button"><br>
 33 
       <input type="button" value="A button"><br>
21 
       <input type="textarea" value="Example text"><br>
 34 
       <input type="textarea" value="Example text"><br>
35 
       <code>function () { console.log('Hello, world!'); }</code><br>
 48 
       <code>function () { console.log('Hello, world!'); }</code><br>
36 
       <pre>preformatted</pre><br>
 49 
       <pre>preformatted</pre><br>
37 
       <blockquote>"This is a blockquote!"</blockquote>
 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 
       <button>Button!</button>
 70 
       <button>Button!</button>
39 
     </div>
 71 
     </div>
40 
     <div id="embedded" class="embedded">
 72 
     <div id="embedded" class="embedded">
41 
       <div class="embedded-wrapper">
 73 
       <div class="embedded-wrapper">
42 
         <p>This is an embedded component isolated from the surrounding CSS cascade.</p>
 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 
         <label><input type="checkbox"> A checkbox</label><br>
 87 
         <label><input type="checkbox"> A checkbox</label><br>
44 
         <input type="button" value="A button"><br>
 88 
         <input type="button" value="A button"><br>
45 
         <input type="textarea" value="Example text"><br>
 89 
         <input type="textarea" value="Example text"><br>
59 
         <code>function () { console.log('Hello, world!'); }</code><br>
 103 
         <code>function () { console.log('Hello, world!'); }</code><br>
60 
         <pre>preformatted</pre><br>
 104 
         <pre>preformatted</pre><br>
61 
         <blockquote>"This is a blockquote!"</blockquote>
 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 
         <button>Button!</button>
 125 
         <button>Button!</button>
63 
       </div>
 126 
       </div>
64 
     </div>
 127 
     </div>

+ 33 - 0
matches-prefixer.js
View File

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