refactor: remove --ie feature support

Gruntfile.js

@@ -21,7 +21,6 @@ module.exports = function (grunt) {
         atomizer: {
             docs: {
                 options: {
-                    ie: false,
                     configFile: './config/atomic-config.js',
                     configOutput: './build/atomizer.json',
                 },

docs/assets/atomic.css

@@ -40,7 +40,7 @@
 .Bgc\(\#000\.6\) {
   background-color: rgba(0,0,0,.6);
 }
-.Bgc\(\#0280ae\), .Bgc\(brandColor\) {
+.Bgc\(\#0280ae\), .Bgc\(brandColor\), .Bgc\(\#0280ae\)\:h:hover {
   background-color: #0280ae;
 }
 .Bgc\(\#0280ae\.5\) {
@@ -61,9 +61,6 @@
 .Bgc\(t\) {
   background-color: transparent;
 }
-.Bgc\(\#0280ae\)\:h:hover {
-  background-color: #0280ae;
-}
 .menu-on .menu-on_Bgp\(end_t\) {
   background-position: right 0;
 }
@@ -97,25 +94,22 @@
 .C\(\#f2438c\) {
   color: #f2438c;
 }
-.C\(\#fff\) {
+.C\(\#fff\), .C\(\#fff\)\:h:hover {
   color: #fff;
 }
 .C\(--primary-color\) {
   color: var(--primary-color);
 }
-.C\(\#fff\)\:h:hover {
-  color: #fff;
-}
 .D\(b\), .home .home_D\(b\), .menu-on .menu-on_D\(b\), .open .open_D\(b\) {
   display: block;
 }
 .D\(f\) {
   display: flex;
 }
-.D\(ib\), .IbBox, a[class*=LineClamp], .Row {
+.D\(ib\), .Ell:after, .IbBox, a[class*=LineClamp], a[class*=LineClamp]:after, .Row {
   display: inline-block;
 }
-.D\(n\), .foo .foo_D\(n\), .foo + .foo\+D\(n\), .foo > .foo\>D\(n\), .foo ~ .foo\~D\(n\), .home .home_D\(n\) {
+.D\(n\), .D\(n\)\:h:hover, .foo .foo_D\(n\), .foo + .foo\+D\(n\), .foo > .foo\>D\(n\), .foo ~ .foo\~D\(n\), .foo:hover .foo\:h_D\(n\), .home .home_D\(n\) {
   display: none;
 }
 .D\(tb\) {
@@ -130,12 +124,6 @@
 .D\(tbhg\) {
   display: table-header-group;
 }
-.D\(n\)\:h:hover {
-  display: none;
-}
-.foo:hover .foo\:h_D\(n\) {
-  display: none;
-}
 .home .home_D\(b\)\! {
   display: block !important;
 }
@@ -307,7 +295,7 @@
 .home .home_Ov\(v\) {
   overflow: visible;
 }
-.Ov\(h\), .Ell, .Hidden, [class*=LineClamp] {
+.Ov\(h\), .Ell:after, .Ell, .Hidden, [class*=LineClamp], a[class*=LineClamp]:after {
   overflow: hidden;
 }
 .P\(0\) {
@@ -374,10 +362,7 @@
 .Ta\(start\) {
   text-align: left;
 }
-.Td\(n\) {
-  text-decoration: none;
-}
-.Td\(n\)\:h:hover {
+.Td\(n\), .Td\(n\)\:h:hover {
   text-decoration: none;
 }
 .Tt\(u\) {
@@ -452,25 +437,10 @@
 .BfcHack {
   width: 1600px;
 }
-.BfcHack, .Row {
-  *width: auto;
-}
-.BfcHack, .Cf, .IbBox, a[class*=LineClamp], .Row {
-  zoom: 1;
-}
-.Cf:before, .Cf:after {
-  content: " ";
-  display: table;
-}
-.Cf:after {
-  clear: both;
-}
-.Ell:after {
+.Ell:after, a[class*=LineClamp]:after {
   content: ".";
   font-size: 0;
   visibility: hidden;
-  display: inline-block;
-  overflow: hidden;
   height: 0;
   width: 0;
 }
@@ -481,31 +451,18 @@
 }
 .Hidden {
   position: absolute !important;
-  *clip: rect(1px 1px 1px 1px);
   clip: rect(1px,1px,1px,1px);
   padding: 0 !important;
   height: 1px !important;
   width: 1px !important;
 }
-.IbBox, a[class*=LineClamp] {
-  *display: inline;
-}
 [class*=LineClamp] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
 }
 a[class*=LineClamp] {
   display : -webkit-box;
 }
-a[class*=LineClamp]:after {
-  content: ".";
-  font-size: 0;
-  visibility: hidden;
-  display: inline-block;
-  overflow: hidden;
-  height: 0;
-  width: 0;
-}
 .LineClamp\(2\,54px\) {
   -webkit-line-clamp: 2;
 }
@@ -515,18 +472,12 @@ a[class*=LineClamp]:after {
 .LineClamp\(3\,54px\) {
   -webkit-line-clamp: 3;
 }
-.Row {
-  *display: block;
-}
 .StretchedBox {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
-.Zoom {
-  zoom: 1;
-}
 @media screen and (max-width:700px) {
   .D\(n\)--xs {
     display: none;

docs/assets/js/main.js.LICENSE.txt

@@ -8,6 +8,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /**
  * @license React
  * react.production.min.js

docs/guides/helper-classes.md

@@ -58,8 +58,6 @@ title: Helper classes
 
 <p class="noteBox warning">Note that this is a hack and may break if the content of the box is too large or if the box is next to floats.</p>
 
-<p class="noteBox info">Atomizer plugs <code>zoom:1</code> along with <code>overflow:hidden</code> whenever you use the class <code>Ov(h)</code>. This is because <code>overflow:hidden</code> does not create a block-formatting context in old IE but <code>zoom</code> does.</p>
-
 {% include subhead.html tag="h2" title="<code>Cf</code> (Clearfix)" %}
 
 <p>Use <code>Cf</code> for <a href="http://yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/">clearfix</a>.</p>
@@ -94,13 +92,12 @@ title: Helper classes
 
 {% highlight css %}
 display: inline-block;
-*display: inline;
-zoom: 1;
-vertical-align: top;{% endhighlight %}
+vertical-align: top;
+{% endhighlight %}
 
 {% highlight html %}
-   <div class="IbBox W(50%) Ta(c) Bgc(#0280ae.5) C(#fff)">Box-1</div>
-   <div class="IbBox W(50%) Ta(c) Bgc(#0280ae) C(#fff)">Box-2</div>
+   <div class="IbBox W(50%) Ta(c) Bgc(#0280ae.5) C(#fff)">Box-1</div><!--
+--><div class="IbBox W(50%) Ta(c) Bgc(#0280ae) C(#fff)">Box-2</div>
 {% endhighlight %}
 
 <p>Example:</p>
@@ -175,10 +172,6 @@ left: 0;
     <div class="StretchedBox Bgc(#0280ae) P(10px) C(#fff)">I am a box with an intrinsic aspect ratio</div>
 </div>
 
-{% include subhead.html tag="h2" title="<code>Zoom</code>" %}
-
-<p>Use the class <code>Zoom</code> if you support old versions of IE and need to <a href="http://www.satzansatz.de/cssd/onhavinglayout.html">give a box a layout</a>.</p>
-
 <hr class="Mt(50px)">
 
 <ol id="footnote" class="ol-list">

docs/tutorials/grid-system.md

@@ -20,7 +20,7 @@ title: Grid system
 
 <p>This styling has great browser support <a href="#footnote">[1]</a> and it is direction-friendly (boxes are displayed according to <code>ltr</code> / <code>rtl</code> contexts).</p>
 
-<p>When creating inline-block constructs, you should use the helper class (<code>IbBox</code>) instead of <code>D(ib)</code> because the former gives you old-IE support plus vertical-alignment (<code>top</code>) for free.</p>
+<p>When creating inline-block constructs, you should use the helper class (<code>IbBox</code>) instead of <code>D(ib)</code> because the former gives you vertical-alignment (<code>top</code>) for free.</p>
 
 {% include subhead.html tag="h4" title="Example" %}
 
@@ -43,11 +43,10 @@ title: Grid system
 <p data-height="190" data-theme-id="12469" data-slug-hash="emMPaw" data-default-tab="result" data-user="thierry" class='codepen'>See the Pen <a href='http://codepen.io/thierry/pen/emMPaw/'>emMPaw</a> by Thierry (<a href='http://codepen.io/thierry'>@thierry</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
 
 <div class="noteBox warning">
-    <p><strong>3 things to be aware of when creating <code>inline-block</code> constructs</strong>:</p>
+    <p><strong>Some things to be aware of when creating <code>inline-block</code> constructs</strong>:</p>
     <ol class="ol-list">
        <li>white-space between nodes in the markup creates space between boxes, so make sure to address this by either removing that space altogether, using html comments (<code>&lt;!-- --&gt;</code>), or implementing some other trick like the one used by <a href="http://purecss.io/grids/">PureCSS</a>.</li>
-       <li><code>vertical-align:top</code> is needed to make sure all boxes are top aligned (<code>IbBox</code> takes care of #2 and #3).</li>
-       <li>IE7 <em>doesn&#39;t support</em> <code>display:inline-block</code> but Atomizer takes care of this behind the scenes <a href="#footnote">[1]</a>.</li>
+       <li><code>vertical-align:top</code> is needed to make sure all boxes are top aligned (<code>IbBox</code> takes care of this).</li>
     </ol>
 </div>
 
@@ -143,6 +142,5 @@ title: Grid system
 <hr class="Mt(50px)">
 
 <ol id="footnote" class="ol-list">
-    <li>Atomizer provides a patch for oldIE <a href="#footnote-1">[↩]</a>.</li>
     <li>Atomizer relies on <code>start</code> and <code>end</code> instead of <code>left</code> and <code>right</code> which allows the usage of the <strong>same</strong> classes regardless of script context <a href="#footnote-2">[↩]</a>.</li>
 </ol>

packages/atomizer/README.md

@@ -40,7 +40,6 @@ Usage: atomizer [options] [path]
     -w, --watch=[target]                rebuilds when changes are detected in the file, directory, or glob (argument may be passed multiple times and is parsed for Atomic CSS classes)
 
     --rtl                               swaps `start` and `end` keyword replacements with `right` and `left`.
-    --ie                                adds old IE hacks to the output.
     --exclude=[pattern]                 pattern to exclude file to be scanned
     --bump-mq                           increases specificity of media queries a small amount
     --verbose                           show additional log info (warnings).

packages/atomizer/bin/atomizer

@@ -42,7 +42,7 @@ program
   .option('--exclude [pattern]', 'excluded file pattern', collect, [])
   .option('--rtl', 'swaps `start` and `end` keyword replacements with `right` and `left`')
   .option('--bump-mq', 'increases specificity of media queries a small amount')
-  .option('--ie', 'adds old IE hacks to the output')
+  .option('--ie', '[deprecated] no longer used')
   .option('--verbose', 'show additional log info (warnings)')
   .option('--quiet', 'hide processing info')
   .parse(process.argv);
@@ -204,11 +204,6 @@ if (typeof programOpts.helpersNamespace !== 'undefined') {
     options.helpersNamespace = programOpts.helpersNamespace;
 }
 
-// Options: IE
-if (typeof programOpts.ie !== 'undefined') {
-    options.ie = true;
-}
-
 if (programOpts.watch && programOpts.watch.length) {
     var buildTriggerState = { files: {} };
     var watcher = chokidar.watch(programOpts.watch)

packages/atomizer/src/atomizer.js

@@ -351,22 +351,6 @@ Atomizer.prototype.parseConfig = function (config/*:AtomizerConfig*/, options/*:
         for (const prop in treeo.declarations) {
             if (values) {
                 values.forEach((value, index) => {
-                    // plug IE hacks for know properties
-                    if (options.ie) {
-                        // block formatting context on old IE
-                        /* istanbul ignore else  */
-                        if ((prop === 'display' && value === 'inline-block') || (prop === 'overflow' && value !== 'visible')) {
-                            treeo.declarations.zoom = 1;
-                        }
-                        /* istanbul ignore else  */
-                        if (prop === 'display' && value === 'inline-block') {
-                            treeo.declarations['*display'] = 'inline';
-                        }
-                        /* istanbul ignore else  */
-                        if (prop === 'opacity') {
-                            treeo.declarations.filter = `alpha(opacity=${  parseFloat(value, 10) * 100  })`;
-                        }
-                    }
                     if (value !== null && treeo.declarations) {
                         // value could be an object for custom classes with breakPoints
                         // e.g.
@@ -471,8 +455,7 @@ Atomizer.prototype.getCss = function (config/*:AtomizerConfig*/, options/*:CSSOp
         banner: '',
         bumpMQ: false,
         namespace: null,
-        rtl: false,
-        ie: false
+        rtl: false
     }, options);
 
     // validate config.breakPoints

packages/atomizer/src/helpers.js

@@ -147,9 +147,7 @@ module.exports = [
         'noParams': true,
         'styles': {
             'display': 'table-cell',
-            'width': '1600px', /* 1 */
-            '*width': 'auto',
-            'zoom': 1
+            'width': '1600px' /* 1 */
         }
     },
     /**
@@ -164,9 +162,6 @@ module.exports = [
         'link': 'https://acss.io/guides/helper-classes.html#-cf-clearfix-',
         'matcher': 'Cf',
         'noParams': true,
-        'styles': {
-            'zoom': 1
-        },
         'rules': {
             '.Cf:before, .Cf:after': {
                 'content': '" "',
@@ -224,7 +219,6 @@ module.exports = [
         'noParams': true,
         'styles': {
             'position': 'absolute !important',
-            '*clip': 'rect(1px 1px 1px 1px)',
             'clip': 'rect(1px,1px,1px,1px)',
             'padding': '0 !important',
             'border': '0 !important',
@@ -248,8 +242,6 @@ module.exports = [
         'noParams': true,
         'styles': {
             'display': 'inline-block',
-            '*display': 'inline',
-            'zoom': 1,
             'vertical-align': 'top'
         }
     },
@@ -283,9 +275,7 @@ module.exports = [
             },
             'a[class*=LineClamp]': {
                 'display': 'inline-block',
-                'display ': '-webkit-box',
-                '*display': 'inline',
-                'zoom': 1
+                'display ': '-webkit-box'
             },
             /**
             * Fix WebKit bug that displays ellipsis in middle of text inside *LINKS*
@@ -322,10 +312,7 @@ module.exports = [
             'display': 'inline-block',
             'vertical-align': 'top',
             'width': '100%',
-            'box-sizing': 'border-box',
-            '*display': 'block',
-            '*width': 'auto',
-            'zoom': 1
+            'box-sizing': 'border-box'
         }
     },
     /**
@@ -348,22 +335,5 @@ module.exports = [
             'bottom': 0,
             'left': 0
         }
-    },
-    /**
-    ==================================================================
-    Zoom
-    hack for oldIE to create a "block-formatting context"
-    ==================================================================
-    */
-    {
-        'type': 'helper',
-        'name': 'Zoom',
-        'description': "Gives a box 'layout' in old versions of Internet Explorer",
-        'link': 'https://acss.io/guides/helper-classes.html#-zoom-',
-        'matcher': 'Zoom',
-        'noParams': true,
-        'styles': {
-            'zoom': '1'
-        }
     }
 ];