j2css/j2c

A JavaScript to CSS compiler

Barney Carroll

@barneycarroll

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.

Pierre-Yves Gérardy

@pygy

@ArthurClemens I just published v1.0.7 with a module where the jsnext:main field was, could you give it a look?

Arthur Clemens

@ArthurClemens

I’ll look tomorrow

Pierre-Yves Gérardy

@pygy

:+1: good night!

Off to bed as well

Arthur Clemens

@ArthurClemens

I am getting the same error: Can't import the named export 'prefixPlugin' from non EcmaScript module (only default export is available)

I can get my code working with:

import { prefixPlugin } from "j2c-plugin-prefix-browser/dist/j2c-plugin-prefix-browser.commonjs”;

Pierre-Yves Gérardy

@pygy

Could you post your rollup/webpack settings in a gist?

Arthur Clemens

@ArthurClemens

I have them here: https://github.com/ArthurClemens/polythene/tree/next/scripts

Packages are bundled by Rollup. The demo application runs using Webpack.

The package.json for the css package

Pierre-Yves Gérardy

@pygy

Thanks, I'll investigate

Stefan Thon

@smuemd

Das b

Odh

BR ,kbviz p

Z DMjvdm h

Where communities thrive

People

Repo info

Activity