0

WordPress is all about PHP and JSS is... Js. And I want to use JSS but I got trouble in interacting between generated HTML by PHP and CSS from JSS. Like in the official example (https://codesandbox.io/s/z21lpmvv33), JSS generate a version of CSS classes. This means I cannot set fixed classes in WordPress. What should I do?

6
  • I can't think of any reason why you'd want to use this with WordPress. It seems pretty clearly designed for use with React applications and the like. – Jacob Peattie Dec 20 '19 at 10:06
  • Because I don't know how to use React. Moreover, I wanna use vanilla Js on client side. I was looking for a way to convert JSS to CSS via gulp without changing class name so I can use it on PHP files. Do you think it possible? – Star Light Dec 20 '19 at 12:32
  • 1
    But why on earth do you need to use JSS? – Jacob Peattie Dec 20 '19 at 12:58
  • It doesn't have to be JSS, anything that meets my requirement will do. In the past, I used SASS. But with new big upgrade recently, it's no longer meets my requirement anymore so I have to kiss goodbye it. – Star Light Dec 21 '19 at 6:11
  • And what's your requirement? – Jacob Peattie Dec 21 '19 at 6:21
1

JSS is designed for dynamically generated HTML rendered by JS. It's purpose is to generate unique identifiers for class names to prevent collisions in naming.

If you want to have static CSS generated it's easier to look at LESS\SASS\SCSS and build them with gulp, or with Less straight(http://lesscss.org/usage/).

Here's heavily modified example which does what you might want. https://codesandbox.io/s/core-jss-playground-84yve

All is done using jss-plugin-global

Compare it to initial code in how CSS rules are defined with @global to make them rendered without enhancing class names with dynamic parts.

Also look at https://cssinjs.org/jss-plugin-global docs and nested plugin docs https://cssinjs.org/jss-plugin-global as it's useful.

And probably you'll find it useful to use JSS-CLI https://cssinjs.org/cli/ So with JSS CLI you'll be able to complile JSS into static CSS and serve it via wp_enqueue_style() as normal css file.

Or you can build your JS with JSS file from ES6 syntax with webpack+babel and then use wp_enqueue_script() and your built JS will compile inner JSS and inject into page just like in example.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.