by

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
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
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
G
Pierre-Yves Gérardy
@pygy
@smuemd you cat/kid stepped on your keyboard :-D
... or did you fall asleep?
Arthur Clemens
@ArthurClemens
:point_up: March 22, 2018 8:55 AM Perhaps easier if I create a PR?
Pierre-Yves Gérardy
@pygy
One year later :-)
Yes, please shoot me a PR :-)
Arthur Clemens
@ArthurClemens
:thumbsup:
j2c is still the most flexible css-in-js for me