Distributed less variables and mixins ?

[hmelenok]

For example i have:

 {/*language=LESS*/}
        <style jsx>{`
          .ActionButton {
            height: 40px;
            width: 100%;
            background-color: @orangish;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 250ms ease;
            cursor: pointer;
            text-decoration: none;
            &:hover {
              background-color: @dark;
            }
            &__label {
              color: white;
              text-transform: uppercase;
              font-size: 14px;
              font-weight: 600;
              cursor: pointer;
            }
          }
        `}</style>

and @orangish; and @dark should be global variables

Please add it to readme or, show me how i can get it and I will fill it for you

[hmelenok]

And should add that template literals in that case now works too:

{/*language=LESS*/}
        <style jsx>{`
          .ActionButton {
            height: 40px;
            width: 100%;
            background-color: ${lessVariables['@orangish']};
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 250ms ease;
            cursor: pointer;
            text-decoration: none;
            &:hover {
              background-color: ${lessVariables['@dark']};
            }
            &__label {
              color: white;
              text-transform: uppercase;
              font-size: 14px;
              font-weight: 600;
              cursor: pointer;
            }
          }
        `}</style>

Will give you: (node:3370) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: Invalid % without number

[erasmo-marin]

Thank you, I think that add support for global variables is a little hard to implement, but yo should be able to import them. Any help is welcome.

This is a related issue in the sass plugin: https://github.com/giuseppeg/styled-jsx-plugin-sass/issues/10

[peterchealse]

any solutions ? plz

[hmelenok]

Sorry to say guys, I should not say this in thread, but we switched to PostCSS plugin for styled jsx(with nesting, prefixing, media queries, etc), seems parser cannot handle variables in template strings.

P.S. Sorry No mixins unfortunately. In this case much more configurable will be webpack with custom loaders, but for someone it is not an option.