j2css/j2c

A JavaScript to CSS compiler

Barney Carroll

@barneycarroll

I am struggling to imagine the implementation

But I'm toying with a problem in the same general domain myself at the moment

Barney Carroll

@barneycarroll

HTTP middleware to allow ESM code written for the front end to function as ESM on the browser, by rewriting import statements' sources to reference a key that is mapped to the Node-resolved resource on the back end

Pierre-Yves Gérardy

@pygy

conceptually, s4c(elementName, sheet) would call j2c.sheet({'.PLACEHOLDER': sheet})
I have a filter plugin that I put at the start of the backend, and that incrementally hashes the sheet as it is built and buffers what it was passed to in an array.
If the hash is not known, call the rest of the backend with what was buffered, replacing the PLACEHOLDER class with the hash. The rest of the backend applies the prefixes and other tricks, and the sink inserts the rules in a stylesheet.

s4c returns a component, the sheet is created and hashed when the element is initialized. If the sheet has functions (for attrs/props-based customization), it is recreated before updates.

Barney Carroll

@barneycarroll

Riiiight

To be honest I struggle massively with this kind of exercise

Pierre-Yves Gérardy

@pygy

I need accessory backends for dealing with inline, anonymous @keyframes. Currently there's no CSS modules-like mangling of classes. I may "mangle" by tacking PLACEHOLDER as well, but I don't know how to get the mangled names in the child tree...

Barney Carroll

@barneycarroll

Extrapolating an intermediary abstraction of a complex data domain and deferring resolution

Pierre-Yves Gérardy

@pygy

Well it took me a full year of not thinking about it for the solution to emerge ;-)

Barney Carroll

@barneycarroll

Haha

That's my solution to too many problems, I often think

Pierre-Yves Gérardy

@pygy

Not sure what made it click :-)

Barney Carroll

@barneycarroll

I think you need to rest on and irrationally internalise abstractions before you can build successful higher order abstractions

Pierre-Yves Gérardy

@pygy

My brain is often much smarter than me... It was like that in math class in high school as well...

I was often able to intuit things without being able to deconstruct the reasoning

Barney Carroll

@barneycarroll

"Sometimes I start a sentence and I've got no idea where it's going to end…"

Same

That proved really problematic when I moved to England

Which is ironic considering that from a philosophical literary culture perspective the English hate deconstructionism

And the French love it

But in the UK coming up with the right results was not good enough in education, you had to be able to demonstrate your working in a way that could be ratified by the observers in a static document

In practice, that means you have to do it their way. Which is awful considering (WRT maths for example) their standard tools for processing arithmetic operations are incredibly low level

I can't even remember the French system for abstracting manual division but it was so much more powerful

Arthur Clemens

@ArthurClemens

I just spent time to figure out how to add an @import line to a sheet. Appears that this “just works”:

{
  "@import": "url('https://fonts.googleapis.com/css?family=Roboto')"
}

Pierre-Yves Gérardy

@pygy

Yup :-)

Pierre-Yves Gérardy

@pygy

@ArthurClemens the current version understands @namespace @import @charset @keyframes @font-face @viewport @page @media @supports @document @global @local and @extends

the last three being non-standard, CSS Modules related.

The first three expect a string as argument, the other blocks of rules or declarations, depending on the kind

Pierre-Yves Gérardy

@pygy

You can also pass an array of strings for @import, if you want to import more than one sheet.

Pierre-Yves Gérardy

@pygy

@ArthurClemens I just realized that most at-rules were not mentioned in the docs...

Arthur Clemens

@ArthurClemens

yep…

Pierre-Yves Gérardy

@pygy

@ArthurClemens Thanks for the heads up, I'll fix it

Pierre-Yves Gérardy

@pygy

I'll need some help for the v1 docs. The general API is

const j2c = new J2c(options)
const cssText = j2c.sheet({'.foo': {color: 'red'}})
j2c.names.foo // "random_prefix_1_foo"
const otherCssText = j2c.sheet({'.bar': {color: 'red'}})
j2c.names.bar // "random_prefix_1_bar"

// shares all the options of the first instance except the prefix and `names` dict
const otherInstance = j2c.ns() 
Object.keys(otherInstance.names).length // 0
const cssText = otherInstance.sheet({'.foo': {color: 'red'}})
otherInstance.names.foo // "random_prefix_2_foo"

The idea is that the initial setup (new J2c(options)) is potentially costly (creation of many closures to generate the various parts of the processors with the plugin calls inlined). in order to get better perf out of the result.

The advice I'm seeking would be how to name local instance with their own prefix... J2c/j2c seems Ok for the constructor and main instance...

You can tweak the prefixes by passing a number to .ns() for a given length, or by passing a string to be used as prefix (BEM-style).

@ArthurClemens the next docs already have more about at-rules actually:

All standard CSS at-rules are available out of the box, most importantly:

@media and @supports, which can be nested anywhere in the sheet, SASS-style.

@keyframes

@font-face

Pierre-Yves Gérardy

@pygy

Does someone know a workaround this Firefox bug? In this Flems, the text should scroll and fade out, but in FF it is as if the text had position: fixed...

Arthur Clemens

@ArthurClemens

I try to update Polythene to work with Webpack 4, but I keep getting the error

Can't import the named export 'prefixPlugin' from non EcmaScript module (only default export is available)

Pierre-Yves Gérardy

@pygy

Let me look...

Arthur Clemens

@ArthurClemens

Webpack 4 is a bit of a struggle, but I have it working (with that one exception) by using an extension less main file, and the module name using mjs:

"main": "dist/project",
"module": "dist/project.mjs”,

Webpack 4 only could use the extension less main file, but Rollup needs “module”. Because Webpack gives precedence to .mjs, this combination works for both.

Pierre-Yves Gérardy

@pygy

It looks like I have a v1.0.7 that I forgot to publish, with

  "main": "dist/j2c-plugin-prefix-browser.commonjs.js",
  "module": "src/plugin.js",

Whereas the current v1.0.6 still has

  "main": "dist/j2c-plugin-prefix-browser.commonjs.js",
  "jsnext:main": "src/plugin.js",

And, actually, the module should have pointed to main.js that only exports the public function, the other exports in plugin.js are meant for testing IIRC

Is mjs mandatory for modules with Webpack 4?

@ArthurClemens

Arthur Clemens

@ArthurClemens

Webpack 4 supports multiple types

it is useful to offer at least one esm file

Arthur Clemens

@ArthurClemens

Webpack 4 can figure out which file is which, so you can also use an esm file with .js extension, but Rollup needs the .mjs extension to know

Arthur Clemens

@ArthurClemens

(extension in package.json)

Pierre-Yves Gérardy

@pygy

re. Rollup, that's surprising, they don't seem to mention mjs in the docs...

I'll look into this tomorrow.

Where communities thrive

People

Repo info

Activity