What about SASS-like stuff

Hi there, I’ve made some extension for my projects. Do you think it’s useful? Here is description

Extension

Extend style-components with object of following shape

{
  vars: {
    variableName: 'Variable string value'
  },
  mixins: {
    flex: (flex) => `flex: ${flex}`
  }
}

Here is usage example

Extension

variables are the strings, like padding: #minSpace;

mixins are the functions, like @flex(1 1 auto);

mixin accepts varible as argument, like @margin(#minSpace)

mixin accepts multiple arguments, like @tint(#primaryRed, -10%)

styled.init({
  vars: {
    minSpace: '0.5em',
    primaryRed: 'red',
    'd:f': 'display: flex',
    'ff:rn': 'display: flex; flex-flow: row nowrap',
    'ff:cn': 'display: flex; flex-flow: column nowrap',
    'jc:sb': 'justify-content: space-between',
    'f:a': 'flex: auto'
  },
  mixins: {
    flex: (flex) => `flex: ${flex}`,
    margin: (margin) => `margin: ${margin}`,
    tint: (color, value) => coolTintColorFunctionFromOutside(color, value)
  },
});

Invocation

const Wrapper = styled.div`
  padding: #minSpace;
  #ff:cn;
  #jc:sb;
  @flex(1 1 auto);
  @margin(#minSpace);
  background-color: @tint(#red, -10%);
`;

[k15a]

In my opinion the better way would be to have JS care about variables and mixins. What speaks against using JS for all this for you?

const minSpace = '0.5rem'
const primaryRed = 'red'
const df = css`display: flex;`
const ffrn = css`display: flex; flex-flow: ro nowrap;`
const ffcn = css`display: flex; flex-flow: column nowrap;`
cont jcsb = css`justify-content: space-between;`
const fa = css`flex: auto;`

const flex = flex => css`flex: ${flex};`
const margin = margin => css`margin: ${margin};`
const tint = (color, value) => coolTintColorFunctionFromOutside(color, value)


const Wrapper = styled.div`
  padding: ${minSpace};
  ${ffcn}
  ${jcsb}
  ${flex(1, 1, 'auto')}
  ${margin('minSpace')}
  background-color: ${tint(primaryRed, -10)};
`;

This way nobody has to learn a new pseudo CSS language and we don’t have to bload the styled-components with things JS does very good.

[kitten]

@VicStor I’m sorry, but I meant globals as in variables in a global namespace. injectGlobal is an exception to what we normally do and we’re very clear about this in the docs:

We do not encourage the use of this. Use once per app at most, contained in a single file. This is an escape hatch.

It’s only for reset-like / normalize-like stylesheets.

The thing with adding sth like this is, while you’re getting rid of import-statements for some variables, you’re adding globals and changing the expected css syntax. I mean, stylis even supports ~~foo and var(~~foo) similar to css’s --foo and var(--foo), but it’s all custom and adds more mental overhead.

I’m not that concerned about the mental overhead however, but I’m more concerned that adding something like this would mean that we’re departing from being a pure css-in-js approach.

For reference:

Thanks btw, I always appreciate a good discussion 😃