diff --git a/.github/workflows/release-insiders.yml b/.github/workflows/release-insiders.yml index 5255dc5..2d77e8e 100644 --- a/.github/workflows/release-insiders.yml +++ b/.github/workflows/release-insiders.yml @@ -4,6 +4,10 @@ on: push: branches: [master] +permissions: + contents: read + id-token: write + jobs: build: runs-on: ubuntu-latest @@ -40,11 +44,11 @@ jobs: id: vars run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)" - - name: "Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}" + - name: 'Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}' run: npm version 0.0.0-insiders.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version - name: Publish - run: npm publish --tag insiders + run: npm publish --provenance --tag insiders env: CI: true NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/CHANGELOG.md b/CHANGELOG.md index e19ae08..03eee30 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Nothing yet! +## [0.4.2] - 2022-09-02 + +### Fixed + +- Update TypeScript types ([#34](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/34)) + +## [0.4.1] - 2022-09-01 + +### Added + +- Remove `dist` folder and related dependencies ([#29](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/29)) +- Add typescript types ([#33](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/33)) + +## [0.4.0] - 2021-12-09 + +### Added + +- Make sure that Tailwind CSS v3 is in peerDependencies ([ae97a25](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/ae97a25)) + ## [0.3.0] - 2021-10-05 ### Added @@ -61,7 +80,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 Initial release! -[unreleased]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.2...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.2...HEAD +[0.4.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.1...v0.4.2 +[0.4.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.0...v0.4.1 +[0.4.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.3.0...v0.4.0 +[0.3.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.2...v0.3.0 [0.2.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.1...v0.2.2 [0.2.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.0...v0.2.1 [0.2.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.4...v0.2.0 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9ed6725 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) Tailwind Labs + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index fdd0713..338e047 100644 --- a/README.md +++ b/README.md @@ -8,14 +8,10 @@ A plugin that provides a composable API for giving elements a fixed aspect ratio Install the plugin from npm: ```sh -# Using npm -npm install @tailwindcss/aspect-ratio - -# Using Yarn -yarn add @tailwindcss/aspect-ratio +npm install -D @tailwindcss/aspect-ratio ``` -Then add the plugin to your `tailwind.config.js` file: +Then add the plugin to your `tailwind.config.js` file, and disable the `aspectRatio` core plugin to avoid conflicts with the native `aspect-ratio` utilities included in Tailwind CSS v3.0: ```js // tailwind.config.js @@ -23,6 +19,9 @@ module.exports = { theme: { // ... }, + corePlugins: { + aspectRatio: false, + }, plugins: [ require('@tailwindcss/aspect-ratio'), // ... @@ -101,3 +100,42 @@ module.exports = { } } ``` + +## Compatibility with default aspect-ratio utilities + +Tailwind CSS v3.0 shipped with [native aspect-ratio](https://tailwindcss.com/docs/aspect-ratio) support, and while these new utilities are great, the `aspect-ratio` property isn't supported in Safari 14, which still has [significant global usage](https://caniuse.com/mdn-css_properties_aspect-ratio). If you need to support Safari 14, this plugin is still the best way to do that. + +While it's technically possible to use the new native `aspect-ratio` utilities as well as this plugin in the same project, it doesn't really make a lot of sense to do so. If you're able to use the new native aspect-ratio utilities, just use them instead of this plugin, as they are a lot simpler and work much better. + +However, if you do want to use both approaches in your project, maybe as a way of transitioning slowly from the plugin approach to the new native utilities, you'll need to add the following values to your `tailwind.config.js` file: + +```js +module.exports = { + // ... + theme: { + aspectRatio: { + auto: 'auto', + square: '1 / 1', + video: '16 / 9', + 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', + }, + }, +} +``` + +This is necessary, as the default `aspectRatio` values are overwritten by this plugin's values. diff --git a/dist/.gitignore b/dist/.gitignore deleted file mode 100644 index 2f41fac..0000000 --- a/dist/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -* -!.gitignore -!.npmignore diff --git a/dist/.npmignore b/dist/.npmignore deleted file mode 100644 index e69de29..0000000 diff --git a/package.json b/package.json index 3b146e8..f9fab69 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "name": "@tailwindcss/aspect-ratio", - "version": "0.3.0", + "version": "0.4.2", "main": "src/index.js", + "types": "src/index.d.ts", "license": "MIT", "repository": "https://github.com/tailwindlabs/tailwindcss-aspect-ratio", "publishConfig": { @@ -14,18 +15,15 @@ "trailingComma": "es5" }, "scripts": { - "test": "jest", - "prepublishOnly": "node scripts/build.js" + "test": "jest" }, "peerDependencies": { - "tailwindcss": ">=2.0.0 || >=3.0.0-alpha.1" + "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" }, "devDependencies": { - "autoprefixer": "10", - "clean-css": "^4.2.1", "jest": "^27.2.4", "postcss": "^8.2.4", - "tailwindcss": "^3.0.0-alpha.1", + "tailwindcss": "^3.0.0", "tailwindcss-v2": "npm:tailwindcss@^2.2.16" } } diff --git a/scripts/build.js b/scripts/build.js deleted file mode 100644 index 8ee5212..0000000 --- a/scripts/build.js +++ /dev/null @@ -1,36 +0,0 @@ -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.') -}) diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000..c23a9a3 --- /dev/null +++ b/src/index.d.ts @@ -0,0 +1,2 @@ +declare const plugin: { handler: () => void } +export = plugin