Nested :global selectors

[Rich-Harris]

Describe the problem

You can do this:

<style>
  .foo {
    font-size: 2em;
  }

  .foo :global {
    p {
      color: purple;
    }
  }
</style>

It would be nice if you could do this:

<style>
  .foo {
    font-size: 2em;

    :global {
      p {
        color: purple;
      }
    }
  }
</style>

Right now it fails cryptically.

Describe the proposed solution

see above

Importance

nice to have

[cdcarson]

According to me, the first guy doesn't work either. Note the squiggly at the beginning of the div tag...

When I hover over it I get:

:global(...) can be at the start or end of a selector sequence, but not in the middle.

I've been spinning wheels from time to time trying to solve this, thinking it's something with tailwind or postcss (which it still may be, given that the first example works for you, and not me.)

[Rich-Harris]

Is your VSCode extension up to date, and do you have the latest svelte@next version?

[cdcarson]

vscode is up-to-date according to the marketplace...

svelte.svelte-vscode@108.4.1

svelte version is 5.0.0-next.136...

npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1
    Memory: 84.22 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.0/bin/npm
    pnpm: 9.1.1 - ~/Library/pnpm/pnpm
    bun: 1.0.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.209
    Edge: 125.0.2535.51
    Safari: 17.4.1
  npmPackages:
    svelte: 5.0.0-next.136 => 5.0.0-next.136 

I'm thinking it's something with my tailwind / postcss setup.

// postcss.config.js
export default {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    'postcss-preset-env': {
      browsers: ['last 2 versions', 'not dead', 'not op_mini all']
    }
  }
};

// talwind.config.ts
import { addDynamicIconSelectors } from '@iconify/tailwind';
import colors from 'tailwindcss/colors';

/** @type {import('tailwindcss').Config} */
const config = {
  darkMode: ['class'],
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      colors: {
        gs: colors.neutral,
        primary: colors.blue,
        danger: colors.red
      }
    }
  },
  plugins: [addDynamicIconSelectors()]
};

export default config;

[cdcarson]

Here's a repro with

• my setup,
• your examples above,
• an example that works
• an example of tailwind dark mode styles getting stripped. This is a huge pain in the context of styling children, e.g. dropdown menu items. The way folks are dealing with it is by component-izing everything (like DropdownMenuItem) just to style html links and buttons. IMO that's goofy.

repro: https://github.com/cdcarson/svelte-styles-repro

the example components are here: https://github.com/cdcarson/svelte-styles-repro/tree/main/src/lib

[jamesst20]

This currently work in my project:

<style lang="postcss">
  .foo {
    font-size: 2em;

    :global(p) {
        color: purple;
    }
  }
</style>

Note: I have postcss and tailwind setup.

I have a project that has "SidebarItem" component that uses a "Link" component and I had to pass a custom class "active" to highlight it when it's active.

I had to use global to get it done but it works:

  .sidebar-item {
    & > :global(:not(.active)) {
      @apply text-yellow-brand;
    }

    & > :global(.active) {
      @apply bg-yellow-brand;
      @apply text-black;
    }
  }

[cdcarson]

@jamesst20 See the error I posted above...

:global(...) can be at the start or end of a selector sequence, but not in the middle.

Your examples work because the :global selector is at the end of the two sequences produced by your nesting.

[dummdidumm]

This works now