Init

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+yarn.lock
+package-lock.json

dist/.gitignore

@@ -0,0 +1,3 @@
+*
+!.gitignore
+!.npmignore

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@tailwindcss/aspect-ratio",
+  "version": "0.1.0",
+  "main": "index.js",
+  "license": "MIT",
+  "repository": "https://github.com/tailwindlabs/tailwindcss-aspect-ratio",
+  "publishConfig": {
+    "access": "public"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "scripts": {
+    "prepublishOnly": "node scripts/build.js"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^1.0.0 || ^2.0.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.6.1",
+    "clean-css": "^4.2.1",
+    "postcss": "^7.0.17",
+    "tailwindcss": "^2.0.0-alpha.8"
+  }
+}

scripts/build.js

@@ -0,0 +1,36 @@
+const fs = require('fs')
+const postcss = require('postcss')
+const tailwind = require('tailwindcss')
+const CleanCSS = require('clean-css')
+
+function buildDistFile(filename) {
+  return postcss([
+    tailwind({
+      corePlugins: false,
+      plugins: [require('../src/index.js')],
+    }),
+    require('autoprefixer'),
+  ])
+    .process('@tailwind components', {
+      from: null,
+      to: `./dist/${filename}.css`,
+      map: false,
+    })
+    .then((result) => {
+      fs.writeFileSync(`./dist/${filename}.css`, result.css)
+      return result
+    })
+    .then((result) => {
+      const minified = new CleanCSS().minify(result.css)
+      fs.writeFileSync(`./dist/${filename}.min.css`, minified.styles)
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+console.info('Building CSS...')
+
+Promise.all([buildDistFile('aspect-ratio')]).then(() => {
+  console.log('Finished building CSS.')
+})

src/index.js

@@ -0,0 +1,85 @@
+const plugin = require('tailwindcss/plugin')
+
+const aspectRatio = plugin(
+  function ({ addComponents, theme, variants, e }) {
+    const values = theme('aspectRatio')
+
+    const baseSelectors = Object.entries(values)
+      .map(([key, value]) => {
+        return `.${e(`aspect-w-${key}`)}`
+      })
+      .join(',\n')
+
+    const childSelectors = Object.entries(values)
+      .map(([key, value]) => {
+        return `.${e(`aspect-w-${key}`)} > *`
+      })
+      .join(',\n')
+
+    console.log(baseSelectors, childSelectors)
+
+    addComponents(
+      [
+        {
+          [baseSelectors]: {
+            position: 'relative',
+            paddingBottom: `calc(var(--aspect-h) / var(--aspect-w) * 100%)`,
+          },
+        },
+        {
+          [childSelectors]: {
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            top: '0',
+            right: '0',
+            bottom: '0',
+            left: '0',
+          },
+        },
+        Object.entries(values).map(([key, value]) => {
+          return {
+            [`.${e(`aspect-w-${key}`)}`]: {
+              '--aspect-w': value,
+            },
+          }
+        }),
+        Object.entries(values).map(([key, value]) => {
+          return {
+            [`.${e(`aspect-h-${key}`)}`]: {
+              '--aspect-h': value,
+            },
+          }
+        }),
+      ],
+      variants('aspectRatio')
+    )
+  },
+  {
+    theme: {
+      aspectRatio: {
+        1: '1',
+        2: '2',
+        3: '3',
+        4: '4',
+        5: '5',
+        6: '6',
+        7: '7',
+        8: '8',
+        9: '9',
+        10: '10',
+        11: '11',
+        12: '12',
+        13: '13',
+        14: '14',
+        15: '15',
+        16: '16',
+      },
+    },
+    variants: {
+      aspectRatio: ['responsive'],
+    },
+  }
+)
+
+module.exports = aspectRatio