BlueBeka Posts - Answer Overflow

BlueBeka

Explore posts from servers

KPCKevin Powell - Community TTCTheo's Typesafe Cult

•Created by BlueBeka on 8/7/2024 in #questions

Tailwind alias/rename utility?

I've got a theme color config that looks a little like this:

theme: {
  colors: {
    text: {
      vivid: "...",
      muted: "...",
    },
  }
}

theme: {
  colors: {
    text: {
      vivid: "...",
      muted: "...",
    },
  }
}

Is it possible to make it so I can just use text-vivid instead of text-text-vivid? Non-text utilities should be unaffected, so bg-text-valid if for some reason I want to color the background with the text-vivid color. I assume this can probably been done with a plugin, but I'm not sure. Is it possible? Are there any existing solutions? Thanks 🙂

4 replies

TTCTheo's Typesafe Cult

•Created by BlueBeka on 8/7/2024 in #questions

How to webpack? (in nextjs)

I can do what I want to do super easy in rollup but I can't for the life of me figure out how to do it in webpack. Essentially all I want to do is run my source code through a tool to transform it before it's compiled. My source code is in TypeScript but my tool only works with JavaScript, so I need to add the transformation after the the TypeScript transpilation. I created a webpack loader that seem to work fine for js file, but I don't know how to get it to work for ts files too. This is what I've got so far:

// next.config.js
export default {
  // ...

  webpack: (webpackConfig, { dev }) => {
    if (!dev) {
      webpackConfig.module.rules.push({
        test: /\.js/,
        exclude: /node_modules/,
        loader: fileURLToPath(import.meta.resolve("deassert/webpack-loader")),
      });
    }
    return webpackConfig;
  },
};

// next.config.js
export default {
  // ...

  webpack: (webpackConfig, { dev }) => {
    if (!dev) {
      webpackConfig.module.rules.push({
        test: /\.js/,
        exclude: /node_modules/,
        loader: fileURLToPath(import.meta.resolve("deassert/webpack-loader")),
      });
    }
    return webpackConfig;
  },
};

Is this something that can be done in webpack, hopefully somewhat easily?

4 replies

KPCKevin Powell - Community

•Created by BlueBeka on 2/10/2024 in #front-end

Is using `aria-labelledby` redundant on an `input` element if already has an associated `label`?

Is there any point of the former over the latter?

<label for="foo" id="bar">Label</label>
<input id="foo" aria-labelledby="bar" />

<label for="foo" id="bar">Label</label>
<input id="foo" aria-labelledby="bar" />

vs.

<label for="foo">Label</label>
<input id="foo" />

<label for="foo">Label</label>
<input id="foo" />

Or is that relationship automatically inferred?

3 replies

KPCKevin Powell - Community

•Created by BlueBeka on 12/10/2023 in #front-end

Can `@supports` be used to detect support for an at rule?

I want detect if the browser supports @starting-style. So i need something like:

@supports (@starting-style) {
  /* ... */
}

@supports (@starting-style) {
  /* ... */
}

What's the valid syntax for this? assuming there is one.

2 replies

KPCKevin Powell - Community

•Created by BlueBeka on 10/30/2023 in #front-end

css `color-mix` not working with paint api.

For some reason I can't seem to use color-mix to set a color for houdini's paint api. Setting a simple color or even a relative color works fine. Any Idea why color-mix isn't working for me?

/* working */
--squiggly-line-color: red;
/* working */
--squiggly-line-color: oklch(
    from red calc(l * 7 / 8) calc(c * 3 / 4) h
  );
/* not working */
--squiggly-line-color: color-mix(
    in oklab,
    white 75%,
    black
  );

background: paint(squiggly-line);

/* working */
--squiggly-line-color: red;
/* working */
--squiggly-line-color: oklch(
    from red calc(l * 7 / 8) calc(c * 3 / 4) h
  );
/* not working */
--squiggly-line-color: color-mix(
    in oklab,
    white 75%,
    black
  );

background: paint(squiggly-line);

6 replies

KPCKevin Powell - Community

•Created by BlueBeka on 10/23/2023 in #front-end

Is it possible to scale an element by a fixed about using only css

I have a style that display a scale effect when a focusable elements is focused. Here's the rough css for applied to an anchor tag:

a {
  display: inline-block;
  scale: 1;
  transition: scale 0.3s ease;
  /* other styles */
}
a:focus-visible {
  scale: 1.05; /* can I make this an absolute amount, rather than relative */
  /* other styles */
}

a {
  display: inline-block;
  scale: 1;
  transition: scale 0.3s ease;
  /* other styles */
}
a:focus-visible {
  scale: 1.05; /* can I make this an absolute amount, rather than relative */
  /* other styles */
}

I'm also applying this effect to buttons, inputs, etc. Is there anyway I can modify this code to scale the element by a set about (say 1rem) rather than a relative amount? My issue with the relative amount is that is doesn't look good with elements that have quite different sizes.

4 replies

KPCKevin Powell - Community

•Created by BlueBeka on 10/20/2023 in #front-end

Tabindex for Button inside Link

I've got this html

<a href="example.com">
  <button>Label</button>
</a>

<a href="example.com">
  <button>Label</button>
</a>

The button is styled with css while the link has no styles/all the styles have been removed. The issue I have is when tabbing through the site, focus first goes to the link, and then to the button. However, I only need one of these to be tabbed to as they are essentially a single component. What's the best way to fix this? If I add tabindex="-1" to the button, functionally everything is good, but the focus styling on the button don't display. While if I add it to the link, I'm worried this will effect accessibility. Will it? or this the proper solution?

29 replies

KPCKevin Powell - Community

•Created by BlueBeka on 6/23/2023 in #front-end

Container Query units - vertical unit all evaluate to zero

I think I've fallen into a pitfall with container query units. 100cqb and 100cqh are evaluating to zero, but 100cqi and 100cqw are working as expected. Here's a simplified version I want I believe is all my relevant css:

.parent {
  container-name: foo;
  container-type: size;
  min-height: 500px;
  display: block;
}
.child {
  height: 200px;
  min-height: 100px;
  max-height: calc(100cqh - 64px);
  resize: vertical;
}

.parent {
  container-name: foo;
  container-type: size;
  min-height: 500px;
  display: block;
}
.child {
  height: 200px;
  min-height: 100px;
  max-height: calc(100cqh - 64px);
  resize: vertical;
}

Any ideas to the cause of why my max-height is coming out as 0px instead of >= 436px?

4 replies

Gaming

Programming