Extend <txp:css> to output, well, CSS

Bloke · 2020-10-02 14:52:18

Currently, the <txp:css> tag outputs its content as:

A <link> tag, if used with format="link" attribute
A raw url, if used with format="url" attribute

Plus their flat counterparts. Could we add another format="style" option (and corresponding flat.style?) which will actually grab the contents of the endpoint and dump it on the page as a set of CSS rules? Perhaps automatically wrapped in <style> tags.

Sounds crazy, you might say. But consider that you’re building campaign emails using forms, maybe with some nice <txp:header /> output, and want to include some inline styles that get read in the email client? We can’t rely on a <link> to the site being followed when it’s read by the client, so to actually be able to use the tag to inject the resulting CSS file directly into the form template would be pretty handy.

Is there a non-PHP way to do this already that I’m missing? I can’t think of one.

Does that sound like a useful endeavour? And if so, how best to do it? Should we just insert the entire file contents wrapped in <style>...</style> tags? Then if anyone doesn’t want the surrounding tags, they can strip them off with escape:

<txp:css format="style" name="newsletter" escape="style" />

It would mean things like media and rel and title become useless if the tag is used in this ‘mode’, but they’re ignored if you use format="url" already.

Possibly useful extensions:

Since we allow a list of names for flat.*, shouldn’t we allow a list for regular usage too?
If so, using format="link" name="sheet1, sheet2" would render two link tags with the same media and other attributes. Useful for setting up multiple rel="alternate" stylesheets.
Further, using the tag like this: format="style" name="sheet1, sheet2" would concatenate the two sheets and surround them with <style> tags.
How about if you specify a media attribute media query (which are changing in level 4 CSS anyway) with format="style" then we could wrap the output in that media query as a convenience? e.g.:

<txp:css format="style" name="newsletter" media="screen and (min-width: 768px)" />

Would render:

<style>
@media (screen and (min-width: 768px)) {
   ... contents of stylesheet(s) here ...
}
</style>

Thoughts?

Last edited by Bloke (2020-10-02 14:53:20)

philwareham · 2020-10-02 22:19:23

Sure. There’s a few cases with inline css is helpful: email templates, AMP templates and when you need above the fold CSS. Although I do that in build scrips myself, I can see why this could be a benefit directly in Textpattern too.

Myusername · 2020-10-02 22:57:12

Let me ask you a question: can’t these things just be done by a form defined as CSS and a little <txp:yield/>? In my mind, using the “styles” tab or defining a form as CSS makes no difference. I even do this a lot when I need to use some php in the CSS form. (they don’t work in the “styles” tab). It makes it a lot easier when developing, as they are on the same page. (yes, I use the panel itself to develop, I’m sad it’s so simple over there.) If this is something wrong to do for some reason, tell me.

If I could suggest what can be done, it would be: focus your efforts on the “forms” tab. There, in addition to CSS, you can do everything you need. In fact, it is the panel where I develop the entire website.

Some ideas:

When creating a type of form, give options of what type to be: CSS, JS, XML, SVG and etc. Also, the personalized option where you could type the mimetype you want. (Why is that in the preferences tab, anyway?)
Bringing the <txp:evaluate/> tag options to the forms tab, it seems to me that it makes sense to also be there.
Possibility to order the types of forms as you wish, with options of up/down, or drag/drop. And who knows, even hide/show, for forms that are there, but you know you won’t have to change them anytime soon.

There are several other possible things. I just gave you an idea.

Anyway, anything that adds up is great.

Pat64 · 2020-10-03 04:51:18

Currently I’m using a form with a stylesheet media type (as explain by Myusername).

The main caveat: we can’t use a flat file (its content, only)…

Another idea with the css tag: add the possibility of concatenating several flat files (what the css tag can do for external files).

Bloke · 2020-10-08 17:24:26

@Myusername: I definitely hear what you’re saying about the blurry distinction between forms and ‘style forms’ that could serve CSS in the manner I describe.

If we are going to extend the capabilities of forms then I also agree it makes sense to be able to create them directly from the Forms panel and create media types there, instead of tucking it away in prefs. We could (and probably should) do that in a future version.

Forms are Textpattern’s heroes and they deserve to be made greater. I’m boosting their usefulness for articles right now. This thread was simply about our current, heavily-baked-in concept of Stylesheets (as distinct objects) being improved and squeezed into a point release.

To go any further and make ‘style forms’ would require a lot of rewiring of tags and concepts such as modifying how we internally link Stylesheets to Sections. That’s stuff more for a major/minor release, imo.

Concatenation is something I’m keen to explore too. Side note: we now permit extraction of multiple forms in one call so threading them together is simple.

Textpattern CMS

Textpattern CMS support forum

#1 2020-10-02 14:52:18

Extend <txp:css> to output, well, CSS

#2 2020-10-02 22:19:23

Re: Extend <txp:css> to output, well, CSS

#3 2020-10-02 22:57:12

Re: Extend <txp:css> to output, well, CSS

#4 2020-10-03 04:51:18

Re: Extend <txp:css> to output, well, CSS

#5 2020-10-08 17:24:26

Re: Extend <txp:css> to output, well, CSS

Board footer