Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
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.
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