PostCSS plugin that generates typed entities from CSS classes for chosen programming language.
MIT License
PostCSS plugin that generates typed entities from CSS classes for a chosen programming language. You can also use it to filter CSS classes to reduce output size for faster application launch.
I like atomic css libraries like TailwindCSS or Tachyons. I also like statically typed languages like Rust or Elm where compiler is your best friend and teacher.
So this plugin is trying to solve these problems:
Solutions:
string
class names.Do you use it? Create PR!
yarn add postcss-typed-css-classes --dev
postcss([
require("postcss-typed-css-classes")({
generator: "rust",
}),
]);
See Seed Quickstart Webpack for using with Webpack.
See PostCSS docs for examples for your environment.
"rust"
and "json"
at the time of writing
classes
string
string
"rust"
function() {}
(classes) => `Classes: ${classes.length}`
classes
example:[
{
"name": "container",
"properties": [
{
"property": "max-width: 576px",
"mediaQuery": "@media (min-width: 576px)"
}
]
}
]
path.resolve(__dirname, 'css_classes.rs')
examples
require("postcss-typed-css-classes")({
generator: "rust",
content: 'src/**/*.rs'
})
require("postcss-typed-css-classes")({
generator: "rust",
purge: options.mode === "production",
content: [
{ path: ['src/**/*.rs'] },
{
path: ['static/index.hbs', 'static/templates/**/*.hbs'],
regex: /class\s*=\s*["'|][^"'|]+["'|]/g,
mapper: className => {
return (className.match(/class\s*=\s*["'|]([^"'|]+)["'|]/)[1]).match(/\S+/g)
},
escape: true
}
],
})
class_
that will be called when a CSS class is found in your stylesheetfunction() { return true }
(class_) => class_ !== "not-this-class"
default
{
'-': '_',
':': '__',
'/': 'of',
'@': '_at_',
'\\.': '_p_',
'^(?=\\d)': '_'
}
example
require("postcss-typed-css-classes")({
generator: "rust",
replace: {
"-":"_d_"
}
})
NOTE: Plugin is based on official postcss-plugin-boilerplate. So it uses old JS and very strict linter, but I think that code is clean enough and commented => it shouldn't be problem for a small project like this and we don't have to solve problems with building pipelines.
yarn
in project rootcsharp
for this guide/generators/json_generator.js
and rename it to csharp_generator.js
csharp_generator.js
and change:// - pretty-print JSON with 4 spaces indentation
// - with a new line at the end of a file
// - see EXAMPLE CODE:
// `/tests/json_generator_test/json_generator.basic.expected_output`
function generate (classes) {
return JSON.stringify(classes, undefined, 4) + os.EOL
}
to
// - generate C# class
// - see EXAMPLE CODE:
// `/tests/csharp_generator_test/csharp_generator.basic.expected_output`
function generate (classes) {
return "..I'm a c# class with " + classes.length + ' fields..' + os.EOL
}
/index.js
var csharpGeneratorModule = require('./generators/csharp_generator')
below the line
var jsonGeneratorModule = require('./generators/json_generator')
case 'csharp':
return csharpGeneratorModule.generate
into function getDefaultGenerator
/tests/json_generator_test
and rename it to csharp_generator_test
/tests/csharp_generator_test/json_generator.basic.expected_output
to csharp_generator.basic.expected_output
csharp_generator.basic.expected_output
to
..I'm a c# class with 6 fields..
(new line at the end is necessary)
/tests/csharp_generator_test/json_generator.test.js
to csharp_generator.test.js
csharp_generator.test.js
and change GENERATOR_NAME
from json
to csharp
yarn test
in the project root