Merge branch 'release/1.0.0-alpha.4'

studiometa · Jan 22, 2020 · 2cf6536 · 2cf6536
2 parents 1899e97 + cc0db86
commit 2cf6536
Show file tree

Hide file tree

Showing 25 changed files with 19,114 additions and 1,850 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,20 @@
+# Editor configuration normalization
+# @see http://editorconfig.org/
+
+# This is the top-most .editorconfig file; do not search in parent directories.
+root = true
+
+# All files.
+[*]
+indent_style = space
+indent_size = 2
+# Yep, we need those special characters.
+charset = utf-8
+# Delete unnecessary whitespaces at end of lines
+trim_trailing_whitespace = true
+# Unix-style newlines with a newline ending every file.
+end_of_line = LF
+insert_final_newline = true
+
+[*.php]
+indent_size = 4
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+/node_modules
+/tests/dist/
+/docs/.vuepress/dist/
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -0,0 +1,13 @@
+module.exports = {
+  extends: '@studiometa/stylelint-config/prettier',
+  rules: {
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "tailwind"
+        ]
+      }
+    ],
+  },
+};
diff --git a/docs/.vuepress/assets/scss/tailwind.config.scss b/docs/.vuepress/assets/scss/tailwind.config.scss
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/docs/.vuepress/components/Preview.vue b/docs/.vuepress/components/Preview.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="preview">
+    <div ref="slot" v-show="false">
+      <slot />
+    </div>
+    <div
+      :style="{
+        height: `${iframeHeight * iframeScale}px`
+      }">
+      <div class="preview__loader" v-if="isLoading" />
+      <iframe
+        class="preview__iframe"
+        v-show="!isLoading"
+        width="100%"
+        :height="iframeHeight"
+        :srcdoc="!isFetching && html"
+        ref="iframe"
+        frameborder="0" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { log } from 'util';
+  export default {
+    name: 'Preview',
+    props: {
+      noResize: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        isLoading: true,
+        isFetching: true,
+        iframeHeight: 300,
+        styles: '',
+        mode: '',
+      }
+    },
+    computed: {
+      head() {
+        return `
+          <meta charset="utf-8">
+          <meta http-equiv="X-UA-Compatible" content="IE=edge">
+          <style>
+            * { box-sizing: border-box; }
+            body { padding: 2px; overflow: hidden; }
+            body > div {
+              transform-origin: top left;
+            }
+            ${this.styles}
+          </style>
+        `;
+      },
+      html() {
+        return `
+          <!DOCTYPE html>
+          <html>
+            <head>
+              ${this.head}
+            </head>
+            <body>
+              ${this.$refs.slot.innerHTML}
+            </body>
+          </html>
+        `;
+      },
+    },
+    watch: {
+      /**
+       * Update the iframe sizes when the iframe scale changes
+       */
+      iframeScale() {
+        this.setIframeHeight();
+      },
+    },
+    async mounted() {
+      // Get the content before anything
+      this.styles = await this.getStyles();
+      this.isFetching = false;
+
+      this.$refs.iframe.addEventListener('load', () => {
+        this.isLoading = false;
+        this.setIframeHeight();
+        this.$refs.iframe.contentWindow.addEventListener('resize', () => {
+          this.setIframeHeight()
+        });
+      });
+    },
+    methods: {
+      /**
+       * Get all the styles needed for the preview
+       * @return {String} The CSS to be inserted in the iframe
+       */
+      async getStyles() {
+        const styles = await import('!to-string-loader!css-loader!postcss-loader!sass-loader!../assets/scss/tailwind.config.scss');
+
+        return styles.default;
+      },
+      /**
+       * Set the iframe height and its contents scale
+       */
+      setIframeHeight() {
+        this.iframeHeight = this.$refs.iframe.contentWindow.document.documentElement.getBoundingClientRect().height;
+      },
+    },
+  };
+</script>
+
+<style lang="css">
+  .preview {
+    position: relative;
+    width: 100%;
+    margin: 0.85rem 0;
+    padding: 3rem;
+    overflow: hidden;
+    background: #eee;
+    border-radius: 6px;
+  }
+
+  .preview,
+  .preview *,
+  .preview *::after,
+  .preview *::before {
+    box-sizing: border-box;
+  }
+
+  .preview__loader {
+    z-index: 1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-left: -10px;
+    transform: rotate(90deg);
+  }
+
+  .preview__loader::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 3px solid #ccc;
+    border-left-color: transparent;
+    border-radius: 50%;
+    animation: rotate 1s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(720deg);
+    }
+  }
+
+  .preview__iframe {
+    z-index: 2;
+    position: relative;
+    width: 100%;
+    transform-origin: top left;
+  }
+
+  .preview__iframe--load {
+    opacity: 0;
+  }
+
+  .preview__nav {
+    margin-top: 1em;
+  }
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -0,0 +1,30 @@
+module.exports = {
+  title: '🔧 Tailwind CSS Config',
+  description: 'A custom Tailwind CSS configuration',
+  themeConfig: {
+    sidebarDepth: 2,
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide/' },
+      {
+        text: 'Configuration',
+        link: '/configuration/',
+      },
+      {
+        text: 'Plugins',
+        link: '/plugins/',
+        items: [
+          { text: 'Debug outline', link: '/plugins/debug-outline/' },
+          { text: 'Grid', link: '/plugins/grid/' },
+        ],
+      },
+      { text: 'Github', link: 'https://github.com/studiometa/tailwind-config' },
+    ],
+  },
+  postcss: {
+    plugins: [
+      require('autoprefixer'),
+      require('tailwindcss'),
+    ],
+  },
+};
diff --git a/docs/.vuepress/postcss.config.js b/docs/.vuepress/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+};
diff --git a/docs/.vuepress/tailwind.config.js b/docs/.vuepress/tailwind.config.js
@@ -0,0 +1,10 @@
+const config = require('./src/index.js');
+
+config.theme.debugOutline = true;
+config.theme.colors.grey = {
+  '200': '#eee',
+  '600': '#999',
+};
+config.theme.colors.white = '#fff';
+
+module.exports = config;
diff --git a/docs/configuration/readme.md b/docs/configuration/readme.md
@@ -0,0 +1,3 @@
+# Configuration
+
+@todo