A PostCSS plugin to emulate flex gap using margins
Home Page: https://gavinmcfarland.github.io/flex-gap-polyfill/
License: Creative Commons Zero v1.0 Universal
I create Figma plugins and widgets to help designers and developers in their day-to-day work.
These are the Figma plugins which I've created:
When a container is the child of another container the width is calculated incorrectly because the element in question is taking the gutter thickness for the parent containers children.
<div g_10gu>
<div w_50%>Buy this item</div>
<div w_50%>B</div>
<div w_50%> <!-- width incorrectly calculated -->
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</div>The gutter thickness for this element needs to be reset to 0px.
If the width is declared in a different class to gutters then the plugin doesn't detect that their are gutters present and so does not add the thickness of the gutters to the width of the container.
Hello. There is a demo link in the Readme.md file https://limitlessloop.github.io/flex-gap-polyfill/ but it won't open. Please fix it.
** From the documentation **
Known issues
No way to detect browsers which support flex-gap, so polyfill is always used.
** Found possible detection **
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/flexgap.js
A flex column with a gap and with row-gap, behaves the same for my use case. With the polyfill it only works well with row-gap. Gap will make the column shift to the left. I'll try to make a simple reproduction and put it here when I have the time.
Hi there,
I created this gist https://gist.github.com/frugan-dev/19f94872e4b6005775d91350e87002bf and would love to hear some feedback from you..
Thanks!
How this polyfill can used in angular 2 application?
How can i pass my css to the proccess function in polyfill.ts file?
Thanks a lot.
packages.json
{
"name": "kawab-v3",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
"@popperjs/core": "^2.6.0",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "6.0.0-beta.7",
"@stripe/stripe-js": "^1.13.1",
"axios": "^0.21.1",
"bootstrap": "^5.0.0",
"css-loader": "^5.1.1",
"css-minimizer-webpack-plugin": "^3.0.0",
"flex-gap-polyfill": "2.0.0",
"mini-css-extract-plugin": "^1.3.9",
"postcss": "^8.2.7",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.0.0",
"postcss-loader": "^5.1.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.0",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0"
},
"version": "0.1.0",
"devDependencies": {
"@webpack-cli/serve": "^1.3.0",
"webpack-dev-server": "^3.11.2"
},
"babel": {
"presets": [
"./node_modules/@rails/webpacker/package/babel/preset.js"
]
},
"browserslist": [
"defaults"
]
}
postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('flex-gap-polyfill'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}),
]
}
Upgrading to version 3 or 4 breaks compilation: "flex-gap-polyfill": "^4.0.0"
Error
[Webpacker] Compiling...
[Webpacker] Compilation failed:
assets by chunk 1.62 MiB (id hint: vendors)
asset js/vendors-node_modules_fortawesome_fontawesome-free_js_all_js-node_modules_rails_activestorage_-a4abd5-4cd3d3c143f71678446e.js 1.55 MiB [emitted] [immutable] (id hint: vendors) 1 related asset
asset js/vendors-node_modules_babel_runtime_regenerator_index_js-node_modules_stripe_stripe-js_dist_st-990793-411db816232e667b7f04.js 80.7 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
asset js/website-6698940e1ebf8fabc153.js 12.8 KiB [emitted] [immutable] (name: website) 1 related asset
asset js/runtime-6ac31981503f92501d2d.js 6.89 KiB [emitted] [immutable] (name: runtime) 1 related asset
asset js/admin-227c5e031914f0c4eed2.js 5.66 KiB [emitted] [immutable] (name: admin) 1 related asset
asset manifest.json 2.33 KiB [emitted]
Entrypoint admin 1.56 MiB (1.56 MiB) = js/runtime-6ac31981503f92501d2d.js 6.89 KiB js/vendors-node_modules_fortawesome_fontawesome-free_js_all_js-node_modules_rails_activestorage_-a4abd5-4cd3d3c143f71678446e.js 1.55 MiB js/admin-227c5e031914f0c4eed2.js 5.66 KiB 3 auxiliary assets
Entrypoint website 1.64 MiB (1.65 MiB) = js/runtime-6ac31981503f92501d2d.js 6.89 KiB js/vendors-node_modules_fortawesome_fontawesome-free_js_all_js-node_modules_rails_activestorage_-a4abd5-4cd3d3c143f71678446e.js 1.55 MiB js/vendors-node_modules_babel_runtime_regenerator_index_js-node_modules_stripe_stripe-js_dist_st-990793-411db816232e667b7f04.js 80.7 KiB js/website-6698940e1ebf8fabc153.js 12.8 KiB 4 auxiliary assets
runtime modules 3.6 KiB 7 modules
modules by path ./node_modules/ 1.53 MiB
modules by path ./node_modules/@popperjs/core/lib/ 73.2 KiB 58 modules
modules by path ./node_modules/axios/ 41.3 KiB 27 modules
modules by path ./node_modules/@rails/ 60.2 KiB
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js 27.6 KiB [built] [code generated]
./node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js 32.6 KiB [built] [code generated]
5 modules
modules by path ./app/packs/ 7.74 KiB
modules by path ./app/packs/src/ 7.02 KiB
modules by path ./app/packs/src/website/javascripts/ 6.45 KiB 5 modules
modules by path ./app/packs/src/admin/javascripts/ 588 bytes 3 modules
modules by path ./app/packs/entrypoints/ 736 bytes
modules by path ./app/packs/entrypoints/*.js 658 bytes 2 modules
modules with errors 78 bytes [errors] 2 modules
ERROR in ./app/packs/entrypoints/admin.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: postcssValuesParser.parse is not a function
at /Users/james/Projects/KawabV3/app/packs/entrypoints/admin.scss:6731:1
at /Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:326:33
at Array.forEach (<anonymous>)
at rewriteMargin (/Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:308:16)
at /Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:609:13
at /Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:115:18
at /Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:74:18
at Root.each (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:60:16)
at Root.walk (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:71:17)
at Root.walkRules (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:113:19)
at Object.Once (/Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:541:12)
at processResult (/Users/james/Projects/KawabV3/node_modules/webpack/lib/NormalModule.js:703:19)
at /Users/james/Projects/KawabV3/node_modules/webpack/lib/NormalModule.js:809:5
at /Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/james/Projects/KawabV3/node_modules/postcss-loader/dist/index.js:96:7)
ERROR in ./app/packs/entrypoints/website.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: postcssValuesParser.parse is not a function
at /Users/james/Projects/KawabV3/app/packs/entrypoints/website.scss:6605:1
at /Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:326:33
at Array.forEach (<anonymous>)
at rewriteMargin (/Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:308:16)
at /Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:609:13
at /Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:115:18
at /Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:74:18
at Root.each (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:60:16)
at Root.walk (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:71:17)
at Root.walkRules (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:113:19)
at Object.Once (/Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:541:12)
at processResult (/Users/james/Projects/KawabV3/node_modules/webpack/lib/NormalModule.js:703:19)
at /Users/james/Projects/KawabV3/node_modules/webpack/lib/NormalModule.js:809:5
at /Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/james/Projects/KawabV3/node_modules/postcss-loader/dist/index.js:96:7)
2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.38.1 compiled with 4 errors in 4588 ms
Chrome：
IE11：
I can't get this to work with the latest PostCSS and Webpack 4.
postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('postcss-preset-env'),
require('flex-gap-polyfill')(),
],
};
I get the following error:
JisonLexerError: Lexical error on line 1: Unrecognized text.
Erroneous area:
1: -auto * var(--fgp-gap_percentage-decimal_row)
^...^
Due to only checking for *.module.css extension, we get the following error when using SCSS Modules:
./components/Layout/Main.module.scss:1:1
Syntax error: Selector ":root" is not pure (pure selectors must contain at least one local class or id)
Code:
I've got a pull-request coming!
The minimal reproduction is here.
I was using windicss before. Since I've switched to unocss, I've found that the flex-gap-polyfill plugin doesn't work as expected, in a flex container with gaps, elements will have a wrong size.
Then I started to make a minimal reproduction of the bug, and found another necessary condition to reproduce the bug: the attributify preset of unocss. To reproduce the bug, we need a element with a flex attribute (with any or none prefix). When the related css is packed, the bug will happen.
Windicss also has attributify mode, but it won't trigger this bug.
pnpm i
pnpm devOpen index.html, see the follow lines and try it:
<!--Delete (instead of commenting as unocss will not regard the syntax) the next line, restart the dev server and refresh the page to see the expected behavior-->
<div anyPrefix-flex="~ col"></div>Or run pnpm build to see the output in dist/assets/index-[hash].css
Unocss's output is unocss_output.css, and windicss's output is windicss_output.css. The difference is:
/* Unocss */
.flex,
[anyPrefix-flex~="~"] > * > * {
--parent-has-fgp: initial;
}
.flex,
[anyPrefix-flex~="~"] > * {
--parent-has-fgp: !important;
--element-has-fgp: initial;
pointer-events: var(--parent-has-fgp) auto;
}/* Windicss */
.flex > * > * {
--parent-has-fgp: initial;
}
.flex > * {
--parent-has-fgp: !important;
--element-has-fgp: initial;
pointer-events: var(--parent-has-fgp) auto;
}
[anyPrefix-flex~="~"] > * > * {
--parent-has-fgp: initial;
}
[anyPrefix-flex~="~"] > * {
--parent-has-fgp: !important;
--element-has-fgp: initial;
pointer-events: var(--parent-has-fgp) auto;
}flex-gap-polyfill/src/index.js
Lines 118 to 119 in 80b6e87
It seems like that the flex-gap-polyfill plugin doesn't work as expected when there're multiple selectors in the same rule, which causes the bug.
This is a flex item, I tried to remove the var(--parent-has-fgp), and it just works fine. But I don't know why it generate this var(--parent-has-fgp) at all...
Hello, i am using this plugin in my project which is based on nextjs and tailwind. But it throws error when compiling. It seems that the plugin is not compatible with base64. Could anyone help, thx.
package version: "flex-gap-polyfill": "^4.2.0",
If you write a CSS rule that looks like the following:
.thing {
height: 100px;
filter: alpha(opacity=80);
}
Or like this:
.thing {
height: 100px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
then postcss-values-parser gets caught on the values with the equal sign and fails. The obvious answer is just don't use these outdated values, but unfortunately I don't have an option as they're included in vital dependencies on my project.
I see that postcss-values-parser has an ignoreUnknownWords option for the parse() method, but I can't see any way in this module to pass it through. It would be great if either you could expose that option, or if you already know of some other way to get around the parsing issue.
If I have 2 (or more) classes at the same level then there is a problem with overriding margin:
So if I have:
<div class="Header Page__header>
...
</div>
.Header {
gap: 20px;
...
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.Page__header {
margin-top: 60px;
}Then generated margin for .Header will overrides margin-top from .Page__header.
The plugin should add user-defined margin to overall negative margin used for the polyfill.
For example all width's are currently re-written for reliability but this comes at a cost of larger CSS file.
Using column-gap on its own still results in margin-top being changed, but overriden to 0 rather than recaluclated.
.something {
display: flex;
column-gap: 2rem;
margin-top: 10px;
}.something {
display: flex;
margin-top: 10px;
--fgp-has-polyfil_gap-container: initial;
--fgp-gap_container_row: var(--fgp-has-polyfil_gap-container, calc(var(--fgp-gap_parent_row, 0px) - )) !important;
pointer-events: none;
--fgp-gap_parent_row: initial;
--fgp-gap_item_row: initial;
--fgp-gap_row: var(--fgp-gap_container_row) !important;
padding-top: 0.02px;
--fgp-margin-top: calc(var(--fgp-gap_row) + 10px);
margin-top: var(--fgp-margin-top) !important;
--fgp-gap_container_column: var(--fgp-has-polyfil_gap-container, calc(var(--fgp-gap_parent_column, 0px) - 2rem)) !important;
pointer-events: none;
--fgp-gap_parent_column: initial;
--fgp-gap_item_column: initial;
--fgp-gap_column: var(--fgp-gap_container_column) !important;
padding-top: 0.02px;
--fgp-margin-right: calc(var(--fgp-gap_column) + 0px);
margin-right: var(--fgp-margin-right) !important;
}Both
.something {
display: flex;
column-gap: 2rem;
row-gap: 0;
margin-top: 10px;
}and
.something {
display: flex;
gap: 0 2rem;
margin-top: 10px;
}work in the the margin-top is recalculated correctly, but it's redundant to do so. I'd expect just margin-right to change in all these cases, not margin-top.
Flex container items which are not 100% width of the container cannot calculate the correct negative margin because they don't know the computed width of the element.
One way to fix this could be to change the technique used on container items with percentage gaps and use technique of turning off margin on first child with no negative margins on container.
Currently getting:
postcss-gap: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
when using. Seems to work fine, but looks like it's worthwhile to upgrade.
The following doesn't work when the width is less or more than full width because the margin's are a percentage of the containers width and not it's parent.
.container {
gutters: 1%;
width: 50%;
}
It could only be fixed if the container was aware of it's intended width. Perhaps if the intended width was supplied as a CSS variable then the margin on the container could be calculated as needed.
Hi! How it can be used with Nuxt.js?
I found this, but there is only an example of adding a plugin. Or am I missing something?
So how can I do something like this?
postcss([
flexGapPolyfill(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);This is my postcss.config.json
{
"plugins": [
"flex-gap-polyfill",
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}It does not transform gap: x; to anything.
I'm getting the error Error: Cannot find module 'flexGapPolyfill' in my NextJS app.
Here is my postCSS config file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-preset-env': {
browsers: 'edge >= 18'
},
'flex-gap-polyfill': {},
},
};
I believe version 4 does not support postcss 7?
I searched the docs and the releases, but couldn't find which previous versions support postcss 7?
Thanks
If a container has min-height: 100vh.
Polyfill creates the following CSS variable --fgp-min-height which points to:
--fgp-min-height: var(--element-has-fgp) calc(100vh + var(--fgp-gap-row, 0%))
However 100vh + 0% can't be calculated, so the height is not applied.
I'm using this plugin with vite. The following warning is printed in console:
A PostCSS plugin did not pass the `from` option to `postcss.parse`. This may cause imported assets to be incorrectly transformed. If you've recently added a PostCSS plugin that raised this warning, please contact the package author to fix the issue.
postcss v8.4.23
flex-gap-polyfill v4.1.2
The gutter property is still accessible to elements nested inside container items.
I've got an element with display: grid; gap: 4rem;. It's a grid so it doesn't even need the polyfill but I understand why it applies rules anyway -- the "grid" part may be composed from a different ruleset, and you've no way of knowing.
But I've configured the plugin with flexGapNotSupported: ".no-flex-gap", and that class is not present since I'm testing with a browser which doesn't need the polyfill.
In this scenario I'd expect the polyfill not to apply any rules at all.
But I'm seeing a margin being added to my grid element, via --orig-margin-top, of positive 3rem. I see that this variable is being set on a container multiple levels up -- it's nothing to do with the container I want to be a grid.
I don't see this scenario mentioned in the readme, but surely it's very common.
Example:
.wrapper {
margin: 3rem 0;
border: 1px solid black;
}
.grid {
display: grid;
gap: 4rem;
grid-template-columns: 24rem 1fr;
border: 1px solid red;
}<div class="wrapper">
<h2>whatever content</h2>
<div class="grid">
<div>cell 1</div>
<div>cell 2></div>
</div>
</div>The margin-top of .wrapper is being added to the margin-top of .grid, even though there should be no margin at all.
Hi, there
I'm using this library for browser compatibility of CSS gap property in Safari < 14. On localhost, it is working fine but when I deploy my next js application it says "Reference error: module is not defined". I use CSS modules.
I'm importing it into index.tsx file inside the pages directory like this -
import 'flex-gap-polyfill';
Here is the error -
Does anyone know how I can fix this issue? Is there any specific settings I need to do on next js?
In Astro.js, I have applied the following in postcss.config.cjs:
const postcssPresetEnv = require("postcss-preset-env");
const flexGapPolyfill = require("flex-gap-polyfill");
module.exports = {
plugins: [postcssPresetEnv(), flexGapPolyfill()],
};
But when running the dev local server, it throws the following error:
A PostCSS plugin did not pass the "from" option to "postcss.parse". This may cause imported assets to be incorrectly transformed. If you've recently added a PostCSS plugin that rai sed this warning, please contact the package author to fix the issue.
Any idea how I can fix that ?
I have a css file that looks similar to this:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Jost:wght@400;600;700&family=Roboto+Slab:wght@400;700&display=swap');
// actual css below here
Adding the flex-gap-polyfill postcss plugin breaks this import. I am not 100% sure this root-rule prepending is causing this break but I think so. Am I missing anything?
Hi, I encountered this problem in my project
This is my project dependency version
"flex-gap-polyfill": "1.0.4", "nuxt": "2.10.2",
Is there any way I can handle this error
Hey I just wanted to try this package and found out and found this little problem, for context my PostCSS version on package.json is ^8.2.2.
The error:
JisonLexerError in plugin "gulp-postcss"
Message:
Lexical error on line 1: Unrecognized text.
Erroneous area:
1: -1 * fit-content * var(--fgp-gap_percentage-decimal_column)
^.......^
Details:
hash: [object Object]
postcssNode: --fgp-gap_percentage-to-pixels_column:calc(-1 * fit-content * var(--fgp-gap_percentage-decimal_column)) !important
fileName: E:\www\public\css\main-responsive.css
domainEmitter: [object Object]
domainThrown: false
The setup for postcss below (flexgap standing for flex-gap-polyfill):
postcss([flexgap(), autoprefixer(), calc(), cssnano()])
Regards,
Luis Bizarro.
Hi there,
I'm having this error with Webpack 5:
Error: Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) from "postcss-gap" plugin: <css input> Unknown word
> 1 | attr(width)/attr(height)
| ^These are the main parts of my setup:
package.json
"devDependencies": {
"flex-gap-polyfill": "^4.2.0",
"postcss": "^8.4.30",
"postcss-loader": "^7.1.0",
"webpack": "^5.84.0",
},webpack.config.js
const FlexGapPolyfill = require('flex-gap-polyfill');
module.exports = (env, argv = {}) => {
...
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
....
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
require('autoprefixer'),
],
[
'flex-gap-polyfill',
{
flexGapNotSupported: '.no-flexgap',
},
],
],
},
},
},
....
],
},
...
};main.scss
//https://jakearchibald.com/2022/img-aspect-ratio/
//https://www.andreaverlicchi.eu/aspect-ratio-modern-reserve-space-lazy-images-async-content-responsive-design/
img[width][height] {
height: auto;
aspect-ratio: attr(width) / attr(height);
}The error appears only when I enable your plugin, and with the plugin enabled it disappears only by commenting the line aspect-ratio: attr(width) / attr(height); of the scss file.
What could it depend on?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.