styled-components

Semi-related question regarding specificity - we're shipping a design system / component library built with styled-components. There are (known, internal) scenarios where, when rendering components from this library in an existing application with its own CSS, the existing CSS overrides the component library CSS. And the app's CSS uses ID selectors in some places, making it impossible to override using the &&& approach.

3:25pm

We've experimented with https://github.com/QuickBase/babel-plugin-styled-components-css-namespace and while yes it works for this specific case, we'd like to not dictate the need for a wrapper container around the component library components with some specific ID tag or whatever. Instead, we'd like to make this a runtime concern.

3:26pm

So, the specific question: does anybody have any strategies for applying a CSS namespace to all the CSS generated in a library at runtime (instead of using a build-time babel plugin)?

3:27pm

Maybe based on some process.env variable, or any other strategy.

November 1, 2019 at 7:12am

Ilja Daderko@ilja-daderko

7:12am

Are env variables supported in styled-components? I was trying to utilise inset ones to style around iPhone's notch, but following doesn't work, nor does it fall back to those 40px

const Header = styled.header`
  padding-top: env(safe-area-inset-top, 40px);
`;

7:12am

normal padding-top: 40px; works as expected

November 1, 2019 at 2:43pm

Kevin Bost@kevbost

2:43pm

@ilja-daderko

are you working in react-native or just in the browser?

November 4, 2019 at 1:18pm

Kirill Poddubnyi@kirillp

1:18pm

Hey guys, does anyone know are there any approaches to increase the CSS specificity for the whole project? Something like &&&, but for the whole styles in project by default.

1:28pm

I see that

@david-daniell

's answer can help!

3:47pm

But https://github.com/QuickBase/babel-plugin-styled-components-css-namespace has too many issues. We can't use it :(

November 10, 2019 at 8:00am

Ha Gia Phat@phatg

8:00am

Hi guys, has anyone customized or made a custom css function that does extra things besides what styled-components provides? I want to do that but I can't find any example. Cheers

November 15, 2019 at 2:30pm

freakyfanny@freakyfanny

2:30pm

Im interested of how your theme objects look like ours look like this:

export default merge(
  {},
  {
    responsiveProps: {
      breakpoints: BREAKPOINTS,
    },
    login: {
      animationBackground: false,
      buttonBorder: white,
      linkColor: white,
      hover: {
        color: white,
        background: blue.light,
        buttonBorder: 'transparent',
      },
    },
    primary: blue.light,
    background: '#F9F9F9',
    text: grey.xdark,
    textDisabled: grey.light,
    infoColor: blue.light,
    errorColor: red.base,
    warningColor: yellow.base,
    successColor: green.base,
    backgroundHoverColorDefault: grey.xxlight,
    inputBorderRadius: INPUT_BORDER_RADIUS,
    icon: {
      fleetIcon: 'fleet',
    },
    userMenu: {
      iconColor: blue.light,
    },
    linkColor: {
      text: blue.light,
      underline: 'none',
      hover: green.base,
      hoverUnderline: 'none',
    },
    cardLabel: {
      base: grey.xdark,
    },
    iconColor: {
      base: grey.xdark,
    },
    borderColor: {
      light: grey.xlight,
      base: grey.base,
    },
    borderRadius: '3px',
    backgroundColor: {
      white: {
        background: white,
        color: grey.xdark,
      },
      blue: {
        background: blue.light,
        color: white,
      },
      green: {
        background: green.dark,
        color: white,
      },
      red: {
        background: red.base,
        color: white,
      },
      xxlight: {
        background: grey.xxlight,
        color: grey.xdark,
      },
      xlight: {
        background: grey.xlight,
        color: grey.xdark,
      },
      light: {
        background: grey.light,
        color: grey.xdark,
      },
      dark: {
        background: grey.xdark,
        color: white,
      },
      xdark: {
        background: grey.xdark,
        color: white,
      },
      xxdark: {
        background: grey.xxdark,
        color: white,
      },
    },
    whiteSpace: {
      xsmall,
      small,
      medium,
      large,
    },
    distance: {
      xsmall,
      small,
      medium,
      large,
    },
    transition,
    colors,
    pageBrand,
    topBarBrand,
  },
  componentThemes,
);

How does your structure look like?

David Daniell@david-daniell

3:29pm

Kirill Poddubnyi@kirillp

But https://github.com/QuickBase/babel-plugin-styled-components-css-namespace has too many issues. We can't use it :(

Yeah, we keep running into issues with it as well. It's starting to feel like this sort of feature will need to be fundamentally built into styled-components itself...

November 17, 2019 at 7:30pm

David Daniell@david-daniell

7:30pm

David Daniell@david-daniell

Yeah, we keep running into issues with it as well. It's starting to feel like this sort of feature will need to be fundamentally built into styled-components itself...

FYI

@kirillp

et al, I pushed a PR to babel-plugin-styled-components-css-namespace today which seems to resolve a large class of errors we've encountered: https://github.com/QuickBase/babel-plugin-styled-components-css-namespace/pull/50 - feel free to comment there (or upvote if it also helps you).

November 29, 2019 at 2:16pm

Stephanie@stephaniie

2:16pm

Hi anyone there ?