<commit_before>import React from "react"
import Highlight from "react-highlight"
import "highlight.js/styles/tomorrow.css"

import styles from "./index.css"
import autoprefixer from "./autoprefixer.svg"
import cssdb from "./cssdb.svg"
import cssModules from "./css-modules.svg"
import stylelint from "./stylelint.svg"
import lostgrid from "./lost-grid.svg"

export default function InANutShell() {

  /* eslint-disable max-len */
  return (
    <div className={ styles.root }>
      <section className={ styles.item }>
        <div className={ styles.itemInner }>
          <div className={ styles.info }>
            <header className={ styles.header }>
              <img
                alt="Autoprefixer"
                className={ styles.logo }
                src={ autoprefixer }
              />
              <h2 className={ styles.title }>
                { "Increase code readability" }
              </h2>
            </header>
            <p className={ styles.body }>
              { "Add vendor prefixes to CSS rules using values from Can I Use. " }
              <a
                className={ styles.tool }
                href="https://github.com/postcss/autoprefixer"
              >
                { "Autoprefixer" }
              </a>
              { " will use the data based on current browser popularity and property support to apply prefixes for\u00A0you." }
            </p>
          </div>
          <div className={ styles.example }>
            <figure className={ styles.figure }>
              <pre className={ styles.pre }>
                <Highlight className={ styles.code + " css" }>
                  { ":fullscreen {" }<br />
                  { "}" }
                </Highlight>
              </pre>
              <figcaption className={ styles.caption }>
                { "CSS input" }
              </figcaption>
            </figure>
            <figure className={ styles.figureOutput }>
              <pre className={ styles.pre }>
                <Highlight className={ styles.code + " css" }>
                  { ":" }
                  <span className={ styles.highlight }>
                    { "-webkit-" }
                  </span>
                  { ":full-screen {" }<br />
                  { "}" }<br />
                  { ":" }
                  <span className={ styles.highlight }>
                    { "-moz-" }
                  </span>
                  { ":full-screen {" }<br />
                  { "}" }<br />
                  { ":full-screen {" }<br />
                  { "}" }<br />
                </Highlight>
              </pre>
              <figcaption className={ styles.captionOutput }>
                { "CSS output" }
              </figcaption>
            </figure>
          </div>
        </div>
      </section>
      <section className={ styles.itemAlt }>
        <div className={ styles.itemInnerAlt }>
          <div className={ styles.infoAlt }>
            <header className={ styles.header }>
              <img
                alt="Cssnext"
                className={ styles.logo }
                src={ cssdb }<commit_msg>fix(index): Correct Autoprefixer pseudo‑class example<commit_after>import React from "react"
import Highlight from "react-highlight"
import "highlight.js/styles/tomorrow.css"

import styles from "./index.css"
import autoprefixer from "./autoprefixer.svg"
import cssdb from "./cssdb.svg"
import cssModules from "./css-modules.svg"
import stylelint from "./stylelint.svg"
import lostgrid from "./lost-grid.svg"

export default function InANutShell() {

  /* eslint-disable max-len */
  return (
    <div className={ styles.root }>
      <section className={ styles.item }>
        <div className={ styles.itemInner }>
          <div className={ styles.info }>
            <header className={ styles.header }>
              <img
                alt="Autoprefixer"
                className={ styles.logo }
                src={ autoprefixer }
              />
              <h2 className={ styles.title }>
                { "Increase code readability" }
              </h2>
            </header>
            <p className={ styles.body }>
              { "Add vendor prefixes to CSS rules using values from Can I Use. " }
              <a
                className={ styles.tool }
                href="https://github.com/postcss/autoprefixer"
              >
                { "Autoprefixer" }
              </a>
              { " will use the data based on current browser popularity and property support to apply prefixes for\u00A0you." }
            </p>
          </div>
          <div className={ styles.example }>
            <figure className={ styles.figure }>
              <pre className={ styles.pre }>
                <Highlight className={ styles.code + " css" }>
                  { ":fullscreen {" }<br />
                  { "}" }
                </Highlight>
              </pre>
              <figcaption className={ styles.caption }>
                { "CSS input" }
              </figcaption>
            </figure>
            <figure className={ styles.figureOutput }>
              <pre className={ styles.pre }>
                <Highlight className={ styles.code + " css" }>
                  { ":" }
                  <span className={ styles.highlight }>
                    { "-webkit-" }
                  </span>
                  { "full-screen {" }<br />
                  { "}" }<br />
                  { ":" }
                  <span className={ styles.highlight }>
                    { "-moz-" }
                  </span>
                  { "full-screen {" }<br />
                  { "}" }<br />
                  { ":fullscreen {" }<br />
                  { "}" }<br />
                </Highlight>
              </pre>
              <figcaption className={ styles.captionOutput }>
                { "CSS output" }
              </figcaption>
            </figure>
          </div>
        </div>
      </section>
      <section className={ styles.itemAlt }>
        <div className={ styles.itemInnerAlt }>
          <div className={ styles.infoAlt }>
            <header className={ styles.header }>
              <img
                alt="Cssnext"
                className={ styles.logo }
                src={ cssdb }
{'fraction_non_alphanumeric': 0.12888322447028835, 'fraction_numerical': 0.0015931177314003505, 'mean_word_length': 1.268063583815029, 'pattern_counts': {'":': 10, '<': 103, '<?xml version=': 0, '>': 101, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2209931', 'n_tokens_mistral': 1659, 'n_tokens_neox': 1578, 'n_words': 388}